Category: Appsmith Support
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Saving audio recorded with AudioRecorder to a database

Issue

I need to save the sound I record with the AudioRecorder widget in AppSmith to a database or Airtable so that I can play it later. I'm not sure how to do this, but I know that many others using the widget have the same issue. Can you please help me figure out how to save and retrieve the recorded audio?

Resolution

To save the sound recorded with the AudioRecorder widget in a database or Airtable using AppSmith, use the dataURL property which gives you a base64 string of the recorded audio. This string can then be saved in your database.

Here's an example of how to do it:



  1. Add an AudioRecorder widget to your app and set the dataURL property to a variable. This will store the base64 string of the recorded audio.



    3. Create a Submit button and add an onClick event handler that saves the dataURL to your database. Here's an example code for saving the dataURL to an Airtable database:




const record = { 
   Name: input1.text, // enter the field you want to save the audio recording under
   AudioRecording: audioRecorder1.dataURL // the base64 string of the audio recording
}

await createRecord('Table Name', record)

Make sure to replace "Table Name" with the name of the table you want to save the recording to, and "input1" with the name of the input field you want to link the recording to.



  1. To play the recording later, you can retrieve the dataURL from your database and use it to set the source of an Audio widget in your app. 



audio1.source = <dataURL from database>

This will set the source of the Audio widget to the recorded audio and allow you to play it back.