Question

首先，我想我会告诉你到目前为止我所拥有的......

我的html结构中有多个<audio>标记。我使用标准技术播放<a>标签

的文件

$('.play').on('click',function(e){
e.preventDefault();

var song = $(this).next('audio').get(0);

    if(song.paused){
        song.play();

    }else {
        song.pause();    
    }
});

接下来我编写了一个简单的函数，在当前正在播放的曲目结束时播放以下曲目...

$('audio').on('ended',function(e){
e.preventDefault();
var $next = $(this).nextAll().eq(1).get(0);

        if($next.paused){
            $next.play();
        }
});

然后还有一些用于可视UI的功能，为当前正在播放的曲目添加高亮课程......

$('audio').on('playing',function(){
    $(this).prev().addClass('highlight')
});

$('audio').on('ended',function(){
    $(this).prev().removeClass('highlight')
});

 $('audio').on('pause',function(){ 
    $(this).prev().removeClass('highlight') 
 });

现在我的问题：如果您点击多个曲目，他们将同时播放。我希望当你点击另一个时正在播放的任何曲目暂停。

我发现在Stack上有类似关注的类似帖子，我发现这个函数循环遍历所有audio个对象并暂停它们......

var allAudioEls = $('audio');

function pauseAllAudio() {
   allAudioEls.each(function() {
      var a = $(this).get(0);
      a.pause();
   });
}

如果我这样调用这个函数（在下面第3行）......

$('.play').on('click',function(e){
e.preventDefault();
pauseAllAudio();        
var song = $(this).next('audio').get(0);

    if(song.paused){
        song.play();

    }else {
        song.pause();    
    }
});

它几乎可以正常工作，它会暂停正在播放的其他曲目并播放最近点击的曲目，但现在您无法暂停当前正在播放的曲目。我希望这是有道理的。我很确定它是一种流动问题，但我是一个初学者...也许我需要这是一项全新的技术。我认为我在循环通过audio对象的正确轨道上......任何帮助都会受到赞赏，就像我说我是新手一样。任何详细的解释都会更受欢迎。

谢谢！

Answer 1

在pauseAllAudio函数中添加一个排除特定元素的参数：

function pauseAllAudio(exclude) {
    allAudioEls.each(function() {
        var a = $(this).get(0);
        if(a !== exclude) {
            a.pause();
        }
    }
}

然后将song传递给pauseAllAudio：

var song = $(this).next('audio').get(0);
pauseAllAudio(song);

如果您不需要在此代码块中播放歌曲，只需在支票下方移动pauseAllAudio()来电即可。但是，这样做会使其无法播放的时间超过从song.play()到pauseAllAudio()

所需的极短时间

多个HTML5音频行为：请一次一个音轨

1 个答案: