2

我正在尝试构建一个 HTML5 音频播放器，我的主要问题是滚动曲目。我已经构建了一个 JSON 文件，其中包含我的曲目以及标题和其他信息。这是html代码。

<audio>
   <source src="" id="oggSource" type="audio/ogg" />
   <source src="" id="mp3Source" type="audio/mpeg" />
   Your browser does not support the audio element.
</audio>
<br/>

<input type="button" value="<<" onclick="">
<input type="button" value="Play" onclick="playPause()">
<input type="button" value=">>" onclick="playNextSongOnClick()"><br/>
<input type="button" value="Duration" onclick="duration()"><input type="button" value="currentTime" onclick="currentTime()"><br/>

这是我的 javascript

function initiate_AudioPlayer(){
  var song = 0;
  $("#oggSource").attr("src","audio/"+playlist.songs[song].source+".ogg");
  $("#mp3Source").attr("src","audio/"+playlist.songs[song].source+".mp3");  
}

function playPause() {
  var audio = document.getElementsByTagName('audio')[0];
  if (audio.paused){audio.play();}
  else {audio.pause();}
}

function playNextSongOnClick(){
  var audio = document.getElementsByTagName('audio')[0];
  $("#oggSource").attr("src", "audio/song2.ogg");
  $("#mp3Source").attr("src", "audio/song2.mp3");

  audio.pause();
  audio.load();
  audio.play();
}

function duration(){
  var audio = document.getElementsByTagName('audio')[0];
  alert (audio.duration);
}

function currentTime(){
  var audio = document.getElementsByTagName('audio')[0];
  alert (audio.currentTime);
}

$('document').ready(initiate_AudioPlayer);

在 Safari 中，当我按下播放时会播放音频，但之后不会播放另一首曲目。当我单击“持续时间”按钮时，会弹出“NaN”，所以我假设 Safari 没有加载文件。

在 Firefox 中，我遇到了相反的问题。第一首曲目返回“NaN”的持续时间，但是当我单击“播放下一首曲目”按钮时，会返回实际的持续时间值并播放曲目。

在 Chrome 中，一切都很棒！我没有在IE9中测试过。

我应该缓冲或卸载文件或类似的东西吗？任何帮助将不胜感激。

4

0 回答 0