如何在 Safari 中获取音频文件的持续时间？答案

【问题标题】：How to get audio file duration in Safari?如何在 Safari 中获取音频文件的持续时间？
【发布时间】：2015-12-15 10:21:08
【问题描述】：

我注意到 Safari 在获取音频文件的持续时间方面有点难以预测。我编写了以下代码来获取和存储 MP3 文件的持续时间：

  // Get duration and store it in the DB
  let audio = document.createElement('audio');

  audio.addEventListener('loadedmetadata', function ({target}) {
    audio.pause();
    audio.currentTime = 0;
    audio.volume = 1;

    Meteor.call('util/setTrackDuration', track._id, target.duration);
  });
  audio.src = track.getTrackUrl();

  // This stuff is because of Safari.. psh!
  audio.volume = 0;
  audio.play();

您可以看到我必须添加一些代码，因为在 Safari 中仅将 audio.src 设置为 URL 并不总是足够的，尽管它在 Firefox 和 Chrome 中运行良好并且每次都会触发 loadedmetadata 事件。在 Safari 中，由于某种原因，它只工作了大约一半的时间。

audio.src 设置为 URL 后，是否有原因无法在 Safari 中可靠地触发 loadedmetadata？不得不调用audio.play() 只是为了获取音频文件的持续时间（我使用的是 Amazon S3）真的很浪费带宽。这是一个错误吗？还有更好的方法吗？

【问题讨论】：

标签： javascript safari html5-audio

【解决方案1】：

您可能需要在显式使用 load() 更改源后重新加载。见http://www.w3schools.com/tags/av_met_load.asp:

load() 方法用于更新音频/视频元素后更改来源或其他设置。

我想你可能想试一试。

audio.src = track.getTrackUrl();
audio.load();

总的来说，根据我的经验，这个 html5 音频元素有点问题。如果您不介意一些额外的 javascript，请暂时尝试使用 JPlayer 之类的 jQuery 播放器，并在所有浏览器中正确实现时使用 html5 音频。

至于这种行为的原因：设置 src 可能会使浏览器开始异步加载文件。加载未完成时调用 play() ，加载的元数据侦听器似乎被 sasfari 跳过，而是调用了 canplay 事件。您可以通过使用Audio.preload = 'metadata' 然后调用load() 来解决此问题。

【讨论】：