javascript - 使用 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();
    }
});

更新:

Thanks for the prompt responses! Grimbode, I've tried what you suggest, and that seems to work. However is there the ability to stop and reset rather than just pause - so if they clicked on 1 then [2] before 1 finished, then clicked 1 again, that 1 would start from the beginning again rather than the point at which it was paused? And is there any way of check the state 'globally', and then add code for each individual audio file - just to keep the amount of code and duplication down? Thanks again!! –

是的。 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();