Audio recording widget

[raphaelmenges]

We want to develop a custom audio recording widget. It should feature the following:

• Ask for the permission to use microphone.*
• Start recording.
• Stop recording.
• Store recording in the Pinia store.
• Redo recording.
• Delete recording.
• Replay recording.
• Attempt initial pipeline to come from recording aka blob over raw array of samples toward simplified waveform visualization.
• Display waveform after recording complete.
• Visualize replay of recording on the waveform.
• Display waveform while recording takes place.
• Have ability to include multiple audio recording widgets on the same page, each being unaffected by the state of other ones, and with all being saved to Pinia.

*Perhaps this can be another component like "microphone selector"? We will need that permission / media stream for all instances of the audio recording widget across the page. We could store that media stream in Pinia and reuse it.

[lschmelzeisen]

As an example, I have made a short screen recording on how WhatsApp implements both displaying the waveform of an existing audio recording, but also an ongoing recording:

audio-widget-waveform-example-whatsapp.webm

Note that the other parts of the WhatsApp audio interface, i.e., what buttons are visible in which situation also seem like very good UX examples to me.

For displaying the waveform of an existing audio recording we came up with the following pseudo code in today's meeting:

waveform component visual width = 100px
bar visual width = 2px
number of bars = 100px / 2px = 50

audio lenght = 0:35min
audio chunk = 0:35min / 50 = 0.7s

- for each audio chunk:
  - need to find out loudness of that audio chunk
- create div (whole waveform component) with 50 child divs (each a single bar)
  - assign each child div CSS height of its corresponding audio chunk
- during playback, adjust color of bars to indicate which chunks have already played