I’d like to share with you how to make prototypes which can react to voice in Framer. My goal is to give you the tools to make VUI (voice user interface) prototypes fast and easy, in Framer.

In Framer, you can make any layer (to be more precise, layer’s property) react to voice. By reacting to voice I mean reacting to the voice input volume that the microphone receives.

Here’s a simple demonstration of the voice-enabled prototype. You can play around with it, change some properties, etc. It’s all up to you 😉

How it works?

To make all the magic happen I’ve used Web Audio API to handle all the audio related stuff.

You can actually read a few great articles on the internet to dive more into the topic if you’re interested. I’ve provided links to some helpful articles at the end of this article.

Please, note: the prototype works only in the browsers which support Web Audio API. That means that, most likely, you’ll need to run it on desktop.

I’ve also added some comments to the code of the demo prototype. So you could better understand how everything works.

How to use it?

Next I’ll explain how you can use the code from the prototype in your own creations.

Let’s take a look at the respondToVoice function.

As you can see, this function takes layer as a parameter. This layer here is what actually be ‘reacting’ to voice input and changing in the ways you want. In example below, we’ll be changing scale and border width of our layer according to input voice volume .

There is a couple of lines of code that are interesting to us:

What’s being done here is that we’re setting the property value according to the current input volume. How does it actually work? Our layer has 2 states: inactive and active. We need to animate it between the properties of these states. To do this, I’ve used Utils.modulate function:

1. It takes incoming sound volume as the first parameter,

2. and maps it from [0, MAX_VOLUME] range to value range between properties of active and inactive states. MAX_VOLUME is the maximum value of the input sound volume.

Here’s an illustration which shows what is actually happening:

Mapping Input Voice Volume Value to Layer’s Property Value

In the case above, I am mapping the scale and border width of the layer according to current sound input volume.

Well, we got our properties that we need the layer to transform to. What do we do next? Animate! 🎉🤘

Above you can see a chunk of code, which actually makes our layer animated according to the input volume. I’ve added some animation options such as curve and time so that transition looks more smooth and fluid. You can try to edit these values and get other interesting results, if you’d like to 😉

After we created the animation for our layer, we need to loop it. We do this, because the voice input we’re getting is continuous. Thereby, we need to constantly animate our layer:

One small note before I wrap up the article: don’t forget that you can play around with different variable values in the prototype. I’d pay attention to MAX_VOLUME variable, if you want the layer to be less ‘sensitive’ and ‘responsive’.

So yeah, that’s kind of it.

Don’t forget to check out the prototype, and create awesome things! There is certainly a lot of cool things that you can make: for example, a full-fledged prototype of voice-enabled personal assistant (you just need to add SpeechRecognition API, and voila!).

I hope that I’ve saved you a little bit of time 🕐