Multiple audio clip behaviour on SP Pagebuilder - Forum | JoomShaper
Awaiting an answer SP Page Builder

Multiple audio clip behaviour on SP Pagebuilder

Asked by cliffvt 5 years ago Last activity 5 years ago

Using multiple audio clips on a SP Page Builder page - when one is playing and the user starts another the first one doesnt stop as is customary usage and both keep playing. I know HTML5 has the capability to do this but it doesnt seem to be built into SP PageBuilder.

is there a workaround or fix please?

8 replies

Oldest first Newest first Most helpful
Toufiq Senior Staff
5 years ago

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

Al Mamun Staff
5 years ago

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

Seamoose IT Solutions
5 years ago

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

Al Mamun Staff
5 years ago

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

cliffvt Asked this
5 years ago · edited

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);
cliffvt Asked this
5 years ago

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!

Seamoose IT Solutions
5 years ago

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

Log in to reply.