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