首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何展示自定义音频播放器的当前时间和总时长?

要展示自定义音频播放器的当前时间和总时长,可以通过以下步骤实现:

  1. 首先,需要使用HTML5的<audio>标签来创建音频播放器。例如:
代码语言:txt
复制
<audio id="myAudio" src="audio.mp3"></audio>
  1. 在JavaScript中,可以使用currentTime属性获取当前播放时间,使用duration属性获取总时长。例如:
代码语言:txt
复制
var audio = document.getElementById("myAudio");
var currentTime = audio.currentTime;
var duration = audio.duration;
  1. 将获取到的当前时间和总时长进行格式化,以便更好地展示给用户。可以使用以下函数将时间转换为分:秒的格式:
代码语言:txt
复制
function formatTime(time) {
  var minutes = Math.floor(time / 60);
  var seconds = Math.floor(time % 60);
  return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
  1. 在页面中创建用于展示当前时间和总时长的元素,例如两个<span>标签:
代码语言:txt
复制
<span id="currentTime"></span> / <span id="totalTime"></span>
  1. 在JavaScript中,将格式化后的当前时间和总时长设置给对应的元素:
代码语言:txt
复制
var currentTimeElement = document.getElementById("currentTime");
var totalTimeElement = document.getElementById("totalTime");

audio.addEventListener("timeupdate", function() {
  currentTimeElement.textContent = formatTime(audio.currentTime);
  totalTimeElement.textContent = formatTime(audio.duration);
});
  1. 最后,可以通过CSS样式来美化展示当前时间和总时长的元素,使其更符合自定义音频播放器的设计。

这样,就可以展示自定义音频播放器的当前时间和总时长了。

注意:以上代码示例仅为演示展示当前时间和总时长的基本实现方式,实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券