VideoJS Audio Recorder
(uses the latest videoJS library plus integration with Cartesia’s voice cloning endpoint)
Hi all,
I’ve released a videoJS Audio Recorder plugin. This is similar to the recorder that appears inside my videoJS Advanced plugin, but with better code management, more up to date scripts (for improved cross browser support) and a recording management state included.
It allows for immediate audio recording and playback by providing access to recordings through an object state, eliminating the need to upload files to S3 first in order to load or play again.
Plugin: https://bubble.io/plugin/videojs-audio-recorder-1741952478933x862514496477069300
Demo: https://paul-testing.bubbleapps.io/version-test/videojs_audio_recorder
Editor: https://bubble.io/page?id=paul-testing&tab=Design&name=videojs_audio_recorder&type=page
Documentation: https://paul-testing.bubbleapps.io/version-test/videojs_audio_recorder_instructions
Recordings are stored within a state that looks like this:
Each individual recording within this state holds various data that updates depending on what action gets run. This can be fed into a repeating group for example where individual recordings can then be played, paused, uploaded to S3 (or Wasabi) etc and any values will be updated.
The plugin does come with a visual element which you can hide if you don’t need it. If you do use it, then it has waveSurfer built-in which shows the sound wave as you speak (colors configurable).
There’s a bunch of settings that can be set like setting the max recording length, auto gain control, noise suppression, buffer sizes, capturing microphone noise levels, display settings etc.
Cartesia
Since at the time of creation, I had a need for cloning voices, further customizations/support was added to integrate Cartesia’s voice cloning API. You can now feed a recording into an action called “Clone voice” and have it clone your own voice. Cartesia returns a voice ID so if you wanted to utilise their services further and apply this voice to one of their TTS services, then you can do.
The action also allows you send a transcript along with the recording. If you do, it’ll generate an audio file where the transcript is spoken in the same voice as the recording.
Demo page
As far as using the demo page goes, it’s good fun when you clone your own voice and provide a transcript. You can test cloning your own voice and it will return an audio file for you to playback. If you try it, then try and speak as you would normally. It generally takes around 2-3 seconds to generate. You’ll need to use your own API key though I’m afraid, I’ve provided an input field for that.
Hope it’s a useful plugin.
Paul