Question

我在页面中有一个html5 <audio>标记，但我怎么知道它的持续时间？

<audio controls="">
    <source src="p4.2.mp3">
</audio>

Answer 1

您正在尝试使用哪种浏览器？在某些浏览器duration无法正常工作，正如您所提到的那样返回NaN。

您还要确保在尝试检索持续时间之前已加载音频文件吗？

Answer 2

var au = document.createElement('audio');
au.addEventListener('loadedmetadata',function(){
    au.setAttribute('data-time',au.duration);
},false);

Answer 3

在上面的评论中，有人提到解决方案是将事件句柄绑定到事件loadedmetadata。我就是这样做的 -

audio.onloadedmetadata = function() {
  alert(audio.duration);
};

Answer 4

2018 solution:

You will get undefined or NaN (not a number) when the audio metadata isn't loaded yet. Therefore some people suggested to use onloadedmetadata to make sure the metadata of the audio file is fetched first. Also, what most people didn't mention is that you have to target the first index of the audio DOM element with [0] like this:

-- Vanilla Javascript:

var audio = $("#audio-1")[0];
audio.onloadedmetadata = function() {
  alert(audio.duration);
};

If this won't work try this, however not so reliable and dependent on users connection:

setTimeout(function () {
    var audio = $("#audio-1")[0];
    console.log("audio", audio.duration);
}, 100);

-- JQuery:

$(document).ready(function() {
   var audio = $("#audio-1")[0];
   $("#audio-1").on("loadedmetadata", function() {
       alert(audio.duration);
   }); 
});

Answer 5

我发现这篇文章可能很方便。

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

Answer 6

我使用“canplaythrough”事件来获取曲目的持续时间。我有一个案例，我有两个球员，我想在第一个球员完成前2秒停止第二个球员。

$('#' + _currentPlayerID).on("canplaythrough", function (e) {   
    var seconds = e.currentTarget.duration;    
    var trackmills = seconds * 1000;
    var subTimeout = trackmills - 2000; //2 seconds before end

    //console.log('seconds ' + seconds);
    //console.log('trackmills ' + trackmills);
    //console.log('subTimeout ' + subTimeout);

    //Stop playing before the end of thet track
    //clear this event in the Pause Event
    _player2TimeoutEvent = setTimeout(function () { pausePlayer2(); }, subTimeout);

});

Answer 7

我一直在努力在React组件中加载持续时间，因此按照@AlexioVay的解决方案，如果您使用React，这是一个答案：

这假定您在音频组件类中使用ref，需要将audio元素用作播放/暂停处理程序。

<audio />元素：

<audio ref={audio => { this.audio = audio }} src={this.props.src} preload="auto" />

然后在您的componentDidMount()中：

componentDidMount() {

    const audio = this.audio

    audio.onloadedmetadata = () => {
        console.log(audio.duration)
        this.setState({
           duration: this.formatTime(audio.duration.toFixed(0))
        })
    }
}

最后是formatTime()函数：

formatTime(seconds) {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return [h, m > 9 ? m : h ? '0' + m : m || '0', s > 9 ? s : '0' + s]
        .filter(a => a)
        .join(':')
}

这样，一旦加载音频src数据，就会显示h:mm:ss格式的持续时间。甜蜜。

Answer 8

要获得阅读的结尾，必须将'loop = false'与事件'onended'一起使用。如果loop = true，onended无效；）

要制作播放列表，必须设置loop = false才能使用“ onended”事件来播放下一首歌曲。

对于持续时间，如果脚本正确完成，则可以在任何地方恢复持续时间。如果“ duration”的值为NaN，则浏览器找不到该文件。如果值为“ Infinity”，“ INF”，则表示是流式传输，在这种情况下，与读取时间“ currentime”相比增加了100万。对于*即废话。当前时间可能大于持续时间，在这种情况下，您可以： var duration =（this.currentime> this.duration）？ this.currenttime：this.duration;

那是（O_°）

Answer 9

最好使用这样的事件...

ObjectAudio.onprogress  =function(){
    if(this.buffered.length){
    var itimeend = (this.buffered.length>1)? this.buffered.end(this.buffered.length-1):this.buffered.end(0);
    ....
        Your code here.......
    }
}

Answer 10

只需使用audioElement.duration

即可

如何获得html5音频持续时间

10 个答案: