Question

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

我尝试了this问题的接受答案，但结果相同。使用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 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

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

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

Answer 3

如果您控制服务器并可以使其发送正确的媒体标头-这有助于OP。

在移动版Chrome中获取文件时，我遇到了此问题。我无法控制Google云端硬盘的响应，因此不得不采取某种措施。

我还没有一个令我满意的解决方案，但是我从两个发布的答案中尝试了这个想法-基本上是相同的：使音频/视频对象寻找资源的真正目的。 Chrome找到实际的结束位置后-会提供持续时间。但是结果并不令人满意。

此黑客真正造成了什么-它迫使Chrome浏览器将资源完全加载。因此，如果资源太大或连接速度太慢，您将不得不等待很长时间才能在后台下载文件。而且您无法控制该文件-该文件由Chrome处理，并且一旦它决定不再需要该文件-它将处理该文件，因此带宽可能会被浪费掉。

因此，如果您可以自己加载文件-最好将其下载（例如，以blob格式）并将其提供给音频/视频控件。

Answer 4

如果这是Twilio mp3，请尝试.wav版本。 mp3以流的形式出现，它愚弄了音频播放器。

要使用.wav版本，只需将源URL的格式从.mp3更改为.wav（或将其保留，默认为wav）

请注意-wav文件大4倍，因此不利于切换。

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

4 个答案: