javascript - 播放其他音频时如何更改暂停按钮

Question

我用 audioplayer.js 创建了一个简单的音频播放器

我想将暂停按钮更改为在切换到另一首轨道时播放。我能够在播放另一首轨道时暂停上一首轨道，但我无法将上一首轨道按钮更改为播放按钮。页面中我有10多个玩家

 $('audio').each(function () {
    var myAudio = this;
    this.addEventListener('play', function () {
        $('audio').each(function () {
            if (!(this === myAudio)) {
                this.pause();
            }
        });
    });
 });

Answer 1

我明白其他玩家应该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 问题的好主题!
它实际上什么都不做。
我会尝试类似的策略:
即:模拟点击已经与工作功能链接的其他元素。
尝试一些东西，如果遇到问题，返回相关代码。


额外建议:您肯定遇到了“音频文件重量”问题。
您必须寻找音频压缩。