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

Posted 2023-02-25

【中文标题】如何显示自定义音频播放器的当前时间和总时长？

【英文标题】：How do I show the current time and total length of custom audio player?

【发布时间】：2020-01-01 01:51:37

【问题描述】：

我目前有一个运行良好的音频播放器，但我想知道如何显示当前歌曲的总时长和当前歌曲，例如：02:52/04:23。这是我目前所拥有的链接：Link To Custom Audio Player。这些都是我的变量、类和 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;

【参考方案1】：

Easy peasy。在 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
);

【讨论】：

这很有效，尽管当我刷新页面时它只是有一个警报说 Nan，我如何设置这个样式并记录它。

我刚刚将代码更新为：ocument.addEventListener("DOMContentLoaded", function(event) var duration = music.duration; var music = document.getElementById('audioPlayer'); // id for audio element var pButton = document.getElementById('pButton'); // play button var playhead = document.getElementById('playhead'); // playhead var timeline = document.getElementById('timeline'); // timeline music.ondurationchange( function() duration = document.getElementById('audioPlayer').duration; console.log(duration);

现在播放/暂停按钮不起作用，我看不到持续时间。有什么我想念的吗？

您可能需要make a fiddle out of it 才能使其可读

如果您不将其设置为尽可能接近工作状态，那么它对于诊断目的不是很有用。您可以为它提供远程 URL，如 http://example.com/the.mp3 和图像相同。