Guys would appreciate an update in this - we need this capability for a live website and its delaying our publication. Thanks a lot.

Other Joomla HTML5 audio players that have this as standard functionality is for example: http://demo.joomlaxtc.com/extensions3/multimedia/mp3chart https://extensionspot.com/joomla30/audiofly-audio-player/grid-display https://www.superjoom.com/products/sj-html5-audio-player.html#demo

Hi there,

Thanks for contacting us. Sorry for the inconvenience. I have added your issue in our working board. I hope the developer team will consider your request.

-Thanks

Hi cliffvt,

We are using HTML5 audio not any JS plugin to play audio. That is default beviour of HTML5 audio player. Here a example you can check.

Thanks, Mamun

Hi Mamun, it might indeed be the default HTML5 behaviour, though it's not given the best/expected user experience. From user point of view current playing audio file shoudl stop when another audio clip is played on the same page. Could you pse provide a fix and short term work around for this? Will be much appreciated! kind regards, Peter

Hi,

Thank you very much for understanding. Sorry to say that there is no easy way to fix but I can recommend you to find a extension from Joomla Extension Directory to use.

Thanks, Mamun

GOT IT!!

OK all, I really DON'T want to have to download another extension for this. So, I have some script that works well!!

If you go to Mamun's page he created in his post above and then type this into the Javascript field, a JS call in conjunction with the HTML5 Audio elements works fanastically!

On our website we use Joomshaper Indigo template, so I pasted this code into the "Custom Javascript" area under template edit and it works perfectly stopping audio as you play the next one - hope this helps

var curPlaying;
window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
{
    window.$_currentlyPlaying.pause();
} 
window.$_currentlyPlaying = evt.target;
}, true);
$(function () {
$(".playback").click(function (e) {
    e.preventDefault();
    var song = $(this).next('audio')[0];
    if (song.paused) {
        if (curPlaying) {
            $("audio", "#" + curPlaying)[0].pause();
        }
        song.play();
        curPlaying = $(this).parent()[0].id;
    } else {
        song.pause();
        curPlaying = null;
    }
});
});

The following reduced JS also works fine!

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

Al Mamun, let me jst say how disappointed I am as a long time fan and paid user of SPPB Pro and your templates to see this type of answer - it would be so nice if you tried to find answers or help us rather than stock standard answers or sending us to find other extensions!

@cliffvt: thanks for your fast response and workaround solution. works as expected! gr, Peter