使用JQuery操作HTML5/属性

我正在尝试用HTML5音频标签构建一个简单的音频播放器。我在主元素中嵌套了3个元素，每个元素都指向具有多种格式的音频曲目，以支持跨浏览器。我使用一个简单的按钮触发点击事件，代码如下：

<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();
    }
});

---

正如您可能猜到的，我试图通过应用：gt2过滤器来更改第三个元素src属性。我不仅试图增加音轨，还试图停止播放当前音轨，以便按下按钮时新音轨可以立即开始播放。到目前为止，这对我的网页没有任何影响。

如果我是你，我就不会担心更改原始标签，而是使用第二个音频进行演示2。例如：

<audio id="demo1" 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>
<audio id="demo2" preload="none">
  <source src="audio/demo2.m4a" type="audio/m4a" />
  <source src="audio/demo2.mp3" type="audio/mp3" />
  <source src="audio/demo2.ogg" type="audio/ogg" />
  <!-- other sources go here -->
</audio>

如果您想按照最初的方式进行，那么我认为这段代码应该做到：

// Change track!
$("#mute").on("click", function(evt) {
    audio.pause();
    //not sure if this line will work as intended if you have more than 3 sources...
    $(audio).find("source:gt(2)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    audio.load();
    audio.play();
});

---

我已经玩了一次代码，并设法跳到下一段音频。起初这不起作用，但当我将：gt过滤器改为1而不是2时，它成功地增加了轨迹。我尝试了两行不同的代码，这两行代码似乎都能工作，但正如您所提到的，我的下一个挑战是能够增加到第三、第四、第五、…、第n个轨道，然后可能跳回到以前的轨道。以下是我目前的工作代码：

// Change track!
$("#next").on("click", function(evt) {
    // Change the title of the track
    $("#title > p:last").text("Next Track!");
    // Pause current track
    audio.pause();
    // Load the next track and play it
    $(audio).find("source:gt(1)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    //$("#myAudio > source:gt(1)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    audio.load();
    audio.play();
});

我对下面第二行代码的不同有点困惑，因为它根本不播放任何音频：

// Get reference to the audio element
var audio = document.getElementById("myAudio");
//var audio = $('#myAudio').get();

这些代码行之间有没有根本的区别，因为我认为它们会做同样的事情？我确切地知道第二行返回一个数组

---

另外，是否有一种方法可以调用以重置/刷新当前播放的音频曲目？

确保在切换SourcesHanks后调用audio.load，我实际上没有想到要有多个音频标签。我的想法是，我将有两个以上的声音选择，然后希望我可以生成一些形式滑块，这样用户可以从1-10级每个声音，然后提交最终结果到服务器，然后返回给我。这是我挑战的下一个重要部分！我将玩一玩代码，并让您知道我是如何开始的。您是对的，看起来-我的印象是$ele.get返回$ele[0]，但显然它构造了一个节点列表！谢谢你指出这一点，通过重置/刷新一首曲目，你的意思是切换到一首你已经关闭的曲目吗？谢谢，现在没关系了，我只是想用一个按钮或其他东西来重置当前曲目播放的播放头，如果播放到一半，有人想将其重置回0:00。因为我所有的声音都最多20秒，所以没有必要。

// Get reference to the audio element
var audio = document.getElementById("myAudio");
//var audio = $('#myAudio').get();