javascript - 如何显示自定义音频播放器的当前时间和总长度？

Question

我目前有一个运行良好的音频播放器，但我想知道如何显示当前歌曲的总时长和当前歌曲，例如：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;

Answer 1

轻松愉快。在 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
});