停止/暂停音频时另一个音频文件时使用jQuery点击 [英] Stopping/Pausing audio when another audio file is clicking using jQuery

问题描述

我已经创建了我所拍摄的人图像缩略图的网站。当访问者点击了全景影像使用jQuery显示缩略图之一，和音频播放的介绍。我对每个缩略图/图像组合不同的音频介绍 - 15日在present更多的日常被添加

I have created a site with image thumbnails of people I have photographed. When a visitor clicks on one of the thumbnails the full image is revealed using jQuery, and an audio introduction plays. I have a different audio introduction for each thumbnail/image combination - 15 at present with more being added daily.

我想确保，如果访问者点击了previous音频文件完成之前另一个缩略图，即previous音频文件停止/暂停，让要播放的新的音频文件 - 从而确保两个或两个以上的轨道不同时播放。

I would like to ensure that if a visitor clicks on another thumbnail before the previous audio file has completed, that the previous audio file is stopped/paused to allow the new audio file to be played - thereby ensuring two or more tracks do not play simultaneously.

我目前使用code的片断，包裹在一个匿名函数，单独播放每个音频文件被点击相应的缩略图时 - 所以这个片段被复制的每个音频文件，但不知道如何确保他们不会在彼此玩。

I am currently using the following snippet of code, wrapped in an anonymous function, to play each audio file individually when the appropriate thumbnail is clicked - so this snippet is duplicated for each audio file, but don't know how to ensure they do not play over one another.

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

任何帮助你能给我会很感激，因为我刚开始学习jQuery，并没有足够的知识拿出一个可行的方案。

Any help you could give me would be very grateful, as I am just starting to learn jQuery, and don't have the knowledge to come up with a workable solution.

在此先感谢您的帮助！

推荐答案

在。音频类添加到您的所有音频元素和遍历所有的人都当音频点击。

Add a .audio class to all your audio elements and loop through all of them when an audio is clicked.

$(".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();
    }
});

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

If that seems too heavy for you then simply add the audio element in a global variable such as:

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 将从开始
  再次开始，而不是在它暂停的位置？和
  在那里的检查状态'全球'的任何方式，然后添加code代表
  每个单独的音频文件 - 只是为了保持code量和
  复制下来？再次感谢！！ -

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!! –

是的。 播放音频并重新启动它的onclick 详细解释了如何做到这一点。最终的结果会是这个样子：

Yes. Play audio and restart it onclick explains in detail how to do this. The final result would look something like this:

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

您不能真正优化code等等。你将有充分的音频元素上应用的单击事件。你将不得不保持当前播放的音频元素记住这样你就不会在所有的音频文件必须循环。

You can't really optimize the code much more. You're going to have apply the click event on every audio element. You're going to have to keep the current playing audio element memorized so you don't have to loop through all the audio files.

如果你真的想借此进一步您可以创建一个库来处理一切。下面是一个例子：

If you really want to take this further you could create a library to handle everything. Here is an example:

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

这篇关于停止/暂停音频时另一个音频文件时使用jQuery点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！