當我播放其他音頻時，如何更改暫停按鈕

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 。

在這里工作小提琴

-----
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();
                    }
                }
            });
        }
    });
}    

我克隆了你的網站 ，以便解決這個問題。

請注意，我使用了不同的音頻來確定正在播放的內容。
要測試只有一個.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

從您鏈接的頁面 ，看起來沒有圖像。 一切都是用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";
            }
        });
    });
 });