Unknown Coder Unknown Coder - 7 days ago 6
HTML Question

Play one HTML audio element at a time

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.

Answer
$(function(){
    $("audio").on("play", function() {
        $("audio").not(this).each(function(index, audio) {
            audio.pause();
        });
    });
});

See sample at JSFiddle

Comments