How use 2 audio players and stop one when other is playing

Question

So i have one audio player in my page with two play buttons, and i need to stop and play the player works with this two buttons.

I'm using html5 and js/jquery for do this, but i can't finding a way to stop audio-player 1 when i start audio-player 2, someone can help?

My jsfiddle: http://jsfiddle.net/j08691/LqM9D/9/

Answer 1

you can just use one class name for each button and control them at one time

<button class="player-control" id="playpause">play</button>
<audio id="player">
    <source src="http://96.47.236.72:8364/;" />
</audio>
<!-- here the other button that needs to start sound too -->
<button class="player-control" id="playpause2">play</button>

<script type="text/javascript">
window.player = $('#player')[0];
$('.player-control').click(function () {
    if (player.paused) {
        player.play();
        $('.player-control').html('pause');
    } else {
        player.pause();
        $('.player-control').html('play');
    }
});
</script>

Answer 2

My 2cents, it will detect with button is clicked, and change the other one's text back to "play"

window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
    if (player.paused) {
        var second_playbutton = ($(this).attr("id") == "playpause")
          ? "playpause2"
          : "playpause"
        $("#" + second_playbutton).html("play");

        player.play();
        this.innerHTML = 'pause';
    } else {
        player.pause();
        this.innerHTML = 'play';
    }
})