[New Plugin] Soundcloud-like Audio Player Waveform

Showcase
21

New update 25/07/2022 :

  • A new feature has been added : Export Image from your Waveform !
    It comes with an action “Generate Image”, that triggers a custom event “Image Generated” as soon as the image is uploaded into your Bubble storage.
    You can find the link of the image once it has been generated in a custom state called “Image URL” !
    Hope you’ll find it helpful !

audio-waveform
audio-waveform826×300 2.86 KB

3 Likes
22

New update 25/07/2022 :

  • New feature : you may now load a new file inside a Waveform Audio Player with the action “Load a New File” !
2 Likes
23

This is a great innovative feature :+1:

2 Likes
24

Can you add a record feature based actions? Would be great

25

Hey @yorgio1024
I’ll try!

2 Likes
26

Hey do you know if the player will keep playing in the background when I switch to another app.

1 Like
27

@wesleywsls cool plugin. Unfortunately, I’m unable to get sound on my iPhone. Are you able to fix this?

28

Hey @garet.send
I will look into this issue.
Keep you updated.

1 Like
29

Hey @garet.send ,

The issue is now fixed with this new update.
What happened is that you had the silence mode enabled on your iPhone. (the little toggle on the top-left of your phone)
It is now fixed, as the plugin ignores if the phone is in silent mode or not.
Thanks again for submitting your issue!

2 Likes
30

Big update 29/07/2022 :

  • The plugin now handles Volume Control !
    You may define the desired volume with the action “Set Volume”, get the value back in the custom state “Current Volume”, and fetch volume changes with the custom event “Volume Changed”.
    Hope you’ll like it and it’ll provide your users a better experience !
3 Likes
31

@wesleywsls thanks for the fast fix! :slight_smile:

32

You are welcome @garet.send !

33

New update 30/07/2022 :

  • 2 new actions has been added : Skip Forward and Skip Backward (X seconds).
    It allows your users to go further/backwards in an audio file loaded into a Waveform Audio Player.
    You may define the number of seconds to skip in the Waveform Audio Player Element itself.

Hope you’ll like it!

2 Likes
34

This is great :+1:

For you message under : :+1: :+1: :+1:

1 Like
35

Thank you @JohnMark !
More coming in a few minutes!

1 Like
36

Big update 31/07/2022 :

A new plugin has been added : Markers Plugin !
It allows you to display markers on a Waveform, and instantly jump to a specific section of an audio file by clicking on the desired marker.

You can take a look at this screenshot for instant comprehension

image
image1238×374 67.4 KB

It comes with a bunch of new actions/events/states and customization !

:arrow_right: Actions :
:heavy_check_mark: Create a marker

  • Time (in seconds) : the place where you want to create this marker on the audio file
  • Label : the name of the marker (font family & font color are customizable)
  • Position : “top” or “bottom” : where to display the marker relatively to the Waveform
  • Draggable : whether to make this marker draggable or not
  • Color : The color of the new marker

:heavy_check_mark: Clear all markers : allows you to clear all markers of a Waveform.

:arrow_right: Custom Events :
:heavy_check_mark: Marker Created : is fired as soon as a new marker has been created.
:heavy_check_mark: Markers Cleared : is fired as soon as the markers has been cleared.

:arrow_right: Custom States :
:heavy_check_mark: Markers Data (JSON) :

  • This represents your markers on the current Waveform in a JSON object. You have to use this field if you want to save your markers data in your database and display them at the Waveforms initialization (see below for Markers loading on initialization).

:arrow_right: Fields (in the element configuration) :
:heavy_check_mark: Enable markers plugin ?
:heavy_check_mark: Initial Markers Data

  • This is useful to load markers on your Waveform that has already been created. It has to be in the same format (JSON) that what the custom state “Markers Data (JSON)” outputs !

I also have a question for you guys : do you think it would be useful to add an action that allows you to display existing markers inside a Waveform after initialization ? It would be called something like “Display existing Markers”, and you would load them from the database (same method than “Initial Markers Data” in the plugin fields).
Tell me if this could be helpful for you, and I’ll add it!

Hope you will like this new update !

PS : Plugin price has been updated yesterday, going from $4/month to $9/month and $25 once to $52 once.

2 Likes
37

New update 02/08/2022 :

Sorry for the late response @chad, but this took a bit of time to develop.

  • The audio will now continue playing when the app is switched on mobile / desktop devices.
    Next update : native media controls on mobile devices locked screen!

Hope you like it !

2 Likes
38

New update 03/08/2022 :

  • This plugin is now fully compatible with native backend playing & media controls ! :partying_face:
    It means you may control the audio via the native lock screen controls, and even change app while the audio will continue playing.

These fields are customizable :

  • Song Title
  • Song Artist
  • Song Album
  • Artwork (Image)

Here is a small preview, on my iPhone 11 :

IMG_3098.PNG
IMG_3098.PNG828×1792 259 KB

Hope you’ll like it!

2 Likes
39

Sorry, but no sorry, it’s look great! :grin:

1 Like
40

Ahah @JohnMark :joy:
Thank you so much!

1 Like