Chrome、Safari、Firefox、IE9+の各主要ブラウザで動作するHTML5オーディオプレイリストを作成しようとしています。ただし、クロスブラウザ互換の方法でソースを変更する方法がわかりません。
更新たとえば、<source>
タグの変更はsrc
Chromeでは機能しますが、Safariでは機能しません。以下の@eivers88のソリューションを使用すると機能しますが、タグのcanPlayType
を変更するだけの方が簡単に思えます。すぐ下のコードがChromeで機能するのにSafariでは機能しない理由を誰かに説明してもらえますか?<source>
src
JS:
var audioPlayer=document.getElementById('audioPlayer');
var mp4Source=$('source#mp4');
var oggSource=$('source#ogg');
$('button').click(function(){
audioPlayer.pause();
mp4Source.attr('src', 'newFile.mp4');
oggSource.attr('src', 'newFile.ogg');
audioPlayer.load();
audioPlayer.play();
});
HTML:
<button type="button">Next song</button>
<audio id="audioPlayer">
<source id="mp4" src="firstFile.mp4" type="audio/mp4"/>
<source id="ogg" src="firstFile.ogg" type="audio/ogg" />
</audio>
ボタンをクリックした後にHTMLを検査すると<source src=""/>
、Safariで変更が行われ、HTTPリクエストが行われないため、ファイルがload()
編集されたりplay()
編集されたりすることはありません。誰かがこれについて何か考えを持っていますか?