Intégrer des visuels sonores avec du code

Le 26/11/2015

Parmi les nouveautés du HTML5 méconnues et très peu utilisés, je veux l'API Audio. La faute à Internet explorer, qui ne la supporte toujours pas, même dans sa version 11, et à un support assez hétérogène de la plupart des autres navigateurs.

Néanmoins, il serrait dommage de ne pas commencer à l'utiliser ! Pour illustrer mon propos, je vous propose de découvrir ces 10 exemples assez simples de ce que l'on peut faire avec une fois couplée avec canvas ou three js par exemple.

Attention, il s'agit de visualisations audio, il y a donc du son ! Pensez à couper vos enceintes avant de les visionner !

See the Pen Simple Audio Visualisation by Justin Windle (@soulwire) on CodePen.

See the Pen Three js - Sphere audio visualiser by Patrick Heng (@pat_hg) on CodePen.

See the Pen Audio visualisations by Bali Balo (@bali_balo) on CodePen.

See the Pen #Codevember 13 - Three js wave shapes audio visualizer by Patrick Heng (@pat_hg) on CodePen.

See the Pen Audio Visualisation Bars by Charlotte Dann (@pouretrebelle) on CodePen.

See the Pen Abstract Audio Visualizer by Francesco Trillini (@Francext) on CodePen.

See the Pen Three.JS Audio Visualization by Che (@code_dependant) on CodePen.

See the Pen Audio visualisations by Bali Balo (@bali_balo) on CodePen.

See the Pen Three js + html5 audio api by Patrick Heng (@pat_hg) on CodePen.

See the Pen Blizzard Visualizer - Merry Christmas! by Jeff Thomas (@aecend) on CodePen.