HTML5 MP3 的持续时间有时有效

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

这可能是因为缓存。

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

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

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" />

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

HTML5 MP3 的持续时间有时有效

HTML5 duration time of MP3 sometimes works

html

javascript

html5-audio