[New Plugin] Soundcloud-like Audio Player Waveform

Showcase
1

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
2

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

3

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

1 Like
4

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
5

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
6

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
7

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
8

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”.

image
image738×273 3.81 KB

You can find a working example here.

1 Like
9

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

10

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

11

I check your demo and the plugin doesnt exist

12

My bad !
You may check it here

13

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
14

New update 07/07/2022

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

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
16

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
17

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
18

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
19

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
20

New update 24/07/2022 :

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