3

I am recording audio from microphone in a browser using MediaStream Recording API. I would like to provide user with a visual feedback of a pulsating microphone icon. Something like this, only tied to the actual sound amplitude from the mike. https://codepen.io/megwayne/pen/bWOYEj How do I do this?

I am recording audio like this:

    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];

    mediaRecorder.addEventListener("dataavailable", event => {
      audioChunks.push(event.data);
    });
Irina Rapoport
  • 1,404
  • 1
  • 20
  • 37
  • you only have to toggle the `animation` CSS property from `pulse 3s` to `none`, and vice versa. – Raptor Apr 07 '22 at 02:49
  • Yes, but my question is about MediaStreamRecording API. – Irina Rapoport Apr 07 '22 at 02:58
  • However, since you mentioned it, perhaps you could help me with this. How do I modify the CSS to make this mike about 5 times smaller and fit it in a toolbar? Pressing it would toggle recording on and off. – Irina Rapoport Apr 07 '22 at 02:59

0 Answers0