[英]How do I show the current time and total length of custom audio player?
我目前有一个运行良好的音频播放器,但我想知道如何显示当前歌曲的总持续时间和当前歌曲,例如:02:52/04:23。 这是我目前拥有的链接:链接到自定义音频播放器。 这些是我所有的变量、类和 id:
<!--HTML5 audio-->
<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
<source src="oh-my.mp3">
</audio>
<div id="wrapper">
<!--Audio Player Interface-->
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div class="progress" id="progress"></div>
<div id="playhead"></div>
</div>
</div>
</div>
var music = document.getElementById('audioPlayer'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
容易的。 在 DOM 中,音频对象有一个duration
属性。
alert( document.getElementById( 'audioPlayer' ).duration );
因此,对于您的项目:
var duration = music.duration;
由于您在第一次尝试时得到 NaN,您可能需要将其包装在一个事件中:
music.ondurationchange( function() {
duration = document.getElementById('audioPlayer').duration;
console.log(duration);
// other code such as updating the player
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.