MP3 的 HTML5 持续时间有时有效

Question

我在 HTML5 音频播放器中显示 MP3 文件的持续时间时遇到问题。有时它会加载持续时间，有时它不会。

它不加载的时间是我对 CSS 进行更改和刷新页面的时候。

当我更改 MP3 文件以加载另一个 MP3 文件时，会显示持续时间。当我刷新页面时它就消失了。

这是持续时间的代码：

audio.addEventListener('loadedmetadata', function(){
  progress.setAttribute('max', Math.floor(audio.duration));
  duration.textContent  = toHHMMSS(audio.duration);
});

我是 JavaScript 新手，所以我不知道如何编码。我正在使用来自https://codepen.io/davatron5000/pen/uqktG 的代码，当您刷新页面时，mp3 文件的持续时间消失。

Answer 1

这可能是因为缓存。

如果您在标记 (html) 中设置音频的 src，则在附加事件侦听器时可能已经加载了媒体的缓存版本*。

因此您的事件处理程序永远不会触发：

window.onload = function(){ // kinda force the situation

  aud.onloadedmetadata = function(e){  // this won't fire
    console.log('metatadata loaded');
    };
  };

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud"/>

但在这种情况下，您已经可以访问它的duration。
所以你只需要检查它的持续时间：

window.onload = function() {
  if (aud.duration) {
    doSomething();
  } else {
    aud.onloadedmetadata = doSomething;
  }
}

function doSomething(event) {
  console.log(aud.duration);
  console.log('from event handler :', !!event);
}

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud" />

或者你可以在js中重新设置你的媒体src。

window.onload = function() {
  aud.onloadedmetadata = function doSomething(event) {
    console.log(aud.duration);
  }

  aud.src = aud.src; // forces the event to fire again
}

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud" />

*UAs 对此有不同的行为，例如，FF 将存储所有加载事件，直到所有内联脚本都被解析。 Safari 有时 Chrome 会尽快启动它。