How to record audio file

[bridge-time]

Hi All,

I just installed “Audio Recorder & Visualizer” plugin developed by Bubble, and want to make a test recording.
The main functionality is to record a file on browser, save this file on the server, get its path and save in db.

But I do not see any possibility of doing all these things.

Please, help to understand how can I do all these things by using Bubble “Audio Recorder & Visualizer” plugin,
OR, may be I must use the paid “Audo Recorder” plugin developed by ZeroCode?

regards, Karen

[JohnMark]

You will find info: [New Feature] Audio recorder element - #70 by bkhoward2001
BTW Plugin from Zerocode working very well too.

And some screen shots to help:

in your page:

workflow:

selection:

[bridge-time]

JohnMark,

Thank you for your quick answer and detailed message.
I was able to start and stop the recording by clicking a button.
And it seems the file is recorded.
But, how can I get the recorded file path+name and save it in db?

[keith]

READ:

[New Feature] Audio recorder element

Hello, We’ve just added a new element that will enable more multimedia apps. Your users can now record sounds and save them. To do this, add the “Audio Recorder & Vizualiser” plugin to your app. You’ll then have a new input type called 'Audio recorder". Once added to the app, you’ll have an element that can be controlled through 4 different actions: start / stop recording clear the recorder upload (save) play back. You’ll have to make sure the sound is uploaded before using it in a workflow…

Relevant excerpt:

@emmanuel

you’ll have an element that can be controlled through 4 different actions:

• start / stop recording
• clear the recorder
• upload (save)
• play back.

You’ll have to make sure the sound is uploaded before using it in a workflow. The upload action returns a URL that will be what you use to save the sound to a thing.

[JohnMark]

Hello Karen,

Have you found it? I realized that’s I’m using the plugin from ZeroCode, and not anymore the Bubble audio plugin. Keith gave you the link. It’s not that easy at first.

[bridge-time]

hi John Mark,

Yes I found some small things with bubble audio recording plugin, but not sure how does it return the recorded file path.

[JohnMark]

@keith

upload (save)

First, I highly recommend you to use the audio plugin from Zerocode because it works on mobile! If you can afford it.

When the recording is finished, use action ‘upload’ to save the file and then action ‘make change’ as described.

[JohnMark]

forgot this one. You can save as text or file. Your choice. When saving as a file, you can use the audio player.

[keith]

The reason for this is the Bubble audio recorder’s value is a URL to the saved file. That is, it is a text representing where the audio file has been stored (https://somethingsomething).

[bridge-time]

hi All,

thank you for all your messages, they are very helpfull,
we used them to solve our problems

[matteo]

Hi there,
I’m looking for an Audio recorder plugin (or other custom solutions) that work on mobile browsers (iOS and Android). Any suggestion?

Thanks,
M

[JohnMark]

@JohnMark

[New Feature] Audio recorder element

Hi @matteo

The only one at the moment is from zeroqode Audio recorder for mobile (iOS and Android)

[matteo]

Hi @JohnMark,
thank you for your answer!

I’ve tried it on iOS, it works on Safari but not on Chrome.
Same for you?

M

[JohnMark]

nothing perfect, but yes.

[olivierburg]

Dears, hello.

I’m Olivier new to Bubble.io.
Sorry to undertake this post. I’m looking for some help on the implementation of the Bubble’s Audio Recorder and Vizualiser to validate a idea (before using the one from zeroqode).
Thanks JohnMark for your descrption of the steps.
I probably missed something but I cannot reach the goal to record my voice and create a data in the database (with URL or txt file). The items I see on the workflow “makes chang to current user” is different and I did not find the right way to makes it work properly…

Is there anyone with experience on implementing this ?
Thanks a lot in advance.

Best regards,
Olivier

[olivierburg]

Hi there,
I’m reply on myself as I found the solution on my problem.
It is simple, to upload the URL in the db, just choose the db_record you have (i.e. VoiceRecord is one column in my db) and choose result of previous step which is “Upload content of AudioRecorder A”
For me it is VoiceRecordURL = Result of step 3 (Upload content of…)

And it’s done
Enjoy

O.

[zavian.in2020]

Hi there,

I need an audio recorder to allow users to record audio and upload it to the DB and then access all the recorded audio files in a repeating group. Is this possible with the Zerocode plugin? How do we display all the audio recordings in a RG?

Thanking you in anticipation!

[JohnMark]

Simple answer yes. Try the plugin first. It works great.

[zavian.in2020]

How do we get the Audios in an RG? I am not able to get the recorded audios from Database to the RG cells. Details below:
• I created a data type ‘Audio’ with just two fields (in addition to the default fields provided by Bubble) namely Audio_Title and Audio_file.
• Then I placed an input Audiorecorder on a page and created a Start/Stop workflow, an Upload Audio workflow (using icons) and a Button which saves these Audios to the database. I checked the App Data, all files are being saved to the database correctly.
• I have an RG which has a text for ‘Current cell’s Audio’s Audio_Title’. Now this is where I am getting stuck. How do I get an icon (or any other element) to ‘Play/Stop’ “Current cell’s Audio_file”.
What’s happening right now is that the icon in the RG in every cell is playing the latest Audio recorded and NOT that particular cell’s Audio. I tried using a Workflow but there is nothing

Please assist

Thanks!!

[JohnMark]

In my case, I use a RG with 1 row 1 column. Works perfect. The AudioRecorder must be the first thing to load (at the top of Bubble list).