Make Your Browser Dance
16 Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
Theo
Theo
Jeremy Ingle
Jeremy Ingle
The work is truly impressive, but what I enjoyed more than the visual representation was watching the actual code dance to the music in the inspector!
Armstrongest
Armstrongest
Well done! I can totally see you using this for an interactive art piece. Or, have this running in a home and have it change the lighting environment in response to higher pitched speech (arguments). There are a variety of uses for this beyond the pure entertainment value.
Tom Turton
Tom Turton
Pretty cool experiment! Can see the potential. It could be really quite exciting when paired with, say, WebGL.
Miguel RIvero
Miguel RIvero
Can’t see the last demos working. In Safari, Chrome the squares don’t alter their alpha and Firefox doesn’t support audio.
Olli Aapro
Olli Aapro
Sweet :) and left the music to play on the background :D sweet beat ,
Ruth
Ruth
Thank you all so much!
I’m not going to lie it did take me a while to get my head around the audio analysis :)
Next stop – controlling Rachel’s cat from last year, so it runs in time with the music :D
Len
Len
Yeah that is awesome. I have been wondering for awhile why the web is not yet a medium for artists. I think I might have to start reassessing what I mean by artists.
What I really love was being able to edit it whilst it was playing using Chrome Dev Tools.
Bob Borst
Bob Borst
This is great! One thing I did notice though. When I play and pause the audio multiple times, the volume increases until it becomes distorted from clipping. I tried setting the audioElement.volume but it didn’t help. It looks like I would need to somehow change the volume before this line: analyser.connect(audioContext.destination) Any suggestions or insights you can provide would be appreciated. Thanks!
Francisco Baptista
Francisco Baptista
Hi Ruth,
This is very very cool!
I’ve got this now in the office big screen – hope you’re not recording. :)
Jesse
Jesse
Very impressive! Have a lot to learn about Web Audio, so it’s great to see what kind if things you can do with it.
Paul Williams
Paul Williams
This is awesome – a little project to do before the traditional Christmas Eve Karaoke at our place!
Theo
It’s people like you who keep the fire burning, thank you!
I’ll keep an eye on that cat ;)
anderberge
anderberge
Nice! I’m making a digital X-mas card, right now I am using the HTML5 <audio> tag, but if it gets more advanced I will definitely try out the Web Audio API.
Also, the code bits are sometimes using “analyser” and sometimes “analyzer”, the demo only use the latter so it is working fabulously.
Matt Norton
Matt Norton
That is amazing! Thank you for sharing this Ruth! I have been trying to figure a way to make audio more apart of the sites I create. I am will have fun with this :)
jkneb
jkneb
This is so cool.
Ok, you did it. Last year it was Rachel Nabors’s running cat animation this year it’s you. I’ve got my 7 years old daughter singing and yelling for about 3 hours and tomorrow it’s a new day. I still remember she was asking for Rachel’s animation for months, let’s see how long will she sing along and let the circles dance.
You made my day in a funny way!