html - 如何获取 html5 音频的持续时间

Question

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

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

Answer 1

2020年解决方案：

当尚未加载音频元数据时，您将获得undefinedor （不是数字）。NaN因此有人建议使用onloadedmetadata确保首先获取音频文件的元数据。此外，大多数人没有提到的是，您必须[0]像这样定位音频 DOM 元素的第一个索引：

-- 原版 Javascript：

var audio = document.getElementById('audio-1');
audio.onloadedmetadata = function() {
  alert(audio.duration);
};

如果这不起作用，试试这个，但不是那么可靠并且依赖于用户连接：

setTimeout(function () {
    var audio = document.getElementById('audio-1');
    console.log("audio", audio.duration);
}, 100);

-- jQuery:

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

Answer 2

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

Answer 3

在上面的评论中，提到解决方案是将事件句柄绑定到事件加载的元数据。我就是这样做的——

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

Answer 4

我一直在努力在 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(':')
}

有了这个，h:mm:ss格式的持续时间将在音频 src 数据加载后立即显示。甜蜜。

Answer 5

我使用“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 6

只需使用audioElement.duration

Answer 7

为了获得阅读的结束，有必要在事件“onended”的情况下使用“loop = false”。如果 loop = true，onended 不起作用；）

要制作播放列表，您必须设置 loop = false 以使用 'onended' 事件来播放下一首歌曲。

如果您的脚本正确完成，您可以在任何地方恢复持续时间。如果 'duration' 的值为 NaN，则浏览器找不到该文件。如果值为'Infinity' 'INF' 它是一个流，在这种情况下，与读取时间'currentime'相比增加了1 mn。对于* IE，它是废话。当前时间可能大于持续时间，在这种情况下，您会这样做： var duration = (this.currentime> this.duration)? this.currenttime: this.duration;

那是（O_°）

Answer 8

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

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.......
    }
}