Audio player control lost between variants

Hi

I have had a lot of help from forum members with my website 'Songs of the Inland Waterways' not least with the audio player that occurs on many pages. I now use a HTML placeholder with code like this :

<audio id="sotiw" src="full web address" controls style="width: 320px;" ></audio>

It's not a major problem but I've just realised that the audio player keeps running when I transition from Main to Mobile variants (or vice versa) on my laptop and the audio player on screen no longer controls the music.

Is there any easy way to stop the audio player when transitioning from one variant to another?

Regards
Ian

Ian, there's a lot to cover for this issue.

First off, a Placeholder with the same id across Variant will only show for the first it finds so I suggest you change the id to 'sotiw-v' or anything different in the Variant.

The second part is where you realise Main and Variant are the same HTML file just showing or hiding things.
The code for the player needs to be toggled off when the Mainor Variant is not visible.

Some coding is required to pick up this transition.

I have workshopped this of videos and forms but it will work for MP3s too. I just have to find where in https://www.talkgraphics.com/tags.php?tag=nugget

Acorn

Here's the nugget i was thinking of: https://www.talkgraphics.com/showthr...ot-Solved-quot
It doesn't stop the MP3 but the controls are still active you you can control whatever MP3 is playing or paused.

Acorn

Thanks Acorn

I'll have a go at implementing your suggestion when I've got to grips with it all.

Ian