要展示自定义音频播放器的当前时间和总时长,可以通过以下步骤实现:
<audio>
标签来创建音频播放器。例如:<audio id="myAudio" src="audio.mp3"></audio>
currentTime
属性获取当前播放时间,使用duration
属性获取总时长。例如:var audio = document.getElementById("myAudio");
var currentTime = audio.currentTime;
var duration = audio.duration;
function formatTime(time) {
var minutes = Math.floor(time / 60);
var seconds = Math.floor(time % 60);
return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
<span>
标签:<span id="currentTime"></span> / <span id="totalTime"></span>
var currentTimeElement = document.getElementById("currentTime");
var totalTimeElement = document.getElementById("totalTime");
audio.addEventListener("timeupdate", function() {
currentTimeElement.textContent = formatTime(audio.currentTime);
totalTimeElement.textContent = formatTime(audio.duration);
});
这样,就可以展示自定义音频播放器的当前时间和总时长了。
注意:以上代码示例仅为演示展示当前时间和总时长的基本实现方式,实际应用中可能需要根据具体需求进行适当的修改和扩展。
Elastic 实战工作坊
Elastic 实战工作坊
新知·音视频技术公开课
云+社区技术沙龙[第10期]
“中小企业”在线学堂
云+社区技术沙龙[第21期]
腾讯云GAME-TECH游戏开发者技术沙龙
Elastic 中国开发者大会
Hello Serverless 来了
领取专属 10元无门槛券
手把手带您无忧上云