MARKETPLACE
PLUGINS
AUDIO PLAYER CUSTOMIZABLE
Audio Player Customizable logo

Audio Player Customizable

Published January 2025
   •    Updated June 2025

Plugin details

## Description This plugin provides an advanced audio player with decibel visualization for Bubble.io applications. It allows users to play audio files while displaying an animated waveform that represents the audio's decibel levels in real-time.

## Features
- Audio playback controls (play, pause, stop)
- Decibel level visualization
- Waveform display of the entire audio track
- Customizable visualization colors and styles
- Support for multiple audio formats (MP3, WAV, OGG)
- Responsive design that adapts to container size
- Seek functionality through the waveform
- Volume control with visual feedback
- Time display (current time / total duration)

## View Demo: https://audio-player-33568.bubbleapps.io/version-test

## View in Editor: https://bubble.io/page?id=audio-player-33568

## Properties
### Audio Settings
- `audio_source`: URL or file upload for the audio file
- `autoplay`: Boolean to control automatic playback
- `loop`: Boolean to enable/disable track looping
- `initial_volume`: Number (0-100) for starting volume level

### Visualization Settings
- `waveform_color`: Color picker for the main waveform
- `progress_color`: Color for the played portion of the waveform
- `background_color`: Background color of the visualization (the element´s background color)
- `visualization_style`: Dropdown (Bar, Line, Wave)
- `bar_width`: Number for width of visualization bars
- `bar_spacing`: Number for spacing between bars
- `smoothing`: Number (0-1) for visualization smoothing

## Events
- `on_play`: Triggered when audio starts playing
- `on_pause`: Triggered when audio is paused
- `on_end`: Triggered when audio playback ends
- `on_timeupdate`: Triggered during playback with current time
- `on_volumechange`: Triggered when volume is modified

## States
- `is_playing`: Boolean indicating playback status
- `current_time`: Number showing current playback position
- `total_duration`: Number showing total audio duration
- `current_volume`: Number showing current volume level
- `peak_decibel`: Number showing current peak decibel level

## Technical Requirements
- Browser must support Web Audio API
- Recommended minimum browser versions:
 - Chrome 74+
 - Firefox 75+
 - Safari 14.1+
 - Edge 79+

## Usage Example
1. Drag the plugin onto your Bubble page
2. Upload an audio file or provide an audio URL
3. Customize the appearance using the provided properties
4. Connect events to your workflow as needed
5. The plugin will automatically handle the visualization during playback

## Notes
- Visualization performance may vary based on device capabilities
- Audio files are recommended to be under 50MB for optimal performance
- Supports most common audio formats (MP3, WAV, OGG, AAC)

$24

One time  •  Or  $5/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Twintag Services SL (CIF: ESB57728818) logo
Twintag Services SL (CIF: ESB57728818)
Joined 2021   •   2 Plugins
View contributor profile

Instructions

## Usage Example 1. Drag the plugin onto your Bubble page
2. Upload an audio file or provide an audio URL
3. Customize the appearance using the provided properties
4. Connect events to your workflow as needed
5. The plugin will automatically handle the visualization during playback

## Notes
- Visualization performance may vary based on device capabilities
- Audio files are recommended to be under 50MB for optimal performance
- Supports most common audio formats (MP3, WAV, OGG, AAC)

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event

Categories

This plugin can be found under the following categories:
Media   •   Video   •   Compliance   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble