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...