JSFiddle - React, Tailwind, and code Playground
by StepBaro
HTML
<script type="text/javascript">
function playpausa() {
var snd = document.getElementById("sound");
var snd_btn = document.getElementById("sound_button");
snd.muted = !snd.muted;
if (snd.muted) {
snd_btn.innerHTML = "<img alt='Music Off' title='Music Off' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_no.png' />";
} else {
snd_btn.innerHTML = "<img alt='Riproduci' title='Music On' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_si.png' />";
}
}
</script>
<audio autoplay="autoplay" loop="true" width="0" height="0" id="sound">
<soruce src="http://www.gaetanosicaridj.it/wp-content/uploads/2019/03/nuovo-sito-ultimooo-4-TAGLIATA-INIZIO-E-FINE.mp3" type="audio/mp3" />
</audio>
<div id='sound_button' onclick="playpausa()"><img title='Riproduzione Musica' alt='Riproduci' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_si.png' /></div>
<!--
<script type="text/javascript">
let audioPlaying = true,
backgroundAudio, browser,
fileMp3 = 'http://www.gaetanosicaridj.it/wp-content/uploads/2019/03/nuovo-sito-ultimooo-4-TAGLIATA-INIZIO-E-FINE.mp3';
browser = navigator.userAgent.toLowerCase();
jQuery('<audio class="audio1" src="' + fileMp3 + '" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
jQuery('<embed id="background-audio" src="' + fileMp3 + '" autostart="1"></embed>').prependTo('body');
backgroundAudio = setInterval(function() {
jQuery("#background-audio").remove();
jQuery('<embed id="background-audio" src="' + fileMp3 + '"></embed>').prependTo('body');
}, 245000);
//120000 is the duration of your audio which in this case 2 mins.
}
jQuery("#sound_button").on('click', function(event) {
audioPlaying = !audioPlaying;
jQuery("#background-audio").remove();
clearInterval(backgroundAudio);
if (audioPlaying) {
jQuery(".audio1").play();
//play audio
} else {
...