Waveform Audio Player #soundcloud

Demo to preview the settings

Introduction

Plugin delivers a versatile audio playback experience reminiscent of Soundcloud, featuring a sleek waveform display and comprehensive functionality. With controls for play, pause, stop, mute/unmute, adjustable volume, and playlist support, users can seamlessly manage their audio content. Customization options allow for tailored design integration, while features like image export, speed control, markers, and dynamic event triggers enhance user engagement and navigation.

How to setup

  • Place the plugin’s element “Audio Player - Waveform” on the page.
  • Define the audio file and the colors and options you would like to have in your player.

Plugin element “Audio Player - Waveform

Fields

Title
Description
Type
Unplayed Wave Color
The color of the unplayed part of the wave.
Color
Played Wave Color
The color of the played part of the wave.
Color
Waveform Type
The type of waveform visualization.
Dropdown(Rounded,Bars,Wavy)
Cursor Color
The color of the cursor / selector. The cursor represents the current playback position within the audio file.
Color
Audio File
The audio source file.
File
Stop all instances on play
This is useful when you have multiple instances of Waveform on the same page. If this value is yes, all players currently playing will pause/stop(depends on “Stop or Pause”) when this player starts playing. If set to “no” then all instances when this player starts playing other will not stop, will continue playing simultaneously.
Yes/No
Reset when stopped
When “Stop all instances on play” is checked, then this property set to “yes” makes all other instances stop when current instance plays, set to “no” makes them pause instead.
Yes/No
Speed
The speed of the Audio Player. 1 is normal. 0.5 is 2x slower. 2 is 2x faster, etc…
Number
Muted
Set property to “yes” this box if you want the Audio Player to be muted by default.
Yes/No
Hide scrollbar
Whether to hide the horizontal scrollbar when one would normally be shown. property provides a way to customize the appearance of the WaveSurfer waveform visualization by controlling the visibility of the scrollbar within its container.
Yes/No
Hide Cursor
Hide the mouse cursor when hovering over the waveform. By default it will be shown.
Yes/No
Normalize
Normalization ensures that the loudest part of the audio reaches a specified level without clipping or distortion, thereby improving the overall clarity and consistency of the audio playback.
Yes/No
Skip Length
Number of seconds to skip with skipForward and skipBackward actions.
Number
Preload Peaks
Check this box if you want to preload the peaks from your database for instant-rendering. By supplying this data, WaveSurfer can render the waveform more quickly and smoothly, as it doesn't have to calculate the peaks itself from the audio file.
Yes/No
Peaks Data (JSON fromat)
(Optional) This field will be the peaks of the current audio file as JSON format when “Preload Peaks”. It has to be the same output as what the custom state "Peaks Data (JSON)" outputs !
Text
Consider Audio as Played (sec)
Number of seconds that the audio has to be played to be considered as played. Once this number of seconds has been reached on the current audio, the event "Current Audio File can be considered as Played" will be fired. It may help you to build a listening counter feature.
Number
== Plugins Additional Features ==
Cursor Plugin
Determines whether the cursor feature is enabled or not. When enabled, player displays a vertical line that moves along with the users’s directions on the audio file. When disabled, this cursor line is not displayed.
Yes/No
Cursor Color
This property defines the color of the cursor line.
Color
---Markers - - -
Markers Plugin
This property determines whether the markers feature is enabled or not. When enabled, player allows users to add markers to the waveform, indicating specific points of interest, such as song sections or timestamps.
Yes/No
Initial Markers
(Optional) This property represents the initial set of markers that are loaded when player initializes. It has to be in JSON format, exactly the same that what the custom state "Markers Data (JSON)" gives you as output.
Text
---Media Session-—
Media Session
This property determines whether the integration with the Media Session API is enabled or not. The Media Session API provides metadata about the currently playing media to the operating system, allowing for better integration with system controls such as playback controls on lock screens or notifications.
Yes/No
Title
(Optional) The song title.
Text
Artwork (Image)
(Optional) The image that will be displayed.
Image
Artist
(Optional) The artist.
Text
Album
(Optional) The album.
Text
Only download on start? 💬 ⚠️.
⚠️ WARNING: If you are not using the Peaks Data, the waveform will NOT be displayed until the user clicks on "Start". When this option is enabled, the audio file will only start downloading when the start function is called. This avoid downloading long lists and improve performance. If you have a web page with multiple WaveSurfer instances but you don't want to fetch all the audio files immediately upon loading the page, setting thsi property to “unchecked” allows you to fetch audio files only when the WaveSurfer component is initialized.
Checkbox
Allow Downloading
Enables the audio to be downloaded by users
yes/no

Returned Values

Title
Description
Type
Is Playing
Indicates whether the media player is currently playing
Yes/No
Current Time (s)
Represents the current playback position in the media, measured in seconds.
Number
Total Duration (s)
Denotes the total duration of the media in seconds.
Number
Current Speed
Indicates the current playback speed of the media, such as 1x, 1.5x, or 2x.
Number
Is Muted
Indicates whether the media is currently muted
Yes/No
Is Loading
Indicates whether the media player is currently loading data, which might be useful for showing loading spinners or progress bars.
Yes/No
% Loaded
Represents the percentage of the media that has been loaded. This can be useful for displaying a progress indicator during loading.
Number
Image URL
An image representation of a waveform generated in action "Generate Image”
Text
Current Volume (/1)
Represents the current volume level of the media.
Number
Markers Data (JSON)
Contains data about markers associated with the media.
Text
Peaks Data (JSON format)
Contains precomputed peak data for the audio waveform, which can be used for visualizing the waveform more efficiently.
Text
Current Audio File can be considered as Played
Indicates whether the media is considered "played" based on the provided time in the fields.
Yes/No
Playlist - Number of Songs to be Played Next
Indicates the number of songs in a playlist or queue that are scheduled to be played next.
Number
Playlist - Title of Songs to be Played Next
Contains titles or names of songs in a playlist or queue that are scheduled to be played next.
Text List

Events

Title
Description
Started Playing
This event occurs when the audio playback starts.
Stopped Playing
This event occurs when the audio playback stops.
Has been Muted
This event occurs when the audio is muted.
Has been Unmuted
This event occurs when the audio is unmuted.
Is Loaded
This event indicates that the audio file is fully loaded and ready for playback.
Finished Playing
This event occurs when the audio playback reaches its end.
Image Generated
This event occurs when an image representation of the waveform is successfully generated and ready for use/display.
Volume Changed
This event occurs when the volume of the audio changes.
Marker Created
This event occurs when a marker is created on the waveform.
Markers Cleared
This event occurs when all markers on the waveform are cleared.
Peaks Loaded (ready to be saved in DB)
Is fired as soon as the peaks are loaded, saved into state "Peaks Data (JSON format)" and ready to be saved in database.
Current Audio File can be considered as Played
Is fired as soon as the current audio file has been played more than X seconds (defined in the Waveform settings).

Actions

Start

Stop

Pause

Set Speed

Set Muted

Generate Image

Load New File

Set Volume

Skip Forward

Skip Backward

Create Marker

Clear all Markers

Play Previous Track

Play Next Track

Add a new Song to the Playlist

Clear Playlist Queue

Remove a Song from the Playlist by its Name

Changelogs

Update: 20.05.24 - Version 1.46.0

  • Fixed "Allow Downloading" option

Update: 15.05.24 - Version 1.45.0

  • New “Allow Downloading” field

Update: 30.04.24 - Version 1.43.0

  • "Start" action fixed

Update: 20.04.24 - Version 1.40.0

  • "Only download on start" and "Start" action fixed

Update: 10.04.24 - Version 1.39.0

  • Fixed saving empty Peaks data

Update: 09.04.24 - Version 1.38.0

  • Compressed peaks data. Fixed the "Mute" option

Update: 08.03.24 - Version 1.37.0

  • Acquired by zeroqode

Update: 13.12.23 - Version 1.36.3

  • Last

Update: 11.12.23 - Version 1.36.2

  • Fix

Update: 10.12.23- Version 1.36.1

  • Update

Update: 08.12.23 - Version 1.36.0

  • Bug fix

Update: 08.12.23 - Version 1.35.7

  • Update

Update: 23.11.23 - Version 1.35.6

  • No flickering anymore when not downloading source file on page load

Update: 01.11.23 - Version 1.35.5

  • Peaks Data is now updated when uploading a new audio file

Update: 10.08.23 - Version 1.35.4

  • Small update

Update: 28.07.23 - Version 1.35.3

  • Bug fix

Update: 28.07.23 - Version 1.35.2

  • Fix

Update: 28.07.23 - Version 1.35.1

  • Push

Update: 27.07.23 - Version 1.35.0

  • Small fix

Update: 27.07.23 - Version 1.35.0

  • Small fix about waveform length

Update: 27.07.23 - Version 1.35.0

  • Improvements & Optimizations

Update: 27.07.23 - Version 1.34.3

  • Transfer to Flusk

Update: 27.07.23 - Version 1.34.2

  • Small fix

Update: 27.07.23 - Version 1.34.1

  • Only download on start now also works with preloaded peaks

Update: 27.07.23 - Version 1.34.0

  • New feature (optional) : only download file on start

Update: 14.07.23 - Version 1.33.8

  • Stable version

Update: 14.07.23 - Version 1.33.7

  • Small fixes

Update: 17.03.23 - Version 1.33.6

  • CORS rollback + lib @stable

Update: 17.03.23 - Version 1.33.5

  • CORS update

Update: 17.03.23 - Version 1.33.4

  • Rollback lib

Update: 20.12.22 - Version 1.33.3

  • Commented code

Update: 17.11.22 - Version 1.33.2

  • Waveform is now refreshed dynamically

Update: 06.09.22 - Version 1.33.1

  • CORS fix

Update: 06.09.22 - Version 1.33.0

  • Small fix while using inside repeating groups

Update: 06.09.22 - Version 1.32.0

  • Current audio file is now synchronised to data source

Update: 06.09.22 - Version 1.31.0

  • Fixed issue when played inside a popup

Update: 18.08.22 - Version 1.30.1

  • Small fix about auto-play

Update: 18.08.22 - Version 1.30.0

  • Small fix

Update: 13.08.22 - Version 1.29.0

  • Added Playlist support

Update: 11.08.22 - Version 1.28.0

  • Small fix

Update: 08.08.22 - Version 1.27.0

  • Added "Consider an Audio File as Played"

Update: 08.08.22 - Version 1.26.4

  • Updated description

Update: 05.08.22 - Version 1.26.3

  • Mini-fix

Update: 05.08.22 - Version 1.26.2

  • Small fix for "Load new file" action

Update: 04.08.22 - Version 1.26.1

  • Updated Description

Update: 04.08.22 - Version 11.26.0

  • Plugin now accept files stored outside Bubbles database (Enable CORS access)

Update: 04.08.22 - Version 1.25.0

  • Added Peaks preloading

Update: 03.08.22 - Version 1.24.0

  • Native controls & backend playing are now working

Update: 02.08.22 - Version 1.23.0

  • Now using backend element to keep audio playing while changing app

Update: 31.07.22 - Version 1.22.0

  • Added Markers

Update: 31.07.22 - Version 1.21.0

  • Fix

Update: 31.07.22 - Version 1.20.0

  • Small fix

Update: 30.07.22 - Version 1.19.0

  • Fix

Update: 30.07.22 - Version 1.18.0

  • Added skip forward and skip backward actions

Update: 30.07.22 - Version 1.17.0

  • Fix

Update: 29.07.22 - Version 1.16.0

  • Added volume control

Update: 29.07.22 - Version 1.15.0

  • Ignore silence mode on iOS devices has been added

Update: 25.07.22 - Version 1.14.1

  • Updated description

Update: 25.07.22 - Version 1.14.0

  • It is now possible to load a new file inside a Waveform Audio Player

Update: 25.07.22 - Version 1.13.0

  • Added Image Waveform export (jpeg & png)

Update: 24.07.22 - Version 1.12.0

  • Now possible to use audio that are not directly imported from Bubble

Update: 24.07.22 - Version 1.11.1

  • Updated description

Update: 21.07.22 - Version 1.11.0

  • Added partial render to improve loading time for heavy audio files

Update: 19.07.22 - Version 1.10.1

  • It is now useable inside a popup

Update: 18.07.22 - Version 1.10.0

  • Added normalization option

Update: 10.07.22 - Version 1.9.1

  • Fix

Update: 10.07.22 - Version 1.9.0

  • Added "Finished Playing" event

Update: 09.07.22 - Version 1.8.0

  • Added Cursor Plugin

Update: 07.07.22 - Version 1.7.0

  • Added auto-resize responsive when window is resized

Update: 05.07.22 - Version 1.6.0

  • Added show/hide cursor and show/hide scrollbar

Update: 03.07.22 - Version 1.5.0

  • Added is_loaded, %_loaded custom states. Also added "Is Ready" event.

Update: 03.07.22 - Version 1.4.0

  • Added mute / unmute actions and events

Update: 02.07.22 - Version 1.3.0

  • You can now define the speed of a Waveform Audio Player

Update: 02.07.22 - Version 1.2.1

  • Fix

Update: 02.07.22 - Version 1.2.0

  • All instances of waveform player can now auto-stop when a new one is starting.

Update: 01.07.22 - Version 1.1.0

  • Works now with multiple instances of the element in the same page (i.e: RepeatingGroups)

Update: 22.06.22 - Version 1.0.1

  • Updated description

Update: 15.06.22 - Version 1.0.0

  • Second Commit
Share
Content