HTML5 Audio Visualization for Illuminator Console

Recently I have been investigating some of the new capabilities of web browsers that support HTML5 and include JavaScript enabled audio APIs. This video excerpt above is a screen capture of an audio visualization that I produced with Processing.js, HTML5 and the Audio Data API that’s built into Firefox 4 Beta. The audio analysis is based on code from this example by Corbin Brook.

Circles are drawn that vary in size dynamically based on the amplitude of the music. The track is Illuminator Console by Ostraka (John Keston) from the album Precambrian Resonance on Unearthed Music. This application will only work in Firefox 4 Beta. To view the full visualization visit the following link:

HTML5 Audio Visualization for Illuminator Console

This entry was posted in Audio News, Music, Sound Design and tagged , , , , , by John CS Keston. Bookmark the permalink.

About John CS Keston

John CS Keston is an award winning transdisciplinary artist reimagining how music, video art, and computer science intersect. His work both questions and embraces his backgrounds in music technology, software development, and improvisation leading him toward unconventional compositions that convey a spirit of discovery and exploration through the use of graphic scores, chance and generative techniques, analog and digital synthesis, experimental sound design, signal processing, and acoustic piano. Performers are empowered to use their phonomnesis, or sonic imaginations, while contributing to his collaborative work. Originally from the United Kingdom, John currently resides in Minneapolis, Minnesota where he is a professor of Digital Media Arts at the University of St Thomas. He founded the sound design resource, AudioCookbook.org, where you will find articles and documentation about his projects and research. John has spoken, performed, or exhibited original work at New Interfaces for Musical Expression (NIME 2022), the International Computer Music Conference (ICMC 2022), the International Digital Media Arts Conference (iDMAa 2022), International Sound in Science Technology and the Arts (ISSTA 2017-2019), Northern Spark (2011-2017), the Weisman Art Museum, the Montreal Jazz Festival, the Walker Art Center, the Minnesota Institute of Art, the Eyeo Festival, INST-INT, Echofluxx (Prague), and Moogfest. He produced and performed in the piece Instant Cinema: Teleportation Platform X, a featured project at Northern Spark 2013. He composed and performed the music for In Habit: Life in Patterns (2012) and Words to Dead Lips (2011) in collaboration with the dance company Aniccha Arts. In 2017 he was commissioned by the Walker Art Center to compose music for former Merce Cunningham dancers during the Common Time performance series. His music appears in The Jeffrey Dahmer Files (2012) and he composed the music for the short Familiar Pavement (2015). He has appeared on more than a dozen albums including two solo albums on UnearthedMusic.com.

4 thoughts on “HTML5 Audio Visualization for Illuminator Console

  1. Some pretty kick ass visuals, after graduation when I have some more time I’ll have to look into experimenting as well.

  2. Very nice John. Such great music to add responsive visuals to. It’s great to see something like this done outside of AS3 and Flash, and makes me wonder in what ways this could be extended. Hope to see a show soon.

  3. Thanks for the props, @Dane, @Ben, and @Joey. Just curious, did you just watch the video, or did you checkout the actual application in Firefox 4 Beta? FYI: The audio sync on the video got a little off since the capture software I used only captured the visuals so I had to drop in the audio afterward. Works much better in realtime.

Leave a Reply