3D Waveform
November 16, 2009Mr.doob
- http://mrdoob.com
- Location:
- London, England
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
3D representation of the music playing. A blue box determine the position of the signal being sent to your speakers.
Technology:
javascript, <audio>, <svg>
Comments
as soon as i loaded this up, my pc crashed with a bluescreen.....
Reply to this commentMusic under the name slumber.I would like to download his PC.Good music!
Reply to this commentThis is awesome! The music is pretty cool too :) Thanks for making this.
Reply to this commentThe music should loop. It just stops at the end.
Reply to this commentwhoa, uses way too much CPU
Reply to this commentGreat effing experiment, I'm incorporating a similar implementation into my portfolio - creds and props to Mr doob.
Reply to this commentIs it supposed to be the voltage variation represented as a visual change on the screen?
Reply to this commentwhat program do you use to make things like this
Reply to this commenttext editor
Reply to this commentAwesomeness, the array is huge... well, still awesome.
Nice work! ;)
Reply to this commentNice work :-))
Reply to this commentgood
Reply to this commentart.
Reply to this commentPure awesomeness... Tested it with Safari 4 on Mac, and it works perfectly!
Reply to this commentLove this conceptual thing, Can wait to start interacting with these experiments more in the future, I'm off to download processing..
Reply to this commentWhy do you need processing?
Reply to this commentAnother great tool to help music learners. Let users turn on a beat meter and/or key detector in the UI?
Reply to this commentNo audio, waveform, or blue line. Just a black line that follows your cursor a little. Chrome 3.0.195.38, Windows 7.
Reply to this comment@Mr.Russell, the waveform data is hard-coded into the script as an array, so no code was there to actually parse the audio stream.
Reply to this commentyeah baby
Reply to this commentif you could totally generalize this type of visualization to any music that would be awesome-sauce!
I think there may be a good starting point in looking at the Discrete Fourier Transform of the audio signal =)
Reply to this commentthis is freaking cool.
Where does your inspiration comes from?
Not only for this one, i mean, all your experiments. lmao.
nice work.
Reply to this commentWhere DOESN'T my inspiration come from. ;)
Reply to this commentDoesn't do anything in Chrome 4.0.249.25, you only see a black 'stick' that moves a little when you move your mouse over the screen but that's all, no movement of itself, no music, no blue. Does work in firefox
Reply to this commentIt works fine here with 4.0.249.30 (Ubuntu 9.10).
Reply to this commentDo you think you could get this to work as a visualization to whatever music is coming through the speakers? And possibly invert the colors (black instead of white, white instead of black)?
Reply to this comment1. Visualise whatever music is coming through the speakers.
No.
2. Invert the colors (black instead of white, white instead of black).
Why?
Reply to this commentmake the colors change the music. and maybe make the wave color change more than just blue
Reply to this commentWhat about the new File API? Couldn't you use that??
Reply to this commentYou could, in a few months, but you couldn't access the sound spectrum anyway.
Reply to this commenti have NNNNNNNNOOOOOOOOO audio.Why dont I??????????????????
Reply to this commentNo idea... specifying which browser and version would help.
Reply to this commentI have no audio in Chrome 4.0.249.25, but it works fine in Safari 4.0.3 (531.9.1)
Reply to this commentIt works fine here with 4.0.249.30 (Ubuntu 9.10).
Reply to this commentwow, cool. I like your experiments.
Reply to this commentthere is no audio for me
Reply to this commentCan it be made to play other tracks, or is it hardcoded to the current one? I tried to hack together on my own little test with another track, but it only plays different audio; the wave form doesn't change.
Reply to this commentAs you will see on the source code, the waveform data is hardcoded.
Reply to this commentThen, yes, I saw that, I just didn't know enough to recognize it as such. Given that, though, how difficult would the process be to incorporate other tracks into this? My knowledge of JavaScript / SVGs doesn't quite extend this far.
Regardless, I really like this (hence my curiosity).
Reply to this commentIt is not hard. You can find the python code I used on my blog:
http://mrdoob.com/blog/post/677
It just won't be automatic as this is a process that you need to execute at least once per track. Whether it's locally or on your server.
Reply to this commentit would be hard, if posible, you would have to either use a java applet to read the file, which might be impossible, and not 100% javascript
Reply to this comment