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

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

MP3的HTML5持续时间有时会起作用

1 个答案: