Simple animation using the WebAudio API and Canvas.
The idea of the animation is to show the music going on around the Earth. If the music is "louder" then the music notes are further away. The Earth keeps attracting the music to itself with its gravity. Each sphere around the Earth represents a group of frequencies.
The frequencies of the audio are captured in real time. Each group of frequencies corresponds to one floating sphere. The size of the spheres are related to the average of all frequencies. If the average is a big number so the spheres will be big too. Same thing goes for the speed they move away: the greater the average the greater the speed.
This animation uses the Web Audio API and HTML canvas element. The code uses ES6+, but it is transpiled using Babel.
Up to date Chrome and Firefox will definitely work.
Up to date Safari and Edge will work, but their decodeAudioData function is buggy, so I do not guarantee that.
Internet Explorer: No.
Web Audio API compatibility table
Canvas compatibility table
Clone this repo:
git clone github.com/felipethome/audio-visualization
Install dependencies:
npm install
For a development version:
npm run dev
Then check localhost:8080.
BSD-3