JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<script type="text/javascript">

 var iFrameBackup;
 var SoundState = true;

 jQuery(window).load(function() {
 var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
 if (!isChrome) {
 // HTML5 Audio control for not Chrome browsers
 jQuery('#iframeAudio').remove();
 jQuery('#sound_button').on('click', function() {
 var snd = document.getElementById("sound");
 snd.muted = !snd.muted;
 if (snd.muted) {
 jQuery('#sound_button').html("<img alt='Music Off' title='Music Off' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_no.png' />");
 } else {
 jQuery('#sound_button').html("<img alt='Riproduci' title='Music On' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_si.png' />");
 }

 });
 } else {
 // IFrame for Chrome
 jQuery('#sound').remove();
 jQuery('#sound_button').on('click', function() {
 
 SoundState = !SoundState
 
 if (!SoundState) { // Sound off
 iFrameBackup = jQuery('#iframeAudio').clone();
 jQuery('#iframeAudio').remove();
 
 jQuery('#sound_button').html("<img alt='Music Off' title='Music Off' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_no.png' />");
 
 } else { // Sound on
 
 jQuery('#iFrameSoundContainer').append(iFrameBackup);
 
 jQuery('#sound_button').html("<img alt='Riproduci' title='Music On' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_si.png' />");
 
 }

 });
 }

 

 });

</script>


<div id='sound_button'><img title='Riproduzione Musica' alt='Riproduci' src='http://www.gaetanosicaridj.it/wp-content/uploads/2016/01/audio_si.png' /></div>

<div id="iFrameSoundContainer">
<iframe src="http://www.gaetanosicaridj.it/wp-content/uploads/2019/03/nuovo-sito-ultimooo-4-TAGLIATA-INIZIO-E-FINE.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
</div>


<audio id="sound" src="http://www.gaetanosicaridj.it/wp-content/uploads/2019/03/nuovo-sito-ultimooo-4-TAGLIATA-INIZIO-E-FINE.mp3" autoplay loop>
</audio>