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

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

var music=document.getElementById（'audioPlayer'）；//音频元素的id
风险值持续时间；//音频剪辑的持续时间
var pButton=document.getElementById（'pButton'）；//播放按钮
var playhead=document.getElementById（'playhead'）；//播放头
var timeline=document.getElementById（'timeline'）；//时间线
//调整了播放头的时间线宽度
var timelineWidth=timeline.offsetWidth-playhead.offsetWidth；

。在DOM中，音频对象具有

duration

属性

警报（document.getElementById（'audioPlayer'）。持续时间）；

因此，对于您的项目：

var duration=music.duration；

由于您在第一次尝试时获得了NaN，您可能需要将其包装到事件中：

music.ondurationchange（函数（）{
持续时间=document.getElementById（'audioPlayer'）。持续时间；
console.log（持续时间）；
//其他代码，如更新播放器
});

虽然当我刷新页面时它只是有一个警报，告诉我如何设置样式并记录它。我只是将代码更新为：

ocument.addEventListener（“DOMContentLoaded”，函数（事件）{var duration=music.duration；var music=document.getElementById（'audioPlayer'）；//音频元素变量pButton=document.getElementById（'pButton'）；//播放按钮变量playhead=document.getElementById（'playhead'）；//播放头变量timeline=document.getElementById（'timeline'）；//timeline music.ondurationchange（函数（）{duration=document.getElementById（'audioPlayer'）。持续时间；控制台.log（持续时间）；

现在“播放/暂停”按钮不起作用，我看不到持续时间。我缺少什么吗？为了使其可读性，您可能需要这样做。如果您没有将其设置为尽可能接近工作顺序，则它对诊断不是很有用。您可以为其提供远程URL，如

http://example.com/the.mp3

和图像也一样。