Integrate bbc/peaks.js for waveform display

[NickRuiz]

Is your feature request related to a problem? Please describe.
Sometimes when transcribing long audio files there are long pauses. From an ASR (STT) standpoint, no speech regions may be detected, but there may be a muffled word that was missed. A quick view of the waveform can help pick out audio regions to listen to.

Describe the solution you'd like
Toggle display of the waveform below the time bar

Describe alternatives you've considered
Separate waveforms per audio channel would be great.

Additional context

[pietrop]

👋 @NickRuiz

Throwing another option into the mix,

Replace the progress bar / or have an alternative progress bar in storybook using wavesurfer-js

• react-wavesurfer
• SoundCloud - Waveforms, Let's Talk About Them
• Generating Waveforms for Podcasts in Winds 2.0

The issue I see with using peak.js (and might be wrong coz I am not super familiar with the library) is that it says in the README:

Peaks.js was developed by BBC R&D to allow users to make accurate clippings of audio content in the browser, using a backend API that serves the waveform data.

And if it does need a backend to generate the waveform data it would make it harder to keep it self contained as part of the component.

[NickRuiz]

Good point. Thanks for sharing a few more-compatible alternatives.

[pietrop]

@NickRuiz I thought you might find this interesting / useful bbc/stt-align-node if you are looking for a way to review results of STT?

Click load demo- pietrop/stt-align-node in the example page.

Out of curiosity what is your main use case for the TranscriptEditor component ?

[NickRuiz]

Our transcribers/annotators use waveform display to quickly find the beginning of new "paragraphs", etc. Depending on how the ASR transcript is generated/segmented it might not be apparent when two adjacent words are separated by a long period of silence.