0

赶上这个事件有一些麻烦。有：

<div id="click_me"></div>    
<audio class="fo_audio">
       <source src="track1.mp3" type="audio/mpeg; codecs='mp3'">
    </audio>
    <audio class="fo_audio">
       <source src="track2.mp3" type="audio/mpeg; codecs='mp3'">
    </audio>
    <audio class="fo_audio">
       <source src="track3t.mp3" type="audio/mpeg; codecs='mp3'">
    </audio>

并尝试做某事：

song_number = 0;
$("#click_me").click(function(){
$("audio").get(song_number).play()
    });     
$("audio").get(song_number).ended(function(){
    song_number++;
    $("audio").get(song_number).play();
    });

如何做到这一点？

4

4 回答 4

2

Your code is only assigning an ended() handler to the first audio clip. Try this:

var count = $("audio").size();
$("audio").each(function (song_number) {
  if (song_number < count-1) {
    this.ended(function () {
      $("audio")[song_number+1].play();
    });
  }
});

This is untested. It loops over each audio clip, and attaches an ended() event that will start playing the next clip. The last clip does not get an event handler.

于 2012-10-29T21:09:36.930 回答
0

答案是：

var count = $("audio").length;
$("audio").each(function (song_number) {
  if (song_number < count-1) {
    this.addEventListener("ended", function () {
      $("audio")[song_number+1].play();
    });
  }
});
于 2012-11-01T07:52:26.867 回答
0

在玩了一会儿之后，我最终得到了这个：

HTML：

<audio class="fo_audio" controls="controls">
   <source src="http://cache.gizmodo.com/assets/resources/mp3/Woman64.mp3" type="audio/mpeg" />
   <source src="http://cache.gizmodo.com/assets/resources/mp3/WomanWAV.wav" type="audio/wav" />
</audio>
<audio class="fo_audio" controls="controls">
   <source src="http://cache.gizmodo.com/assets/resources/mp3/FeelGood64.mp3" type="audio/mpeg" />
   <source src="http://cache.gizmodo.com/assets/resources/mp3/FeelGoodWAV.wav" type="audio/wav" />
</audio>
<audio class="fo_audio" controls="controls">
   <source src="http://cache.gizmodo.com/assets/resources/mp3/Carmen64.mp3" type="audio/mpeg" />
   <source src="http://cache.gizmodo.com/assets/resources/mp3/CarmenWAV.wav" type="audio/wav" />
</audio>
<div>
<button class="play" data-which="0">Play 0</button>
<button class="play" data-which="1">Play 1</button>
<button class="play" data-which="2">Play 2</button>
<button class="play" data-which="all">Play all</button>
</div>

Javascript：

var playing = false;
function playCascade(e) {
    if(playing) { return; }
    var song_number = e.song_number || 0;
    var $a = $("audio").eq(song_number);
    if($a.length) {
        $a.get(0).play();
        $a.off('ended').on('ended', function(){
            playing = false;
            if(e.continu) {
                playCascade($.extend(e, {
                    'song_number': song_number + 1
                }));
            }
        });
        playing = true;
    }
    else {
        playing = false;
    }
}
$(".play").on('click', function(e) {
    var which = $(this).data('which');
    playCascade($.extend(e, {
        'song_number': Number($(this).data('which')) || 0,
        'continu': which == 'all'
    }));
});

演示

笔记：

  • 播放序列是通过递归实现的。
  • 扩展事件对象e以传递自定义数据。
  • 每次播放时都会将一个新的“结束”处理程序附加到音频对象。
  • 'continue' 是 javascript 保留字，因此最好避免使用。因此“继续”。
  • 该演示有一个额外的行，它只播放每个剪辑的最后 5 秒。
  • 要隐藏音频元素，controls="controls"请从<audio>标签中删除。
  • 在 Opera 12.02 中测试。

这是代码的变体：http: //jsfiddle.net/bbPCk/3/

于 2012-10-29T23:47:19.057 回答
0

我还认为“结束”的事件效果不佳。这是不使用 removeEventListener 的边缘效应（考虑到我的上下文）。因此，请注意：如果您删除了 AudioElement，请不要忘记删除相关的已安装事件处理程序。

于 2017-05-23T17:46:04.307 回答