✅
Demo to preview the settings
✅
Bubble Editor: (live-editor)
✅
Live Demo: (live-demo)
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
- Place the plugin’s element “HTML5 Audio Player” on the page.
- Fill in element’s fields and you are free to use it.
Plugin element “HTML5 Audio Player”
Fields
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 |
States (Values returned by the plugin element)
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 |
Events
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. |
Actions
“Play” action
Play the audio. If the audio is already playing, it will keep playing.
“Pause” action
Pause the audio. If the audio is already Paused, it will stay Paused.
“Set Playback Position” action
Set the time of where the audio should move to.
Fields
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 |
“Set Volume” action
Set the volume of the audio.
Valid values are from 0 to 100.
For example, half volume would be 50
Fields
Title | Description | Type |
Volume Level | The valid volume value that is a number in the range of 0 to 100 | Number |
“Toggle Mute” action
Toggle the Mute on the Audio.
If the audio is mute, this action will unmute the audio. If the audio is unmute, it will mute the audio again.
“Set Playback Speed” action
Set the speed of the audio playback.
It determines how fast or slow the content is played relative to its original speed.
Fields
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 |
“Toggle Play/Pause” action
If the audio is playing, this action will pause the audio. If the audio is paused, it will play the audio again.
