Question

创建了一个简单的音频播放器

当我切换到另一首曲目时，我想更改暂停按钮。我能够在播放其他曲目时让前一曲目暂停，我只是无法将之前的曲目按钮更改为播放按钮。在页面中我有超过10个玩家

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

Answer 1

据我所知，任何其他玩家在点击任何播放按钮时都应pause。

工作Fiddle here

<强> -----
EDITED
- 为清晰起见删除了之前的内容 -

将此</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问题，这是一个很好的主题！
它实际上没有没有我会尝试类似的策略：
即：模拟已经与工作功能相关联的其他元素的点击如果遇到问题，请尝试一些相关代码

奖金建议：你肯定有“音频文件重量”问题你必须寻找音频压缩。

Answer 2

从pages you linked开始，看起来没有图像。一切都是用CSS完成的。考虑到这一点，将音频播放器的类更改为

<div class="audioplayer audioplayer-stopped">

在Javascript中，可以按照以下方式完成：

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

当我播放其他音频时，如何更改暂停按钮

2 个答案: