当另一个音频文件正在使用jQuery点击时停止/暂停音频
我创建了一个网站,其中包含我拍摄的人员的图像缩略图。当访问者点击其中一个缩略图时,使用jQuery显示完整图像,并播放音频介绍。对于每个缩略图/图像组合,我有不同的音频介绍 - 目前有15个,每天增加更多。当另一个音频文件正在使用jQuery点击时停止/暂停音频
我想确保如果访问者在前一个音频文件完成之前点击另一个缩略图,那么先前的音频文件将被停止/暂停以允许播放新的音频文件 - 从而确保两个或多个音轨不要同时玩。
我正在使用下面的代码片段,包装在一个匿名函数,以单独播放每个音频文件,当适当的缩略图被点击 - 所以这个片段重复每个音频文件,但不知道如何确保他们不会互相玩耍。
$(".bridget-strevens").click(function(){
var audio = $('#bridget-strevens-intro')[0];
if (audio.paused){
audio.play();
} else {
audio.pause();
}
});
任何帮助,您可以给我将非常感激,因为我刚开始学习jQuery和不具备的知识拿出一个可行的方案。
在此先感谢您的帮助!
为所有音频元素添加.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();
感谢您的及时响应! Grimbode,我试过你的建议,而且这似乎工作。然而,是否有停止和重置的能力,而不是仅仅停顿 - 所以如果他们在[1]完成之前点击[1]然后[2],然后再次点击[1],那么[1]会从头再次开始而不是暂停点?是否有任何方法检查“全局”状态,然后为每个单独的音频文件添加代码 - 只是为了保持代码量和重复性?再次感谢!! –
@OpenEyeMedia支票更新 – rottenoats
谢谢@Grimbode - 我真的很感谢你对此的帮助。这是按需要工作的。我肯定会探索创建一个图书馆,因为我打算在未来进行类似的项目。保重 –
[?HTML5音频播放器 - jQuery的切换点击PLAY/PAUSE]的可能的复制(http://*.com/questions/2988050/html5-audio-player-jquery-toggle-点击播放暂停) –
也许'audio.currentTime'对你很有趣?像'if(audio.currentTime> 0){/ *开始一个新的音频* /}' –