I have many audio elements on a single page and I want to play just one element at a time. That is if one audio element is playing and I click on play on another element, the previous audio element should pause.

I found a jQuery code from another question to do this but that uses an image as play/pause controls. I'm using the inbuilt controls='controls' attribute for the audio element instead. Is it possible to use jQuery to control the play/pause feature for the audio element in my case?

Here is my HTML code

<div>

    <p class=song><h3><strong>#1 Intro - The Oath</strong></h3><p>

    <audio class=playback src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload=none>

        <I>Your browser does not support the audio element.</I>

    </audio>

</div>



<div>

    <p class=song><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>

    <audio class=playback src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload=none>

        <I>Your browser does not support the audio element.</I>

     </audio>

</div>

Here is the jQuery code

$(document).ready(function() {

    var curPlaying;



    $(function() {

        $(.playback).click(function(e) {

            e.preventDefault();

            var song = $(this).next('audio')[0];

            if(song.paused){

                song.play();

                if(curPlaying) $(audio, #+curPlaying)[0].pause();

            } else { song.pause(); }

            curPlaying = $(this).parent()[0].id;

        });

    });

});

The jQuery code doesn't seem to be working for me.