In an attempt to learn THREE.js — the 3D rendering WebGL framework and WebAudio API, I made something that visualises the music in a very simple way. This article documents the whole process.
Final thing first:
(Just use a .mp3 / .mp4 / .wav file to see it work. If you are out, you can use this)
A Primer on WebAudio API
The HTML5’s tag when combined with the WebAudio API, becomes quite powerful. It’s a dynamic tool that lets you process and adds audio effects dynamically to any kind of audio.
The Web Audio API involves handling audio operations inside an audio context and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources — with different types of channel layouts — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.
The audio pipeline starts by creating an audio context. It should have at least a single audio source — which can be thought of as an entry point for external files, mic input, oscillators, etc. Once we have a source in place, the signal is processed and moved ahead in the pipeline using audio nodes. After processing, the signal(s) are routed to the audio destination, which can only be a single one in the whole context.
Modular Routing
The simplest illustration has a single source and a destination, without any effects or processing, inside the context. Why would anyone use this? Maybe they just want to play the sound without any changes.
Refer the complete article here:- https://www.epicprogrammer.com/2021/11/music-visualiser-with-threejs-web-audio.html
Content Inspired by Epic Programmer
Top comments (0)