html音频标签,持续时间总是无穷大

Question

我一直在努力使用html音频标签来播放一些音频文件.音频播放正常,但音频标签的持续时间属性始终返回无穷大.

我尝试了这个问题的接受答案,但结果相同.使用Chrome,IE和Firefox进行测试.

这是音频标签的错误,还是我错过了什么.

我用来播放音频文件的一些代码.

按下播放按钮时的javascript功能

function playPlayerV2(src) {
document.getElementById("audioplayerV2").addEventListener("loadedmetadata", function      (_event) {
console.log(player.duration);
});
var player = document.getElementById("audioplayer");

    player.src = "source";
    player.load();
    player.play();
}

html中的audio标签

<audio controls="true" id="audioplayerV2" style="display: none;" preload="auto">

注意:我正在隐藏标准音频播放器,打算使用自定义布局并通过javascript使用播放器,这似乎与我的问题无关.

Answer 1

尝试这个

var getDuration = function (url, next) {
    var _player = new Audio(url);
    _player.addEventListener("durationchange", function (e) {
        if (this.duration!=Infinity) {
           var duration = this.duration
           _player.remove();
           next(duration);
        };
    }, false);      
    _player.load();
    _player.currentTime = 24*60*60; //fake big time
    _player.volume = 0;
    _player.play();
    //waiting...
};

getDuration ('/path/to/audio/file', function (duration) {
    console.log(duration);
});

Answer 2

这对我有用

const audio = document.getElementById("audioplayer");

audio.addEventListener('loadedmetadata', () => {
  if (audio.duration === Infinity || isNaN(Number(audio.duration))) {
    audio.currentTime = 1e101
    audio.addEventListener('timeupdate', getDuration)
  }
})

function getDuration(event) {
  event.target.currentTime = 0
  event.target.removeEventListener('timeupdate', getDuration)
  console.log(event.target.duration)
}

Answer 3

我认为这是由于chrome bug 造成的。直到它被修复：

while(video.duration === Infinity) {
  await new Promise(r => setTimeout(r, 1000));
  video.currentTime = 10000000*Math.random();
}
let duration = video.duration;