当另一个音频文件正在使用jQuery点击时停止/暂停音频

Question

我创建了一个网站，其中包含我拍摄的人员的图像缩略图。当访问者点击其中一个缩略图时，使用jQuery显示完整图像，并播放音频介绍。对于每个缩略图/图像组合，我有不同的音频介绍 - 目前有15个，每天增加更多。

我想确保如果访问者在前一个音频文件完成之前点击另一个缩略图，那么先前的音频文件将被停止/暂停以允许播放新的音频文件 - 从而确保两个或多个音轨不要同时玩。

我正在使用下面的代码片段，包装在一个匿名函数，以单独播放每个音频文件，当适当的缩略图被点击 - 所以这个片段重复每个音频文件，但不知道如何确保他们不会互相玩耍。

$(".bridget-strevens").click(function(){ 
    var audio = $('#bridget-strevens-intro')[0]; 
    if (audio.paused){ 
    audio.play(); 
    } else { 
    audio.pause(); 
    } 
}); 

任何帮助，您可以给我将非常感激，因为我刚开始学习jQuery和不具备的知识拿出一个可行的方案。

在此先感谢您的帮助！

Answer 1

为所有音频元素添加.audio类，并在单击音频时循环播放所有音频元素。

$(".bridget-strevens").click(function() { 
    $('.audio').each(function (index, value) { 
     if (!value.paused) { 
      value.pause(); 
     } 
    }); 
    var audio = $('#bridget-strevens-intro')[0]; 
    if (audio.paused) { 
     audio.play(); 
    } else { 
     audio.pause(); 
    } 
}); 

如果这似乎太重了，你再简单地在一个全局变量添加音频元素如：

var currentAudio; 

点击一个新的音频然后当，只是暂停的那一个，打新并使用当前正在播放的新元素更新currentAudio变量。

var currentAudio = null; 
$(".bridget-strevens").click(function() { 
    if(currentAudio != null && !currentAudio.paused){ 
     currentAudio.pause(); 
    } 
    var audio = $('#bridget-strevens-intro')[0]; 
    if (audio.paused) { 
     audio.play(); 
     currentAudio = audio; 
    } else { 
     audio.pause(); 
    } 
}); 

更新：

感谢您的迅速回应！ Grimbode，我试过你的建议，这似乎是有效的。但是有没有停止 和重置，而不仅仅是暂停的能力 - 所以，如果他们点击1然后按[2] 1之前完成，然后再次单击1，即1将从 开始再次开始，而不是在该点它已暂停？ 是否有任何方式检查'全局'状态，然后为每个单独的音频文件添加代码 - 只是为了保持代码量和 重复？再次感谢！！ -

是的。 Play audio and restart it onclick详细解释了如何做到这一点。最终结果如下所示：

var currentAudio = null; 
$(".bridget-strevens").click(function() { 
    if(currentAudio != null && !currentAudio.paused && currentAudio != this){ 
     currentAudio.pause(); 
     //Here we reset the audio and put it back to 0. 
     currentAudio.currentTime = 0; 
    } 
    var audio = $('#bridget-strevens-intro')[0]; 
    if (audio.paused) { 
     audio.play(); 
     currentAudio = audio; 
    } else { 
     audio.pause(); 
    } 
}); 

您无法真正优化代码。您将在每个音频元素上应用点击事件。您将不得不保留当前播放的音频元素，以便不必循环播放所有音频文件。

如果你真的想进一步，你可以创建一个库来处理所有事情。这里有一个例子：

(function(){ 
    var _ = function(o){ 
    if(!(this instanceof _)){ 
     return new _(o); 
    } 
    if(typeof o === 'undefined'){ 
     o = {}; 
    } 

    //here you set attributes 
    this.targets = o.targets || {}; 
    this.current = o.current || null; 

    }; 

    //create fn shortcut 
    _.fn = _.prototype = { 
    init: function(){} 
    } 

    //Here you create your methods 
    _.fn.load = function(){ 
    //here you load all the files in your this.targets.. meaning you load the source 
    //OR you add the click events on them. 

    //returning this for chainability 
    return this 
    }; 

    //exporting 
    window._ = _; 
})(); 

//here is how you use it 
_({ 
targets: $('.audio') 
}).load();