JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://rawcdn.githack.com/goldfire/howler.js/master/src/howler.core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/equalizer.js/build/equalizer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.4/wavesurfer.min.js"></script>
<div id="waveform">

</div>
<button id='play'>
Play
</button>

JavaScript

document.querySelector("#play").onclick = function(){
console.log("log")
/* var sound = new Howl({
            src: 'https://tunein.streamguys1.com/cnn-new',
            html5: true, // A live stream can only be played through HTML5 Audio.
          format: ['mp3', 'aac']
        });
        console.log(sound)
        sound.play(); */
        
		let wavesurfer = WaveSurfer.create({
            container: document.querySelector('#waveform'),
            barWidth: 2,
            barHeight: 1, // the height of the wave
            barGap: null // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
        });
        
        wavesurfer.load("https://tunein.streamguys1.com/cnn-new.mp3")


var playing = false;
    var context = new AudioContext(); // From Web Audio API
    var equalizer = new Equalizer(context).appendTo(document.body);

    // Create audible sound with the Web Audio API

    equalizer.domElement.addEventListener('click', resume, false);
    update();

    function resume() {
      if (!(/running/.test(context.state))) {
        context.resume();
      }
    }

    function update() {
      equalizer.update();
      requestAnimationFrame(update);
    }
    
  }