Listen to your Web Pages

Always notice how in sci-fi movies the computers make those weird bleepy sounds? Tom Hicks has created a JavaScript snippet that combines MutationObserver with AudioContext to recreate that effect. Copy this into the console of any web page that is interactive and doesn’t do hard reloads. You will hear your DOM changes as different pitches […]

Feeding the Audio Graph – Using Web Audio’s AnalyserNode

Good article on 24ways (yes, that still is a thing) on using Web Audio’s AnalyserNode. const waveform = new Uint8Array(analyser.fftSize); const frequencies = new Uint8Array(analyser.frequencyBinCount); const ctx = canvas.getContext(‘2d’); const loop = () => { requestAnimationFrame(loop); analyser.getByteTimeDomainData(waveform); analyser.getByteFrequencyData(frequencies); ctx.beginPath(); waveform.forEach((f, i) => ctx.lineTo(i, f)); ctx.lineTo(0,255); frequencies.forEach((f, i) => ctx.lineTo(i, 255-f)); ctx.stroke(); } loop(); I especially […]

audio-effects – Create Audio Effects Using the Web Audio API

Great stuff by Sam Bellen, in which me mimics the effect-pedals for guitars: Audio-effects is a JavaScript library to create audio effects using the Web Audio API. This library contains the Volume, Distortion, Delay, Flanger, Reverb, and Tremolo effects He recently gave a talk about this at JSConf Budapest 2016 and at a local Fronteers […] – A journey through space, time, and music

Radio broadcasts leave Earth at the speed of light and travel outwards into space. Follow them through the Milky Way as you scroll backwards through time and listen to what the stars hear. Built using Three.js. Taking a look at the source code reveals all tracks used. And oh, don’t forget the β€œInverse Square Law […]

Realtime Audio-Visualizations with JavaScript

window.onload = function() { var ctx = new AudioContext(); var audio = document.getElementById(‘myAudio’); var audioSrc = ctx.createMediaElementSource(audio); var analyser = ctx.createAnalyser(); // we have to connect the MediaElementSource with the analyser audioSrc.connect(analyser); // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec) // frequencyBinCount tells you how many values you’ll receive […]