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' />";
    }
  }
  jQuery(window).on('scroll', function() {
    var snd = document.getElementById("sound")
    snd.play();
  });

  jQuery(document).on('click', function() {
    var snd = document.getElementById("sound")
    snd.play();
  });

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