This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Joshua Tucker
Posted May 14 - Read on Facebook

Been working on figuring out all the kinks with this for quite sometime – figured I'd share! It's not perfect, but it's a great start – maybe some of you can take it further! With HTML5 Audio, WebkitAudio, and some Paper.js (for the sine wave), I am able to visualize audio with Framer in both a frequency bars format and in a sine wave. The Framer project is linked below. Couple of things to note:

- The project needs to be mirrored to Google Chrome due to certain API restrictions and for full functionality
- At the bottom of the project, there is a list of all the links I could remember using to help make this happen
- The last link is a very important one for me personally (really want to figure it out!) If you want to dive into making that part happen with me, let me know

My brain hurts, haha, I'm off for a little bit! :). Moral of the story: really work hard at learning the math. It opens doors.

http://cl.ly/0p1d0y0d430P

15 Comments

Ryan Gonzalez

This is wonderful! Love seeing this kind of stuff in the community.

Joshua Tucker

You and Ryhan Hassan were both inspirations for even looking into HTML5/Webkit Audio API. After digging a little, I came up with an idea on how I wanted to use it and started working. What did I get myself into...haha. This is only the beginning.

Mohamed Tedjani Meftah

this is cool, I was about to give up trying to make a webgl layer, this gave me a push, thank you :)

Rafael Puyana

This is amazing.

Joshua Tucker

Mohamed Tedjani Meftah Right on man! That's awesome. Keep us posted on what you're working on. I'd love to see your awesome work!

Jorn van Dijk

This is fantastic.

Simon Lessing

Mohamed Tedjani Meftah a prebaked webGl in a Framer file would be super nice!

Dean Broadley

Jorn van Dijk this is so sweet! thanks for posting! May I ask, where would be a good place to start learning when going down this path? Or even somewhere i can find something to pick apart to learn from?

Mike Feldstein

I love how framerjs is like a gateway drug.

Mike Feldstein

also the cloudly link is broken.

Joshua Tucker

Mike Feldstein Oh no! Does this one work? http://cl.ly/ZNLP

Dean Broadley

Joshua That one works just peachy! :)

Mike Feldstein

Looks very cool. Also for those interested in the mathier side of things, here's a really dope and friendly explanation of how the FFT (what makes the frequency values used in the visualization) works. http://jackschaedler.github.io/circles-sines-signals/index.html I highly recommend it. I read it in a few short sittings and it made a lot of stuff really click.

Joshua Tucker

Mike Feldstein Thanks for sharing Mike! I may have stumbled upon this during my "learn the math phase" when I first tackled this project. Agreed in the simplicity in explanation, in light that it is incredibly complex. I still struggle with the calculations Ian's the meaning, but it gave me an opportunity to get started experimenting, where I could learn a little more each time :).

Josef Richter

Hey Joshua Tucker have you been able to make this work on actual iPhone? I've made a prototype based on yours, works OKish in Chrome but not on iPhone (no curve animation). Is there something iPhone cannot do and Chrome can? Thanks

http://share.framerjs.com/d90uad80r0h3/

Read the entire post on Facebook