Audio Vizualizer

by Sebastian Kay

HTML

<!-- analyzer container -->
<div id="container"></div>

<!-- audio element -->
<audio id="audio" controls crossorigin></audio>

<!-- file upload -->
<input id="upload" type="file" accept="audio/*">

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>

CSS

body {
  font: 13px sans-serif;
  margin: 0;
  overflow: hidden;
}

audio {
  display: inline-block;
  height: 40px;
  width: 100%;
}

canvas {
  display: block;
  width: 100%;
}

#container {
  height: calc( 100vh - 40px );
}
#container:-webkit-full-screen {
  height: 100vh;
}

#upload {
  display: none;
}

.dg.main {
  position: absolute;
  top: 0;
  right: 100px;
  z-index: 9;
}

.dg.main ul {
  max-height: calc( 100vh - 20px );
  overflow-Y: auto;
}

.dg.main select {
  font: inherit;
}

JavaScript

/**
 * In this demo we use the onCanvasDraw callback to
 * set the `radius` according to the current energy.
 * For documentation visit https://audiomotion.dev
 */

// load module from Skypack CDN
import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer';

// audio source
const audioEl = document.getElementById('audio');

// container
const container = document.getElementById('container');

// instantiate analyzer
const audioMotion = new AudioMotionAnalyzer( container, {
  source: audioEl,
  mode: 3,
  alphaBars: true,
  fsElement: container,
  gradient: 'rainbow',
  linearAmplitude: true,
  linearBoost: 1.8,
  radial: true,
  showPeaks: false,
  weightingFilter: 'D',
  onCanvasDraw: instance => {
    instance.radius = .3 + instance.getEnergy();
  }
});

// file upload
document.getElementById('upload').addEventListener( 'change', e => {
	const fileBlob = e.target.files[0];

	if ( fileBlob ) {
		audioEl.src = URL.createObjectURL( fileBlob );
		audioEl.play();
	}
});

/* ======== CONTROLS (dat-gui) ======== */

const gui = new dat.GUI({ autoPlace: false });

const buttons = {
//  link: () => window.parent.location = 'https://audiomotion.dev',
  link: () => window.parent.location = 'https://github.com/hvianna/audioMotion-analyzer/tree/develop#readme',
  loadFile: () => document.getElementById('upload').click(),
  playStream: () => {
    audioEl.src = 'https://icecast2.ufpel.edu.br/live';
    audioEl.play();
  },
  fullscreen: () => audioMotion.toggleFullscreen(),
}

gui.add( buttons, 'loadFile' ).name('Upload audio file');
gui.add( buttons, 'playStream' ).name('Play live stream');
gui.add( buttons, 'fullscreen' ).name('Fullscreen');

gui.add( audioMotion, 'gradient', ['classic','prism','orangered','rainbow','steelblue'] );

gui.add( audioMotion, 'mode', {
    'Discrete frequencies' : 0,
    '1/24th octave / 240 bands' : 1,
    '1/12th octave / 120 bands' : 2,
    '1/8th octave /...