user profile image

A basic example of using the Web Audio API AudioContext with an AnalyserNode and frequency-domain analysis (FFT) to create a simple music visualiser.


  1. The volume control doesn't work for me (Chrome 26, Win 7) - any idea why?

  2. It doesn't seem to work on Linix, the player won't play.

  3. @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.

  4. @randombrad which browser / version?

  5. This is so sick, awesome work. I want to play around with this.

  6. This is so awesome! Fucking love it.

  7. vorillaz @TheodoreVorillas on

    Great work, it also seems extreme lightweight

  8. Awesome work Justin!

  9. 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

  10. This is AMAZING!

  11. Beautifully fluid.

  12. name of the song,band?

  13. @secretgspot "intro" by The xx. It says it in the js panel.

  14. This is awesome! Great work.

  15. Hi Bro, Its really awesome. can i use this for my project?

  16. @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.

  17. @soulwire Thank you so much. I just doing a html5 mobile player so i'm using this for as cover image. Thanks again. :)

  18. great work, i have question: MP3_PATH = 'line in' therefore work with the computer audio listening, thanks.

  19. This is fantastic. How are you getting past the security issues with the AudioContext createJavaScriptNode()?

  20. @soulwire Heh.. That's pretty nice.. You might like this one.. (my first try at visualising my CSS-fractals with web-audio)

  21. This is great. I "borrowed" you analyser code for a pen that I am fiddling with.

  22. Unfortunately: 'MediaElementAudioSource outputs zeroes due to CORS access restrictions for'

  23. You can fix the CORS error by adding: @audio.crossOrigin = "anonymous"; on line 56

    and changing line 18 to MP3_PATH = ''

  24. Thanks @nickstanish, I've updated :)

  25. 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

  26. 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

  27. Code is broken. I receive this error in Chrome: "Uncaught (in promise) DOMException: Failed to load because no supported source was found."

  28. Really cool stuff, just a heads up, I couldn't get it to play at first due to CodePen going HTTPS:

  29. Fixed now—I switch to use the SoundCloud api to stream the track rather than CodePen assets

  30. it works on safari 10.0.2

  31. How can Sketch.js put the canvas inside another div?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.