buddypond icon indicating copy to clipboard operation
buddypond copied to clipboard

Create new `waveform` `Card` for rendering audio waveforms in chat messaging windows

Open Marak opened this issue 3 years ago • 2 comments

Currently Buddies can send each other short audio clips by clicking "Insert Audio" in chat controls.

When this sound is sent to the chat room a link appears saying "Play" that Buddies can click to open App.SoundRecorder and listen to the audio file.

It would be better instead if there was an embedded audio player in the chat window with a play button ( so Desktop won't have to open App.SoundRecorder window ). This audio embed should have visual of spectrum analyzer of audio file ( all done client-side ).

Screen Shot 2022-04-10 at 2 06 35 AM Screen Shot 2022-04-10 at 2 09 49 AM

Marak avatar Apr 10 '22 06:04 Marak

Image

There now exists a Card for audio playback called audio ( see screenshot )

We should create a new card called waveform that uses https://wavesurfer.xyz/ in order to render a waveform with start / stop playback instead of the default audio element playback.

see: https://github.com/buddypond/buddypond/tree/master/v5/apps/based/card/cards/audio

Marak avatar Sep 22 '25 00:09 Marak

I've added a new waveform card such that we can keep the audio as-in.

The new card is here: https://github.com/buddypond/buddypond/tree/master/v5/apps/based/card/cards/waveform

I have added a dev flag when running locally so that waveform is now the default card for any audio files We have vendored wavesurfer library.

Now we'll need to test the integration more and choose good configuration options for the Wavesurfer instance, see: https://wavesurfer.xyz/examples/?all-options.js

Marak avatar Sep 24 '25 22:09 Marak