<audio><source> 使用 JQuery 操作 HTML5 / 属性

Question

我试图用HTML5音频标签构建一个简单的音频播放器。 我在主<audio>元素中嵌套了 3 个<source>元素，每个元素都指向具有多种格式的音轨，以实现跨浏览器支持。 我正在使用一个简单的按钮来触发带有以下代码的"单击"事件：

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

正如您可能猜到的那样，我正在尝试通过应用:gt(2)过滤器来更改属性src第三个元素。 我不仅试图增加曲目，还试图阻止当前曲目播放，以便在按下按钮时可以立即开始播放新曲目。 到目前为止，这对我的网页没有任何影响。

Answer 1

如果我

是你，我不会担心更改原始标签，而只是为demo2使用第二个音频。例如：

<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>

如果你有很多这样的声音，你可能想在javascript中根据需要生成元素。
此代码应根据您的需求进行调整 - 如果您要有 2 个以上的演示声音，您应该调整代码以生成适当的 ID。

var demo1 = $('#demo1').get();
var demo2 = $('#demo2').get();
//demo2
demo1.play();
// Change track!
$("#mute").on("click", function(evt) {
    demo1.pause();
    demo2.play();
});

如果你想按照你最初的方式去做，那么这段代码应该可以完成我认为的技巧：

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

Answer 2

我已经玩了一下代码，并设法跳到下一段音频。 起初这不起作用，但是一旦我将: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();

这些代码行之间是否存在根本区别，因为我认为它们会做同样的事情？ 我肯定知道第二行返回一个数组。

另外，是否有一种方法可以调用来重置/刷新正在播放的当前音轨？