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

What is Framer? Join the Community
Return to index
Pedro Ivo
Posted Dec 09 - Read on Facebook

Hey guys,

I'm trying to use Framer Studio + p5 + p5.sound, but I can't get it to work.

I've used the code provided in this topic: https://www.facebook.com/groups/framerjs/permalink/709139179213156/

But it's not working... Tried in Chrome and Safari as well, but no luck.

Any thoughts on how to achieve this?
I want to use p5.sound to create a visualizer.

Thanks.

4 Comments

Eelco Lempsink

Does the iframe method Ee Venn Soh described in the other thread work for you?

Pedro Ivo

I was able to figure it out how to use p5 + Framer Studio. There's a buggy example here: http://share.framerjs.com/gbv0tgbiplfb/

Pedro Ivo

it seems Framer Studio is not yet fully prepared to handle p5 + audio + loops to create a visualizer. It crashed a lot during the tests...

Pedro Ivo

So, it's basically this to make it work:

p5canvas = new Layer
width: Screen.width
height: Screen.height
backgroundColor: 'transparent'
p5canvas.html = "<div id='p5canvas'></div>"

myp = new p5 (p) ->
p.preload = -> p.sound = p.loadSound('audio/song.mp3');
p.setup = ->
cnv = p.createCanvas(p5canvas.width, p5canvas.height)
cnv.parent('p5canvas')

p.analyzer = new p5.Amplitude()
p.analyzer.setInput(p.sound)
p.sound.stop()

p.draw = ->
p.vol = p.analyzer.getLevel()
print p.vol

Read the entire post on Facebook