Question

我正在尝试编写自己的HTML5音频播放器：您可以查看它here。

它可以在IE9，FF，Chrome中正常工作但在Safari中出于某种原因，即使我已经听过

audio.addEventListener("loadedmetadata", tryThis, false);

在播放前显示NaN 持续时间数据。

audio.setAttribute("src", a[trackNo][1]);
audio.load();
audio.addEventListener("loadedmetadata", tryThis, false);

function tryThis()
{
    this.addEventListener("timeupdate", function() { document.getElementById(radioPointer.toString()).innerHTML = formatTime(this.duration, this.currentTime);}, false);

    this.addEventListener("ended", function () { document.getElementById(radioPointer.toString()).innerHTML = formatTime(this.duration, 0); document.rootsPlaylist.roots[radioPointer].checked = false; }, false);

    this.play();    
}

<audio id="rootsPlayer" style="display:none;"></audio>

你能提供任何帮助吗？

非常感谢。

注意：你必须经常在歌曲之间翻看，看看我的意思，对不起，我忘了提这个。

Answer 1

原因是duration属性仅在发出durationchange事件后初始化。因此，您可以使用isNan()函数或一些虚拟durationInitialized变量：

var durationInitialized = 0;
audio.setAttribute("src", a[trackNo][1]);
audio.load();
audio.addEventListener("loadedmetadata", tryThis, false);
audio.addEventListener("durationchange", function() {durationInitialized = 1;}, false);
function tryThis() {
 this.addEventListener("timeupdate", function() {
  var time = '';
  if (durationInitialized) time = formatTime(this.duration, this.currentTime);
  else time = formatTime(this.currentTime);
  document.getElementById(radioPointer.toString()).innerHTML = time;
 }, false);

 this.addEventListener("ended", function () {
  var time = '';
  if (durationInitialized) time = formatTime(this.duration, 0);
  else time = formatTime(0);
  document.getElementById(radioPointer.toString()).innerHTML = time;  
  document.rootsPlaylist.roots[radioPointer].checked = false; 
 }, false);

 this.play();    
}

HTML5音频Safari问题

1 个答案: