0

我试图用 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属性。:gt(2)我不仅试图增加曲目，还试图停止播放当前曲目，以便在按下按钮时新曲目可以立即开始播放。到目前为止，这对我的网页没有任何影响。

4

2 回答 2

1

If I were you I would not worry about changing the original tag, and instead just use a second audio for demo2. For example:

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

If you have a lot of these sounds you may want to generate the elements as necessary in javascript.
This code should be adapted for your needs - if you're going to have more than 2 demo sounds you should adapt the code to generate the appropriate ids.

var demo1 = $('#demo1').get();
var demo2 = $('#demo2').get();
//demo2
demo1.play();

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

If you want to do it the way you were originally going about it then this code should do the trick I think:

// 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();
});
于 2013-10-20T03:28:50.887 回答
0

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

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

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

于 2013-10-20T16:49:18.733 回答