Multiple Html5 Audio Players Play Control

I have multiple HTML5 audio players on my page, the problem is that when I play both of them they play simultaneously overlapping each other's sound. Basically what I want to do is

Solution 1:

Simply added the following javascript to my custom js

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);