[NEW PLUGIN] - Audio Player with Real-Time Decibel Visualization

Showcase Plugins
1

Introducing the Advanced Audio Player with Real-Time Decibel Visualization plugin for Bubble.io!

Elevate your Bubble applications by integrating an interactive audio player that not only plays your audio files but also visualizes their decibel levels in real-time.

audio_player

Key Features:

- Comprehensive Playback Controls: Play, pause, and stop your audio tracks with ease. 

  • Real-Time Decibel Visualization: Experience an animated waveform that mirrors the audio’s decibel levels as it plays. 
  • Customizable Aesthetics: Tailor the waveform’s color, style, and background to align with your app’s design. 
  • Multi-Format Support: Compatible with popular audio formats including MP3, WAV, and OGG. 
  • Responsive Design: The player adapts seamlessly to various screen sizes and container dimensions. 
  • Interactive Seeking: Navigate through the audio track by clicking on the waveform. 
  • Volume Control: Adjust the volume with intuitive controls and receive visual feedback. 
  • Time Display: Keep track of playback with current time and total duration indicators.
  • Variable Playback Speeds: Choose from multiple playback speeds (1x, 1.5x, or 2x) to suit your listening preference.

Demo: Experience the plugin in action

Editor Access: Explore the plugin in the Bubble Editor

Plugin page: Install here

How to Use:

  1. Add the Plugin: Drag and drop the Advanced Audio Player onto your Bubble page. 
  2. Set Audio Source: Upload an audio file or provide a URL. 
  3. Customize Appearance: Use the provided properties to match the player to your app’s design. 
  4. Configure Events: Integrate playback events into your workflows as needed. 
  5. Enjoy Enhanced Audio Playback: The plugin will handle playback and visualization seamlessly.

Technical Requirements:

  • Browser Compatibility: Ensure the user’s browser supports the Web Audio API. 
  • Recommended Browsers:
  • Chrome 74+
  • Firefox 75+
  • Safari 14.1+
  • Edge 79+

Notes:

- Performance Considerations: Visualization performance may vary based on device capabilities. 

  • File Size Recommendation: For optimal performance, keep audio files under 50MB. 
  • Format Support: The plugin supports most common audio formats, including MP3, WAV, OGG, and AAC.

Enhance your Bubble.io applications with this dynamic audio player, providing users with an engaging and interactive listening experience.

2

Nice job! Progress bar movement is feeling stuttered, a smooth and consistent movement would look much better.

1 Like
3

Thank you for the feedback!

That’s a great point, and I completely agree.

I’ve just uploaded a new version that improves the progress bar movement to make it much smoother and more consistent.

Let me know what you think! :blush:

4

It looks great man, kudos for the fast fix!