[New Plugin] Soundcloud-like Audio Player Waveform

Hi all!

I just released a new plugin a few days ago that allows you to display an Audio Player that has a “wave-form”, exactly what Soundcloud has.
You just have to fill the audio file, and the image & player generates automatically.

If returns multiples states, such as :
:heavy_check_mark: Audio Waveform’s Is Playing
:heavy_check_mark: Audio Waveform’s Current Time (s)
:heavy_check_mark: Audio Waveform Total Duration (s)

You can manage the player with the following actions :
:heavy_check_mark: Start an Audio Waveform
:heavy_check_mark: Pause an Audio Waveform
:heavy_check_mark: Stop an Audio Waveform

And it also fires custom events, such as :
:heavy_check_mark: Audio Waveform Started Playing
:heavy_check_mark: Audio Waveform Stopped Playing

You can find demo & editor links just below :
:link: Editor : Weswas | Bubble Editor
:link: Preview/Demo : https://weswas.bubbleapps.io/version-test/waveform-audio-player/1656849100310x367616790810134200

If you have any question or would like to see a new feature in this plugin, feel free to contact at wesley@ottho.fr

Hope you’ll enjoy it! :slight_smile:

2 Likes

Looks beautiful :heart_eyes: is possible put the velocity as x1.5 and x2 like whatsapp?

Thanks!
I’ll try to do it.
I keep you updated!

1 Like

New update 01/07/2022

  • You are now able to display multiple instances of the Player within the same page, for example inside Repeating Groups.
2 Likes

New update 02/07/2022

  • You can now enable the option to auto-stop or auto-pause all Audio Players when an another Audio Player starts playing. It can be very useful in the case you have multiple Audio Players on the same page.
    You can see a working example by clicking here
2 Likes

New update 02/07/2022 answering to @yorgio1024 's request :

  • You may now define the speed of a Waveform Audio Player.
    You can define in the element, but also change it dynamically with an action call “Set Speed of a Waveform Audio Player” by specifying a number between 0 and infinite.
    The smaller the number, the slower the audio will play. 1 is normal.
2 Likes

New update 03/07/2022

  • You are now able to mute or unmute a Waveform Audio Player.
    An action has been added “Set Muted an Audio Waveform Player” that allows you to dynamically mute or unmute a player.
    Two custom events have also been added : “Has been Muted” and “Has been Unmuted”.
    Hope it will help you building your project!

image

2 Likes

New update 03/07/2022

  • You are now able to check if a Waveform Audio Player is loaded, and if not to get its loading percentage with custom states “Is Loaded” and “% Loaded”. It also fires an event called “Is Loaded”.

You can find a working example here.

1 Like

Thanks for this awesome update, but the demo not work for me

Hi @yorgio1024
Could you tell me more precisely what doesn’t work ?

I check your demo and the plugin doesnt exist

My bad !
You may check it here

New update 05/07/2022 :

  • You are now able to define if you want to show the cursor when a user is hovering a Waveform Audio Player, and also to define if you want to show a scrollbar, if it is needed.

image

3 Likes

New update 07/07/2022

  • Responsive improvement : you now have an option to automatically resize the Waveform when the window is resized.
3 Likes

New update 09/07/2022

  • A new add-on has been added to the plugin : you may now enable the cursor add-on. It’s the white line helping you to go to the place you’d like. Take a look at the GIF !

ezgif.com-gif-maker (3)

3 Likes

New update 10/07/2022 :

  • A new event has been added : “When a Waveform Audio Player has Finished Playing”. It allows you to perform any action as soon as the user played the audio file until the end.

More coming soon ! :slight_smile:

2 Likes

New update 18/07/2022 :

  • A new option has been added : you are now able to normalize by the highest peak instead of 1.

Hope you’ll like it !

2 Likes

New update 19/07/2022 :

  • The Waveform Audio Player is now useable inside a popup. There was a bug that made this use-case not possible before this update. Sorry for that and thanks to the one that reported it.
3 Likes

New update 21/07/2022 :

  • Performance improving : you now have choice to enable partial render to use the PeakCache to improve rendering speed of large waveforms.
    Hope it helps !
3 Likes

New update 24/07/2022 :

  • It is now possible to use audio files imported from links other than AWS S3.
3 Likes