HTML5 Audio Player

✅

Plugin page: https://zeroqode.com/plugin/html5-audio-player-plugin-for-bubble-1708476724316x957166869038236400

Demo to preview the plugin:

✅

Live demo: https://audio-player-demo.bubbleapps.io/

✅

Bubble Editor: https://bubble.io/page?version=live&name=player&id=audio-player-demo&tab=Design&type=page&elements=cmNBL

Introduction

The HTML5 Audio Player plugin provides a versatile and customizable audio playback component for your web applications. It combines a ready-to-use Bubble element interface so you can move from setup to production quickly. Use it to reduce custom development time, keep configuration flexible, and ship a polished experience faster.

How to setup

Step 1 - Install the Plugin

Step 2 - Add the Element to Your Page

Step 3 - Configure Properties

Plugin Element - HTML5 Audio Player

HTML5 Audio Player helps your app deliver a faster and clearer user experience for this feature. HTML5 Audio Player is the part users interact with to run this functionality directly on the page. Use it to configure behavior quickly and launch a polished flow without extra custom code.

Name	Description	Type
Audio Link	The Audio file to use. You can either upload a static audio file or provide a dynamic link.	file
Auto Play	If the audio should automatically start playing once it loads. Some browsers won’t allow this functionality all the time.	yes/no
Hide Native Controls	Hide the native Audio Player controls such as Play, Pause, Volume, etc. In some browsers this will hide the entire plugin from the page, but it can still be used to play audio.	Checkbox
Disable Right Click Menu	Disable the ability to right click on the audio player and see the Context Menu options	Checkbox
Remove Download Button in Chrome	Remove the Download button in Google Chrome	Checkbox
Start Playing at Second	Start the audio player at a particular second instead of the beginning	number
Stop Playing at Second	Pause the audio player when the playback position reaches a particular second	number
Volume	The level of the audio file sound. Valid values are from 0 to 100.	number
Looped	Determines if the audio will start over again once it has finished.	yes/no

Name	Description	Type
Is Playing	If the Audio is currently playing	yes/no
Is Paused	If the Audio is currently Paused	yes/no
Playback Position	The current Playback Position of the Audio	number
Audio Length	The length of the current Audio in seconds	number
Volume	The level of the audio file sound. Valid values are from 0 to 100.	number
Is iOS Device	Detects if the current device is an iPhone, iPad, or iPod. This state can be particularly useful for handling audio volume issues on iOS devices, where certain audio functionalities may behave differently or require specific handling.	yes/no

Name	Description
Audio Ended	Triggers when the audio playback has ended
Started To Play	Triggers when the audio starts playing after having been paused or stopped for buffering
Paused	Triggers when the audio is paused
Seek Operation Completed	Triggers when the user is finished skipping to a new position in the audio
Seek Operation Begins	Triggers when the user starts skipping to a new position in the audio
Playback Position Updated	Triggers when the playback position of the audio has changed
Volume Changed	Triggers when the volume of the audio has changed
Media Loaded	Triggers when the browser has finished loading the audio
Media Loading Started	Triggers when the browser has started loading the audio
Time Updated	Triggers when the playback position of the audio has changed
Error Occurred	Triggers when an error occurs while trying to load the audio file. This could be due to the file format not being supported or the location of the file not being found.

HTML5 Audio Player

Demo to preview the plugin:

Introduction

How to setup

Step 1 - Install the Plugin

Step 2 - Add the Element to Your Page

Step 3 - Configure Properties

Plugin Element - HTML5 Audio Player

Fields

Exposed States

Element Events

Workflow example

Changelogs

Update 25.06.26 - Version 2.1.0

Update 11.03.26 - Version 2.0.0

Update 09.07.25 - Version 1.15.0

Update 20.06.25 - Version 1.14.0

Update 16.06.25 - Version 1.13.0

Update 24.01.25 - Version 1.12.0

Update 19.11.24 - Version 1.11.0

Update 23.07.24 - Version 1.10.0

Update 13.06.24 - Version 1.9.0

Update 28.02.24 - Version 1.8.0

Update 26.02.24 - Version 1.7.0

Update 21.02.24 - Version 1.6.0

Update 21.02.24 - Version 1.5.0

Update 08.07.23 - Version 1.4.1

Update 12.03.21 - Version 1.4.0

Update 16.02.21 - Version 1.3.2

Update 03.02.21 - Version 1.3.1

Update 08.01.21 - Version 1.3.0

Update 24.04.20 - Version 1.2.4

Update 24.04.20 - Version 1.2.3

Update 22.04.20 - Version 1.2.2

Update 21.04.20 - Version 1.2.1

Update 01.07.19 - Version 1.2.0

Update 12.06.19 - Version 1.1.3

Update 09.06.19 - Version 1.1.2

Update 09.06.19 - Version 1.1.1

Update 10.02.19 - Version 1.1.0

Update 29.01.19 - Version 1.0.0