I'm really interested in creating some kind of equalizer / visualizer to represent the sound from the <audio> . So far, I have managed to find some very interesting experiments that visualize sound. Most of them are webgl based and work only in chrome. What I did not achieve is much simpler, itโs just a basic one, one color, 2nd visualizer, nothing unusual.
This is something very similar to what I did not achieve (some kind of image in the middle and visualization on the sides, very simple, but I like it;))
http://www.youtube.com/watch?v=yLRyAz0WFnw
The way I want to work is to render / create visualization based on src sound tag, e.g.
<audio id="test" src="http://api.soundcloud.com/tracks/78404260/stream?client_id=7a17129ba9cd5fff34f847e3539829b7"> </audio>
and the page will have a canvas tag that takes src from the audio tag with a specific identifier, in this case "test". I donโt think that something so simple should require the use of WebGl and would like to use a simple canvas instead, which is why it works in most browsers with html5 support. I am new to javascript, so I don't know where to start. I mentioned several examples that I found earlier, but to look at their source did not help at all. I am looking for an elegant solution in which nothing complicated happens. I understand that stackoverflow is not asking for the full code, so if you can just start me, for example. explain how to interact with sound, resize these "equalizer sticks" depending on what is playing, etc. would be great;)) (jQuery suggestions are also welcome)
source share