0

首先我想我会告诉你我到目前为止....

http://jsfiddle.net/fDRnY/

我的 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对象的正确轨道上......任何帮助将不胜感激，就像我说的我是新手。任何详细的解释将不胜感激。

谢谢！

4

1 回答 1

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

于 2013-06-29T18:45:49.757 回答