使用 jQuery 单击另一个音频文件时停止/暂停音频
Posted
技术标签:
【中文标题】使用 jQuery 单击另一个音频文件时停止/暂停音频【英文标题】:Stopping/Pausing audio when another audio file is clicking using jQuery 【发布时间】:2015-05-04 12:24:35 【问题描述】:我创建了一个网站,其中包含我拍摄的人物的缩略图。当访问者单击其中一个缩略图时,将使用 jQuery 显示完整图像,并播放音频介绍。我对每个缩略图/图像组合都有不同的音频介绍 - 目前有 15 个,并且每天都会添加更多。
我想确保如果访问者在前一个音频文件完成之前点击另一个缩略图,则前一个音频文件会停止/暂停以允许播放新音频文件 - 从而确保两个或更多曲目不能同时播放。
我目前正在使用以下 sn-p 代码,包裹在一个匿名函数中,当单击相应的缩略图时单独播放每个音频文件 - 所以这个 sn-p 为每个音频文件复制,但不要知道如何确保他们不会互相竞争。
$(".bridget-strevens").click(function()
var audio = $('#bridget-strevens-intro')[0];
if (audio.paused)
audio.play();
else
audio.pause();
);
您能给我的任何帮助将不胜感激,因为我刚刚开始学习 jQuery,并且不具备提出可行解决方案的知识。
提前感谢您的帮助!
【问题讨论】:
html5 audio player - jquery toggle click play/pause?的可能重复 也许audio.currentTime
对你很感兴趣?喜欢if(audio.currentTime>0) /* There is started a new audio */
【参考方案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();
【讨论】:
感谢您的及时回复! Grimbode,我已经尝试了你的建议,这似乎有效。但是,是否有能力停止和重置,而不仅仅是暂停 - 所以如果他们在 [1] 完成之前单击 [1] 然后单击 [2],然后再次单击 [1],那么 [1] 将再次从头开始而不是比它暂停的点?有没有办法“全局”检查状态,然后为每个单独的音频文件添加代码 - 只是为了减少代码和重复的数量?再次感谢!! 感谢@Grimbode - 非常感谢您的帮助。这是按要求工作的。我一定会探索图书馆的创建,因为我打算在未来做类似的项目。保重 @OpenEyeMedia 没问题。不要忘记将此标记为正确答案。祝你好运。以上是关于使用 jQuery 单击另一个音频文件时停止/暂停音频的主要内容,如果未能解决你的问题,请参考以下文章
多个 HTML5 音频播放器。单击另一个音频实例时停止播放其他音频实例