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

What is Framer? Join the Community
Return to index
Hans Kristian Smedsrød
Posted Dec 08 - Read on Facebook

Hello friends! Do you know if it's possible to use audio as an input source in Framer? I want to trigger an animation based on volume from the mic.

4 Comments

Paul Holliday

Your doing framer now Hans Kristian Smedsrød!

Heni Amundsen

yeah with p5.js and the p5.sound library
https://p5js.org/reference/#/libraries/p5.sound

you can import p5 with this code
thanks to Ee Venn Soh for the code

designing for a 360x640 Android phone,

In JS:
// Setup your canvas
var p5canvas = new Layer({
width: 360*4,
height: 640*4,
background: ‘transparent’
});

// Create an empty div to serve as an anchor point
p5canvas.html = "<div id='p5canvas'></div>";

// Using Framer selector API
var sketch = p5canvas.querySelector('#p5canvas');

// p5.js
function setup() {
// Matching canvas size
var cnv = createCanvas(360*4, 640*4);

// Using p5 parent API to nest it within #p5canvas
cnv.parent(sketch);
}

Heni Amundsen

there is also a Speech Recognition so you could talk to your prototypes

https://p5js.org/libraries/

Hans Kristian Smedsrød

Do you know of any examples out there I could have a look at?

Read the entire post on Facebook