Question

我正在尝试构建一个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中测试过。

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

HTML5音频播放列表

0 个答案: