Ve snaze naučit se THREE.js — 3D rendering WebGL framework a WebAudio API jsem vytvořil něco, co vizualizuje hudbu velmi jednoduchým způsobem. Tento článek dokumentuje celý proces.
Nejprve poslední věc:
(Abyste viděli, jak to funguje, použijte soubor .mp3 / .mp4 / .wav. Pokud jste mimo, můžete použít toto)
Primer on WebAudio API
Značka HTML5 v kombinaci s rozhraním WebAudio API se stává docela výkonnou. Je to dynamický nástroj, který vám umožňuje zpracovávat a dynamicky přidávat zvukové efekty k jakémukoli druhu zvuku.
Web Audio API zahrnuje zpracování zvukových operací uvnitř zvukového kontextu a bylo navrženo tak, aby umožňovalo modulární směrování. Základní operace se zvukem se provádějí se zvukovými uzly, které jsou vzájemně propojeny a vytvářejí graf směrování zvuku. Několik zdrojů – s různými typy rozložení kanálů – je podporováno i v rámci jednoho kontextu. Tento modulární design poskytuje flexibilitu pro vytváření komplexních zvukových funkcí s dynamickými efekty.
Zvukový kanál začíná vytvořením zvukového kontextu. Měl by mít alespoň jeden zdroj zvuku – což lze považovat za vstupní bod pro externí soubory, mikrofonní vstup, oscilátory atd. Jakmile máme zdroj na svém místě, signál se zpracuje a posune vpřed v potrubí pomocí zvuku. uzly. Po zpracování jsou signály směrovány do zvukového cíle, který může být v celém kontextu pouze jeden.
Modulární směrování
Nejjednodušší ilustrace má jeden zdroj a cíl, bez jakýchkoli efektů nebo zpracování, uvnitř kontextu. Proč by to někdo používal? Možná chtějí jen přehrát zvuk bez jakýchkoli změn.
Vlevo je příklad mnohem složitějšího nastavení, které lze také provést pomocí tohoto API.
Celý článek naleznete zde:- https://www.epicprogrammer.com/2021/11/music-visualiser-with-threejs-web-audio.html
Obsah inspirovaný programátorem Epic