Audio Visualizer

audio-visualizer.markdown

Audio Visualizer

A Pen by Pic on CodePen.

License.

index.html

<div class="container wh-80 wh-desktop-40 padding-s">
<h1>
  Music visualizer
</h1>
<h3 id="title" class="hhr">
  Drop a sound!
</h3>

<canvas id="oscilloscope" class="ease border-radius-l no-margin wh-100"></canvas>
<audio id="audio"> <source type="audio/mp3"></audio>
<button class="audio-viz__btn btn btn-primary margin-m" id="start">Start Audio</button>
  
</div>

script.js

window.onload = function () {
    var canvas = document.querySelector('#oscilloscope');
    var self = this;

    let start_button = document.getElementById('start');

    function launch(src){

        function audioSetup(blobURL) {
            self.audioContext = new (window.AudioContext || window.webkitAudioContext)();
            self.masterGain = self.audioContext.createGain();
            self.masterGain.connect(self.audioContext.destination);
    
            let song = new Audio(blobURL),
                songSource = self.audioContext.createMediaElementSource(song),
                songPlaying = false;
    
            song.crossOrigin = 'anonymous';
            songSource.connect(self.masterGain);
    
            start_button.addEventListener('click', function () {
                if (songPlaying) {
                    song.pause();
                    start_button.innerHTML = 'Start Audio';
                } else {
                    song.play();
                    drawOscilloscope();
                    updateWaveForm();
                    start_button.innerHTML = 'Stop Audio';
                }
    
                songPlaying = !songPlaying;
            });
        }
    
        audioSetup(src);

        const analyser = self.audioContext.createAnalyser();
        self.masterGain.connect(analyser);
        const waveform = new Float32Array(analyser.frequencyBinCount);
        analyser.getFloatTimeDomainData(waveform);
    
        function updateWaveForm() {
            requestAnimationFrame(updateWaveForm);
            analyser.getFloatTimeDomainData(waveform);
        }
      
        function drawOscilloscope() {
            requestAnimationFrame(drawOscilloscope);
    
            const scopeCanvas = document.getElementById('oscilloscope');
            const scopeContext = scopeCanvas.getContext('2d');
    
            scopeCanvas.width = waveform.length;
            scopeCanvas.height = 200;
    
            scopeContext.clearRect(0, 0, scopeCanvas.width, scopeCanvas.height);
            scopeContext.beginPath();
    
            for (let i = 0; i < waveform.length/2; i++) {
                const x = i;
                const y = (0.5 + (waveform[i] / 5)) * scopeCanvas.height;
    
    
                if (i == 0) {
                    scopeContext.moveTo(x, y);
                } else {
                    scopeContext.lineTo(x, y);
                }
            }
    
            scopeContext.strokeStyle = '#5661FA';
            scopeContext.lineWidth = 6;
            scopeContext.stroke();
        }
    

    
    }

    
    canvas.addEventListener('dragover', function (e) {
        e.preventDefault();
    })

    canvas.addEventListener('drop', function (e) {
        console.log('File(s) dropped');
        // Prevent default behavior (Prevent file from being opened)
        e.preventDefault();
        if (e.dataTransfer.items) {
            if (e.dataTransfer.items[0].kind === 'file') {
                var file = e.dataTransfer.items[0].getAsFile();
                self.blobURL = window.URL.createObjectURL(file);
                document.getElementById('audio').setAttribute('src', self.blobURL);
                document.getElementById('title').innerHTML = file.name;
            }
        }
        //self.audioSetup(self.blobURL);
        launch(self.blobURL);


    });

    launch(self.blobURL);
}

style.css

#oscilloscope {
    border: 4px dotted transparent;
    height: 200px;
    margin: 0 auto;
    background-color: darken(#5661F9, 40%);
}

#oscilloscope:hover {
    box-shadow: 0 0 0 4px rgba(0,0,255,10%);
}

styles

<link href="https://codepen.io/pipic1/pen/gvWqdb.css" rel="stylesheet" />