A basic example of using the Web Audio API AudioContext with an AnalyserNode and frequency-domain analysis (FFT) to create a simple music visualiser.
The volume control doesn't work for me (Chrome 26, Win 7) - any idea why?
It doesn't seem to work on Linix, the player won't play.
@thebabydino it's because the MediaElementAudioSourceNode is connected to the destination of the AudioContext (line ~83) so the audio element isn't entirely controlling the output. I'll check what the best workaround might be.
@randombrad which browser / version?
This is so sick, awesome work. I want to play around with this.
This is so awesome! Fucking love it.
Great work, it also seems extreme lightweight
Awesome work Justin!
Chrome Version 26.0.1410.43 on OSX 10.8.3. volume control not working :/ Nothing in Jscript console no warning or error. doesn't work either. Btw cool work. inspiring :) thanks
This is AMAZING!
name of the song,band?
@secretgspot "intro" by The xx. It says it in the js panel.
This is awesome! Great work.
Hi Bro, Its really awesome. can i use this for my project?
@jeyachanthuruj go for it. I made it as a base for myself to build more complex visualisations to feel free to do the same with it.
@soulwire Thank you so much. I just doing a html5 mobile player so i'm using this for as cover image. Thanks again. :)
great work, i have question:
MP3_PATH = 'line in'
therefore work with the computer audio listening, thanks.
@soulwire Heh.. That's pretty nice.. You might like this one.. http://codepen.io/pixelass/pen/sdjLH. (my first try at visualising my CSS-fractals with web-audio)
This is great. I "borrowed" you analyser code for a pen that I am fiddling with.
Unfortunately: 'MediaElementAudioSource outputs zeroes due to CORS access restrictions for https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3'
You can fix the CORS error by adding: @audio.crossOrigin = "anonymous"; on line 56
@audio.crossOrigin = "anonymous";
and changing line 18 to MP3_PATH = 'http://crossorigin.me/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3'
MP3_PATH = 'http://crossorigin.me/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3'
Thanks @nickstanish, I've updated :)
Oh F**k yeah. I am doing some audio visualization stuff of my own right now, getting stuck on CORS errors from s3...
This is awesome though man
So I have an audio tag which changes songs every few minutes, is there an easy way to set this up with my existing setup? Noob when it comes to audio stuff, here
Code is broken. I receive this error in Chrome:
"Uncaught (in promise) DOMException: Failed to load because no supported source was found."
Really cool stuff, just a heads up, I couldn't get it to play at first due to CodePen going HTTPS: https://blog.codepen.io/2017/03/31/codepen-going-https
Fixed now—I switch to use the SoundCloud api to stream the track rather than CodePen assets
it works on safari 10.0.2
How can Sketch.js put the canvas inside another div?
Need to know how to enable it? Go here.