How can I change my pause button when I play other audio

Question

I have created a simple audio player with audioplayer.js

I want to change the pause button to play when I'm switching to another track. I was able to get the previous track to pause when playing other one, I just can't change the previous track button to a play button. In the page I have more than 10 players

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

Answer 1

I understand that every other players should pause when any play button is clicked.

Working Fiddle here

-----
EDITED
--Removed previous for clarity--

Place this just above </html> in your page... Not in your /libs/audioplayer/audioplayer.js script.

<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 -->

Remove the whole $('audio').each(function () { from audioplayer.js (line 198 to 211).

;)

-----
EDIT
(Improved strategy to pause all other audios, since you're using custom buttons)

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

I cloned your site in order to work this out.

NOTICE that I used different audios to be sure of exactly what is playing.
To test a multiple audio function with only one .mp3 was making it a lot harder.
You may download my .mp3 files, if you wish.
;)
ALSO, I volunteerly disabled the controls hiding.
It was in order too see the effect on the other play/pause icons.

// 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');
});

Your question was a thought one!
I now consider it well answered.
;)

NOW, for your previous/next buttons (asked in comments)

This is a good topic for a new StackOverflow question!
It actually does nothing.
I would try a similar strategy:
i.e.: simulate clicks on other elements already linked with working functions.
Try something and come back with relevant code if encountering problems.


BONUS ADVICE: You definitly have a «audio file weigth» problem.
You'll have to look for audio compression.

Answer 2

From the pages you linked, it looks like there are no images. Everything is done with CSS. With this in mind, change the class of the audio player to

<div class="audioplayer audioplayer-stopped">

In Javascript, this can be done as follows:

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