Search code examples
animationsvgcss-animationsmediasvg-animate

Animate SVG element while user speaks in microphone

My goal is to make a fancy animation in SVG element provided by designer, while user activates and speaks in his microphone. Something similar you might have seen in chat apps like Telegram, Skype, WhatsApp etc.

Here is picture from designer (made in Figma).

Unfortunately, I couldn't find any similar solution on internet even though I was looking for it for hours ☹️. Any similar examples or at least direction to study would be highly appreciated.

I am working in Vue 3 if it matters.

Solution

  • I'm not sure if I understand correctly what needs to be done, but you can try the following:

    • Add two < img > tags to your template, one for each picture.

      <template>
    <img v-if="speaking" src="speaking.png" />
    <img v-else src="not-speaking.png" />
</template>

    • Add a data property speaking to your component's data, and initialize it to false.

      <script>
export default {
    data() {
      return {
        speaking: false,
      };
    },
    ...
 };
</script>

    • Use the analyser.getByteFrequencyData(dataArray) method to check if the user is speaking or not.

      setInterval(() => {
  analyser.getByteFrequencyData(dataArray);
  if (dataArray[0] > 20) {
    this.speaking = true;
  } else {
    this.speaking = false;
  }
}, 50);

    You can check this for more information: https://www.npmjs.com/package/vue-capture/v/0.1.3