JSFiddle - React, Tailwind, and code Playground

by bfavaretto

HTML

<div>
    <audio ref="audio">
        Your browser does not support the <code>audio</code> element.
        <source src="//upload.wikimedia.org/wikipedia/commons/4/43/Goldberg_variations_1_start.ogg" type="audio/ogg" />
    </audio>

    <canvas ref="canvas" width="1000" height="250"></canvas>
    <button class="play genericons-neue-play">play</button>
    <button class="pause genericons-neue-pause" >pause</button>
</div>

CSS

body {
  background: #000;
}

JavaScript

class AudioViewer {

    constructor(audio, canvas) {
        this.$refs = {
            audio: audio,
            canvas: canvas
        };
        this.audioCtx = new AudioContext();
        this.playing = false;
        this.setupAudio();
        this.setupVis();
    }

    setupAudio() {
        this.$refs.audio.addEventListener('ended', this.stop, false);
        
        document.querySelector('.play').addEventListener('click', () => this.play(), false);
        document.querySelector('.pause').addEventListener('click', () => this.pause(), false);
    }

    play() {
        if(this.$refs.audio.paused) {
            this.$refs.audio.play().then( e => this.playing = true );
        }
    }

    pause() {
        if(!this.$refs.audio.paused) {
            this.$refs.audio.pause();
            this.playing = false;
        }
    }

    stop() {
        this.playing = false;
    }

    setupVis() {
        var canvas = this.$refs.canvas; //document.querySelector('canvas');
        var audio = this.$refs.audio; // document.querySelector('audio');
        var audioCtx = this.audioCtx; //new AudioContext();

        var source = audioCtx.createMediaElementSource(audio);
        var analyser = audioCtx.createAnalyser();
        source.connect(analyser);
        source.connect(audioCtx.destination);

        // CORS
        audio.crossOrigin = "anonymous";

        analyser.fftSize = 1024;
        var bufferLength = analyser.frequencyBinCount;
        var dataArray = new Uint8Array(bufferLength);

        var w = canvas.width;
        var h = canvas.height;
        var sliceWidth = w * 1.0 / bufferLength;
        var canvasCtx = canvas.getContext('2d');

        canvasCtx.clearRect(0, 0, w, h);
        canvasCtx.fillStyle = 'rgb(51, 51, 51)';
        canvasCtx.lineWidth = 2;
        canvasCtx.strokeStyle = 'rgb(255, 255, 255)';
            
        function draw() {
            let drawVisual = window.requestAnimationFrame(draw);
           ...