player.html

<div id="player_msg"><i class="fa fa-cog fa-spin fa-3x fa-fw"></i> LOADING SONICS <br> <h1>SPACEBAR: PLAY/PAUSE <br>ARROW KEYS: SEEK/VOLUME</h1></div>
<div id="player"></div>
  <div id="music_dur"></div>
<div id="player_controls" style="margin:10px;">
  <button id="audioBtnPlay" onclick="wavesurfer.play()">
    <i class="fa fa-play" aria-hidden="true"></i>
  </button>
  <button id="audioBtnPause" onclick="wavesurfer.pause()">
    <i class="fa fa-pause" aria-hidden="true"></i>
  </button>
  <button id="toggleMuteBtn" onclick="wavesurfer.toggleMute()">Mute</button>
  <button id="toggleLossyBtn" onclick="toggleLossy()">Toggle <b>Lossy</b>/Lossless</button>
  {% if page.bin_url %}
    <button id="toggleBinBtn" onclick="toggleBin()">Toggle Stereo/Binaural</button>
  {% endif %}
  <input id="volume" type="range" min="0" max="1" value="1" step="0.1" style="float:right">
</div>
 <script>
   var url = "{{ page.stream_url }}"
   var fadeTimerBase = Number("{{ page.duration }}");
   
   var dur = 0.0;
   var fadeDur = 60;

   var wavesurfer = WaveSurfer.create({
     container: "#player",
     cursorWidth: 2,
     responsive: true
   });

	 wavesurfer.setVolume(0.4);
	 document.querySelector('#volume').value = wavesurfer.backend.getVolume();

   var volumeInput = document.querySelector('#volume');
   var onChangeVolume = function (e) {
     wavesurfer.setVolume(e.target.value);
     console.log(e.target.value);
   };
	 volumeInput.addEventListener('input', onChangeVolume);
	 volumeInput.addEventListener('change', onChangeVolume);

   wavesurfer.on('ready', function () {
     document.getElementById("player_msg").innerHTML = "";
     wavesurfer.play();
     dur = Number(wavesurfer.getDuration().toFixed(2));
     document.getElementById("music_dur").innerHTML = `<i class="fa fa-clock-o" aria-hidden="true"></i> ${dur}`;
     mult3 = (dur / year) || 1;
     /* Set the center content to fade out */
		var style = document.createElement('style');
		style.innerHTML = `
		 #ctner {
			 opacity: 0;
       transition: opacity ${Math.round(dur / 6) > fadeDur ? fadeDur : Math.round(dur / 6)}s linear;   
		 }
     #ctner:hover {
        opacity: 1;
        transition: opacity 5s;
     }
		`;
     document.head.appendChild(style);
     // draw();
   });

   wavesurfer.load(`//${url}`);
   // wavesurfer.load(opusUrl);

   wavesurfer.on('seek', () => {
     alpha = 0.6;
   })

   wavesurfer.on('pause', () => {
     if (animationId) {
       cancelAnimationFrame(animationId)
       animationId = undefined
     }
   })

   wavesurfer.on('play', () => {
     if (!animationId) {
       draw();
     }
   })
   
   wavesurfer.on('finish', () => {
     if (animationId) {
       cancelAnimationFrame(animationId);
       animationId = undefined;
     }
     {% if page.previous.url %}
     window.location.href = "{{ page.previous.url }}";
     {% endif %}
   });

   wavesurfer.on('mute', (m) => {
        const newBtnText = m === true ? "Unmute" : "Mute";
        document.getElementById("toggleMuteBtn").innerHTML = newBtnText;
   });

   function toggleBin() {
       var stUrl = "{{ page.stream_url }}";
       var binUrl = "{{ page.bin_url }}";
       url = url == stUrl ? binUrl : stUrl
       wavesurfer.load(`//${url}`);
   }

   function toggleLossy() {
        var stUrl = "{{ page.stream_url }}";
        var flacUrl = "{{site.cdn}}/downloads/{{page.excerpt}}.flac";
        url = url == stUrl ? flacUrl : stUrl;
        const newBtnText = url == stUrl ?
          "Toggle <b>Lossy</b>/Lossless" :
          "Toggle Lossy/<b>Lossless</b>";
        wavesurfer.load(`//${url}`);
        document.getElementById("toggleLossyBtn").innerHTML = newBtnText;
   }

   // Media controls
   document.body.onkeyup = function(e){
     if(e.keyCode == 32){ // spacebar
       wavesurfer.playPause()
     } else if (e.keyCode == 37) { // left arrow key
       wavesurfer.skip(-10);
     } else if (e.keyCode == 39) { // right arrow key
       wavesurfer.skip(10);
     }/* else if (e.keyCode == 38) { // up arrow key
       wavesurfer.setVolume(wavesurfer.getVolume() + 0.1)
	     document.querySelector('#volume').value = wavesurfer.backend.getVolume();
     } else if (e.keyCode == 40) { // down arrow key
       wavesurfer.setVolume(wavesurfer.getVolume() - 0.1)
	     document.querySelector('#volume').value = wavesurfer.backend.getVolume();
     }*/
   }

 </script>