3

Chrome、Safari、Firefox、IE9+の各主要ブラウザで動作するHTML5オーディオプレイリストを作成しようとしています。ただし、クロスブラウザ互換の方法でソースを変更する方法がわかりません。

更新たとえば、<source>タグの変更はsrcChromeでは機能しますが、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()編集されたりすることはありません。誰かがこれについて何か考えを持っていますか？

4

2 に答える 2

5

これが実際の例です。お持ちのものとは少し異なりますが、参考になれば幸いです。

HTML:

<button type="button">Next song</button>

Javascript/jquery:

    var songs = [
    '1976', 'Ballad of Gloria Featherbottom', 'Black Powder' 
]
var track = 0;
var audioType = '.mp3'
var audioPlayer = document.createElement('audio');

$(window).load(function() {

    if(!!audioPlayer.canPlayType('audio/ogg') === true){
        audioType = '.ogg' //For firefox and others who do not support .mp3
    }

    audioPlayer.setAttribute('src', 'music/' + songs[track] + audioType);
    audioPlayer.setAttribute('controls', 'controls');
    audioPlayer.setAttribute('id', 'audioPlayer');
    $('body').append(audioPlayer);
    audioPlayer.load();
    audioPlayer.play();

});

$('button').on('click', function(){
    audioPlayer.pause();
    if(track < songs.length - 1){
        track++;
        audioPlayer.setAttribute('src', 'music/' + songs[track] + audioType);
        audioPlayer.load();
        audioPlayer.play();
    }
    else {
        track = 0;
        audioPlayer.setAttribute('src', 'music/' + songs[track] + audioType);
        audioPlayer.load();
        audioPlayer.play();
    }
})
于 2012-06-24T04:08:01.180 に答える
1

何らかの理由で、Safari では<source>タグを使用して曲を切り替えることができませんが、Chrome では使用できます。srcタグの属性に読み込まれるものを変更するだけ<audio>で、Chrome と Safari の両方で機能しますが、ogg と mp3 の問題があります。

この ogg と mp3 の問題を回避する 1 つの方法は、Modernizr の機能検出を使用して、Firefox で ogg mime-type を読み込み、Chrome/Safari で mp3 を読み込むことだと思います。これに関するリファレンスは次のとおりです: Detecting html5 audio support with Modernizr。

于 2012-06-24T05:20:17.223 に答える