Demo to preview the settings

✅

Bubble Editor: https://bubble.io/page?version=live&id=audio-player-demo&name=&tab=tabs-1

✅

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

Introduction

The HTML5 Audio Player is a versatile tool that allows you to play audio in various formats supported by HTML5. You have the option to upload your own static file or use a dynamic link as the audio source. This player provides a seamless audio playback experience for your website or application.

How to setup

Plugin element “HTML5 Audio Player”

Title	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
Looped	Determines if the audio will start over again once it has finished.	Yes/No
Remove Download Button in Chrome	Remove Download Button in Chrome	Checkbox
Start Playing at Second	(Optional) Start the audio player at a particular second instead of the beginning	Number
Stop Playing at Second	(Optional) Stop Playing at Second	Number
Volume	The level of the audio file sound. Valid values are from 0 to 100.	Number

Title	Description	Type
Is Playing	Checks if the Audio is currently playing	Yes / No
Is Paused	Checks if the Audio is currently Paused	Yes / No
Playback Position	Returns the current Playback Position of the Audio	Number
Audio Length	Returns the length of the current Audio in seconds	Number
Volume	Returns the current Volume of the Audio Player	Number

Title	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
Media Loading Started	Triggers when the playback position of the audio has changed
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.

Title	Description	Type
Position	The specific point/time within the audio file where the timeline will be set/starts playing. Keep in mind that it takes value as seconds.	Number

Title	Description	Type
Volume Level	The valid volume value that is a number in the range of 0 to 100	Number

HTML5 Audio Player

Demo to preview the settings

Introduction

How to setup

Plugin element “HTML5 Audio Player”

Fields

States (Values returned by the plugin element)

Events

Actions

“Play” action

“Pause” action

“Set Playback Position” action

“Set Volume” action

“Toggle Mute” action

“Set Playback Speed” action

“Toggle Play/Pause” action

Title	Description	Type
Speed	The playback speed is expressed as a multiplier of the original speed. Ex: 1.5 Does not take negative values, for slower audio use values from 0-1 (Ex: 0.1)	Number