Audio waveform visualization for video and audio recording

Ionic Framework ionic-v3
1

Hello,

I want, in my Ionic app, to fulfill these two requirements:

  1. visualize the audio waveform from the audio stream of pre-downloaded short (~30secs) video.
  2. Visulze the recorded audio waveform when users record by mobile microphone. It is nice-to-have if real-time.

I was considering to use libs, such as https://wavesurfer-js.org/, but wanted to know in advance if it is viable and if somebody has done it before.

Thanks!

Br,
Danielle113

1 Like
2

This most probably can be done if there are working JS libs that display the waveform of an audio file. You “just” have to put it all together.

3

Thanks for the comment, I will give it a try when it comes.

4

please let us know if you succeeded and how.

5

I have an Ionic app that displays the audio waves with the Web Audio API. It can be done but does have some issues on older devices.

Look here to get an idea of the basics. https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API