## 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)