How to use a play and pause button for multiple audio on one page?

[SpecialistPanther]

Javascript:

<script>
/**
* jQuery document ready function (when the DOM is loaded)
* From here we can use $ to reference the jQuery object
*/ 
jQuery(document).ready(function($) {

    /**
    * Finds all elements that have _BOTH_ the .audio and .controls classes
    * then attaches a click handler to the .playpausebtn class
    */
    $('.audio.controls').on('click', '.playpausebtn', function(e) {

        /**
        * $(this) refers to the element that the event has fired on, in this case its the 
        * .playpausebtn that you clicked on (not any of the others)
        * 
        * $(this).parent() will target the parent element, then inside the parent element we want to 
        * find the `audio` element
        * 
        * Using the array key [0] should access the element directly, rather than the set of matched elements
        */ 

        audio = $(this).parent().find('audio')[0];

        if ( audio.paused ) {
            audio.play();
            $(this).css( 'background', 'url("Images/pause.png") no-repeat' );
        } else {
            audio.pause();
            $(this).css( 'background', 'url("Images/play.png") no-repeat' );
        }

    });

});
</script>

HTML:

<div class="controls">
        <audio class="audio" name="audio" src="Media/Beats/Catching waves/Catching Waves - [Prod. By Jordan Ace] - Preview Version.mp3"></audio>
        <button class="playpausebtn"></button>
        <button class="mutebtn"></button>
</div>


<div class="controls">
          <audio class="audio" name="audio" src="Media/Beats/Coming up/Coming Up - [Prod. By Jordan Ace] - Preview Version.mp3"></audio>
          <button class="playpausebtn"></button>
          <button class="mutebtn"></button>
</div>

<div class="controls">
       <audio class="audio" name="audio"  src="Media/Beats/Jet$et/Jet$et [Prod. By Jordan Ace] - MP3 Preview.mp3"></audio>
       <button class="playpausebtn"></button>
       <button class="mutebtn"></button>
</div>

Unfortunately my audio is not playing at all, can someone help me out?

[diafol]

The srcs look a little unlikely. Are yoiu sure that these fielnames are right? Try renaming a file to something simple like "trial.mp3" and try that

[SpecialistPanther]

I believe the sources are correct, however i changed a file name to Trial.mp3 but it still does not work?

<div class="controls">
          <audio class="audio" name="audio" src="Media/Beats/Catching waves/Trial.mp3"></audio>
          <button class="playpausebtn"></button>
          <button class="mutebtn"></button>
</div>

Also Changed the selector from $('.audio .controls') to $('.controls') and nothing...