Add Audio Player/Waveform component

[TheOneTheOnlyJJ]

Summary

Along the lines of #13196, right now the only way to play audio in a MUI interface is to use the default HTML <audio> element, which does not conform to the Material Design guidelines. While the official MD3 docs do not cover audio players, nor are there any potential examples for us to base a component on, we could extrapolate from what I found in the docs regarding video players (#13196).

Examples

Conforming to Material Design:

• material-ui-audio-player: GitHub
• vuetify-audio-player: GitHub
• Material UI Design Audio Player: CodePen

Others:

• react-audio-player: npm
• reacgt-h5-audio-player: npm
• react-music-player: GitHub
• reaplay: GitHub
• react-use-audio-player: npm (while not a player in itself, parts of this may serve as inspiration)

Motivation

In my app, I want to play both video (so I opened #13196) and audio (so I'm opening this).

I would like to have an audio player component that conforms to Material Design (especially MD3 once that lands).

Besides the default HTML <audio> element features, the following should also be supported:

• Material Icons should be used for the individual controls (through Icon Buttons?).
• The individual controls themselves should be provided as individual options, and their order should be taken into account for maximum customizability.
• Support custom controls (along with custom icons). Side note: I intend on integrating these custom functionalities with howler.js (an amazing library) to edit the sound in-place. The UX would be very smooth if this will be possible.
• The audio progress bar could either be based on the Slider, the Linear Progress or the progress bar seen in the video component from the MD3 documentation (see Add Video Player component #13196 again). All could be supported for the best customization.

...and, last but not least, the cherry on the cake...

• Optional waveform audio progress bar.

Examples:

This could be done by integrating wavesurfer.js (maybe through wavesurfer-react) in the component. However, given that these waveforms can be styled extensively, it may be more appropriate to leverage Pigment CSS for better integration in the MUI environment. This would very likely require writing the waveform generator code from scratch. The complexities of this may require breaking the audio progress indicator down into its own separate component. Maybe code from the Charts components could be reused here to a great extent.

Writing such a waveform generator from scratch would also allow for the inclusion of functionalities provided by some of the wavesurfer.js plugins in the default implementation, and make their visuals conform to Material Design as well. The plugins that could be incorporated like this are: Regions, Hover, Envelope, Minimap and Timeline.

Having these features would make Material UI to be more accessible to music mixing/composing applications.

Search keywords: audio player players sound music wave form waveform

[oliviertassinari]

I'm closing to signal that it's unlikely. Still, the "waiting for upvotes" label is still applied, so up for considerations.