#Audio visualizer program html5 download#
If you’re interested in building your own music visualizers in HTML5/ Javascript, you can download the demo source, VolumeData.js class (MIT licensed) and VolumeData AIR application here. Occasionally dynamic audio loading seems to break on certain browsers, just reload if it gets stuck on “loading music”. I built two variations: Star Field and Atomic. It requires an up to date browser to run. I think the end result is pretty cool, though it requires a fairly modern system, and will still melt your CPU – I was intentionally pushing things hard to try to find the performance limit. Two of the newest features were compositeOperation support (which let me approximate an “add” blend mode), and the drawPolyStar method, both of which I used to excess. With those pieces in place and tested, I started putting together a demo of it in action using EaselJS.
I then wrote a JS class called VolumeData.js that reads in these files and provides access to the data via a simple interface (ex.
To address this I wrote a little AIR application that will read an MP3 file using Sound.extract() and export peak volume data as a text or JPG image file.
The primary challenge was that Javascript doesn’t have any built in mechanism for accessing the volume of a playing audio tag. Given that, I thought I’d combine the two interests, and build a music visualizer using JS, the canvas & audio elements in HTML5, and the EaselJS framework. It’s no secret that I like building music visualizers, or that I’ve been playing with HTML5 a fair amount lately.
0 kommentar(er)
