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

Question

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

<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

2018解决方案:

当尚未加载音频元数据时,您将获得undefined或NaN(不是数字).因此,有些人建议使用onloadedmetadata以确保首先获取音频文件的元数据.此外,大多数人没有提到的是你必须[0]像这样定位音频DOM元素的第一个索引:

- 香草Javascript:

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

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

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 4

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

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

Answer 5

我一直在努力在 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()函数：

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

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

Answer 6

只需使用audioElement.duration