MARKETPLACE
PLUGINS
ECHOWAVE (PRO)
EchoWave (Pro) logo

EchoWave (Pro)

Published December 2025
   β€’    Updated this week

Plugin details

EchoWave is the professional standard for audio in Bubble. Whether you are building a chat app, a podcast player, or a language learning tool, EchoWave provides the rich visual feedback users expect in modern apps.
πŸ”₯ Pro Features:

🏎️ Variable Playback Speed: Let users listen at 1.5x or 2.0x speed (just like WhatsApp/Telegram). Essential for long voice notes.

🎨 Total UI Control: Customize the waveform bars. Change width, gap, radius, and cursor color to match your app's design perfectly.

🎀 High-Quality Recording: Record microphone input directly to Base64 (WebM/WAV) with real-time waveform visualization.

πŸ” Loop Mode: Perfect for background music or ambient sounds.

πŸ“₯ Download Action: Export recordings or tracks directly to the user's device.

☁️ Native Recording Upload (S3) The recorder is now Hybrid:

Instant Preview: Get the Base64 immediately to show the user what they recorded.

Cloud Storage: Use the new Save to Bubble action to upload the raw file directly to your app's storage. You get a clean URL (https://...) to save to your database. No more heavy Base64 strings slowing down your app!

πŸ” Precision Controls

Zoom: Use the Set Zoom action to expand the waveform. Perfect for editing or reviewing long recordings.

Seek: Jump to any specific second with Go to Time.

Volume & Mute: Full control over playback volume (0-100) and instant Mute toggle.

⚑ Performance

Built on the latest Wavesurfer v7 engine for faster rendering and smoother waveforms.

Core Features:

  - Lightweight & Fast (Powered by Wavesurfer.js 7).

  - Smart "mm:ss" time formatting (no complex math needed).

  - Base64 Data export ready for Bubble S3 upload.

  - Responsive & Touch-friendly.


V3 - Take your audio recording to the next level with EchoWave Pro's new Continuous Recording Engine!

Recording long conversations (like podcasts, interviews, or meetings) in a browser usually leads to high RAM usage and crashes. We've solved this! This update introduces powerful tools to handle hour-long recordings smoothly and securely.

🌟 What's New:

* πŸƒ Eco Mode: Turn off the heavy visual waveform rendering while recording. This drastically reduces CPU and memory consumption, keeping your app fast and stable during long sessions.

* πŸ”„ Auto-Chunking Engine (Continuous Recording): Stop losing data! You can now set a "Chunk Interval" (e.g., 60 seconds). The plugin will automatically slice the audio in the background and trigger an event with the latest audio file without stopping the microphone.

* πŸ€– Perfect for AI (Whisper): Send continuous audio chunks directly to APIs like OpenAI's Whisper for real-time transcription while the user is still speaking!

Demo Test: https://demo-app-56978.bubbleapps.io/version-test/waveformplayer_pro/1764634032514x362626885110334900

Demo Editor: https://bubble.io/page?id=demo-app-56978&tab=Design&name=waveformplayer_pro&ai_generated=true&type=page&elements=bTHrV1

$15

One time  β€’  Or  $5/mo

stars   β€’   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   β€’   61 Plugins
View contributor profile

Instructions

How to use EchoWave:
1. Setup & Dimensions: Drag the WaveformPlayer element onto your page.

  - ⚠️ Crucial: Set a Fixed Width (e.g., 300px) and Fixed Height (e.g., 60px). Do not use "Fit height to content".

2. Visual Customization: Use the property editor to style your bars.

  - WhatsApp Style: Bar Width: 3, Bar Gap: 2, Radius: 3.

  - Block Style: Bar Width: 6, Bar Gap: 1, Radius: 0.

3. Playing Audio:

  - Load a file via the "Audio File URL" field.

  - Loop: Check "Loop Audio" to repeat automatically.

  - Speed: Use the action "Set Playback Speed" to toggle between 1x, 1.5x, or 2x.

4. Recording:

  - Create a "Record" button -> Action "Start Recording".

  - Create a "Stop" button -> Action "Stop Recording".

  - Save it: When WaveformPlayer A's recorded_audio_base64 is not empty, use Bubble's "Create a new File" or "Create a new Thing" to save it.

5. Troubleshooting:

  - CORS Error: If an external MP3 doesn't load, the server hosting it is blocking access. Files uploaded to Bubble's File Manager work 100% of the time.

  - Microphone: Requires the app to be served over HTTPS (Bubble default).

πŸƒ How to use Eco Mode:

1. In your workflow, go to the Start Recording action.

2. Set Eco Mode to "Yes".

3. The waveform canvas will dim slightly to indicate it's recording in the background without drawing the sound waves, saving precious browser memory.


πŸ”„ How to set up Continuous Recording (Auto-Chunking):

1. In the Start Recording action, set the Chunk Interval to your desired time in seconds (e.g., 60 for 1-minute chunks).

2. Go to your Bubble workflows and add the event: A EchoWave - Audio Chunk Ready.

3. Inside this workflow, you can now use the state Latest Chunk Base64 to upload that specific 60-second slice to your Bubble database (using our Save action) or send it directly to an external API via an API Connector call.

4. Note: If you want to record a single file the traditional way, just leave the Chunk Interval empty or set it to 0.

Types

This plugin can be found under the following types:
Element   β€’   Event   β€’   Action

Categories

This plugin can be found under the following categories:
Media   β€’   Social Network   β€’   Mobile   β€’   Chat   β€’   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble