jquery - HTML5 の操作/JQuery を使用した属性

Question

HTML5 オーディオ タグを使用してシンプルなオーディオ プレーヤーを構築しようとしています。<source>メイン要素内にネストされた3 つの要素が<audio>あり、それぞれがクロスブラウザー サポート用の複数の形式を持つオーディオ トラックを指しています。次のコードで「クリック」イベントをトリガーする単純なボタンを使用しています。

<audio id="myAudio" preload="none">
  <source src="audio/demo.m4a" type="audio/m4a" />
  <source src="audio/demo.mp3" type="audio/mp3" />
  <source src="audio/demo.ogg" type="audio/ogg" />
  <!-- other sources go here -->
</audio>

var audio = document.getElementById("myAudio");

// Change track!
$("#mute").on("click", function(evt) {
    $("#myAudio > source:gt(2)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    if(!audio.paused) {
        audio.pause();
        audio.play();
    }
});

ご想像のとおり、フィルターsrcを適用して 3 番目の要素の属性を変更しようとしています。:gt(2)トラックをインクリメントしようとしているだけでなく、ボタンを押すとすぐに新しいトラックの再生を開始できるように、現在のトラックの再生を停止しようとしています。これまでのところ、これは私のウェブページに影響を与えていません。