jQuery Play/Pause HTML5 Audio
jQuery solution to play a single HTML5 audio element, and pause all others on a page with multiple audio elements.
HTML
<p>Audio #1</p>
<audio src="http://www.afinerweb.com/music/bensound-slowmotion.1.mp3" controls preload="metadata">
<p>Alas, your browser doesn't support html5 audio.</p>
</audio>
<p>Audio #2</p>
<audio src="http://www.afinerweb.com/music/bensound-slowmotion.2.mp3" controls preload="metadata">
<p>Alas, your browser doesn't support html5 audio.</p>
</audio>
<p>Audio #3</p>
<audio src="http://www.afinerweb.com/music/bensound-slowmotion.3.mp3" controls preload="metadata">
<p>Alas, your browser doesn't support html5 audio.</p>
</audio>
<p>Music credit: <a href="http://www.bensound.com/royalty-free-music" target="_blank">www.bensound.com</a></p>
<p>Programming credit: <a href="http://stackoverflow.com/users/1140544/hagbourne" target="_blank">Hagbourne</a></p>
JavaScript
jQuery(document).ready(function( $ ) {
$('audio').on("play", function (me) {
console.log(me);
$('audio').each(function (i,e) {
if (e !== me.currentTarget) {
this.pause();
}
});
});
})