我用 audioplayer.js 创建了一个简单的音频播放器
我想将暂停按钮更改为在切换到另一首轨道时播放。我能够在播放另一首轨道时暂停上一首轨道,但我无法将上一首轨道按钮更改为播放按钮。页面中我有10多个玩家
$('audio').each(function () {
var myAudio = this;
this.addEventListener('play', function () {
$('audio').each(function () {
if (!(this === myAudio)) {
this.pause();
}
});
});
});
最佳答案
我明白其他玩家应该pause
单击任何播放按钮时。
工作 Fiddle here
-----
已编辑
--为清楚起见,删除了之前的--
将其放在 </html>
的正上方在你的页面...不在你的/libs/audioplayer/audioplayer.js脚本。
<script>
$('audio').bind('play', function (event) {
pauseAllbut($(this).attr("id")); // Attributes the function pauseAllbut() to all audio elements "onplay".
});
$.each($("audio"),function(i,val){
$(this).attr({"id":"audio"+i}); // Adds unique a id to all audio elements automatically... Needed for pauseAllbut().
});
// Function to pause each audios except the one wich was clicked
function pauseAllbut(playTargetId){
$.each($("audio"),function(i,val){
ThisEachId = $(this).attr("id");
if(ThisEachId != playTargetId){
$("audio")[i].pause(); // Pause all audio tags IF NOT the one from which PLAY button was clicked.
}
});
}
</script>
</html> <!-- This is YOUR already existing page end tag -->
删除整个$('audio').each(function () {
来自 audioplayer.js
(第 198 至 211 行)。
;)
-----
编辑
(改进了暂停所有其他音频的策略,因为您使用的是自定义按钮)
// Function to pause each audios except the one which was clicked
function pauseAllbut(playTargetId){
//alert(playTargetId);
$.each($("audio"),function(i,val){
ThisEachId = $(this).attr("id");
if(ThisEachId != playTargetId){
//$("audio")[i].pause(); // Good way to pause, but has no effect on your custom buttons.
// See the other strategy below.
// «USING» your `audioplayer.js` functions by simulating a click on each pause button IF NOT the one clicked by user
$(".audioplayer-playpause").each(function(){
if($(this).prev().attr("id") != playTargetId){ // Check if previous element (audio tag) IS NOT the target
ButtonState = $(this).find( 'a' ).html();
if(ButtonState == "Pause"){ // If button state is pause (meaning user could pause it), click it. Does ALL the job.
$(this).find( 'a' ).click();
}
}
});
}
});
}
我cloned your site为了解决这个问题。
请注意,我使用了不同的音频来确定正在播放的内容。
仅使用一个 .mp3 来测试多音频功能变得更加困难。
如果需要,您可以下载我的 .mp3 文件。
;)
另外,我自愿禁用了隐藏控件。
这也是为了看到对其他播放/暂停图标的影响。
// accordion
var next = jQuery('.my_music').find('.accordion-toggle');
next.click(function(){
jQuery(this).next().slideToggle('fast');
// TEMP DISABLE OF ACCORDION HIDING
//jQuery(".accordion-content").not(jQuery(this).next()).slideUp('fast');
});
您的问题是经过深思熟虑的!
我现在认为它回答得很好。
;)
现在,为您的上一个/下一个按钮 (在评论中询问)
这是一个新的 StackOverflow 问题的好主题!
它实际上什么都不做。
我会尝试类似的策略:
即:模拟点击已经与工作功能链接的其他元素。
尝试一些东西,如果遇到问题,返回相关代码。
额外建议:您肯定遇到了“音频文件重量”问题。
您必须寻找音频压缩。
关于javascript - 播放其他音频时如何更改暂停按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37574273/