I'm using a java script to allow playing audio when text is click the second click start the audio file selected by the div, and the second click pause it.
all the audio files are loaded without controller with a specific div class
let isClicked = false;
function playclip1() {
if ((navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 7') != -1) || navigator.appVersion.indexOf('MSIE 8') != -1) {
if (document.all) document.all.sound.src = 'click.mp3';
} else {
let audio = document.getElementById('audiop1');
if (!isClicked) audio.play();
else audio.pause();
isClicked = !isClicked;
}
}
<a href="javascript:playclip1();">Click For Sound</a><br>
<audio id="audiop1">
<source src="audio.wav" type="audio/wav">
</audio>
I want that controller will float in the top right for all audio files and will show only the audio controller of the div that is currently playing if there is no audio playing it will not show any controller in the selected location or, optional will show the last audio file played.
I have multiply functions playclip1 > audiop1 playclip2 > audiop2 and so on
thank you.