Forum Documentation Showcase Pricing Learn more

[New Feature] Audio recorder element


#1

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. The upload action returns a URL that will be what you use to save the sound to a thing. We’ve added some sound visualization stuff which makes the recorder quite fun to interact with :slight_smile:

Please thank @JohnM for sponsoring it!


How to record audio file
#2

Very cool! Thanks, @JohnM :slight_smile:


#3

No need to thanks, it’s a team work effort to make Bubble a better place to live :slight_smile:

----------

ADD NOTES:

  • Not working with Safari, iOS or Android (for now).
  • Working on Chrome, Firefox, Edge, Opera.

#4

So great!! Thank you @JohnM!


#5

Very cool! Thanks!


#6

Thanks for the @JohnM for adding the element.


#7

Awesome, thank you Emmanuel and John!


#8

Very exciting !


#9

Can we grab length of recording somehow?

Thanks to Emmanuel and John!


#10

@emmanuel question (idea) : Can we grab length of recording somehow? I forgot about that one… but with the JPlayer will be nice.


#11

We can make it available once a recording has been completed, but before the upload. We’ll add that.


#12

Terrific. This will be very useful!


#13

Now if we could have that streaming speech sent to Google or Watson for processing, this would be awesome, without the need to hack it together like @gurun did to get the text into a bubble element Any way of adding voice to text integration in bubble? (ie. Nuance).

Here’s the google demo.
https://www.google.com/intl/en/chrome/demos/speech.html

Here’s the Watson demo.
https://speech-to-text-demo.mybluemix.net/


#14

Kfawcett: I think that would require another extension in bubble if you dont want to “hack” it like you refer to.

If you feel the usability does not suffer from it then the current bubble implementation of the audio recording should be quite doable to connect to bubble.

That said, that flow would be:

  1. Record audio file in browser with new bubble addon
  2. Audio file transferred and saved to bubble backend
  3. Sending audio file via API connector to watson or asking watson to download it from URL
  4. Watson processing
  5. Content from watson sent back into bubble backend
  6. Bubble presentation of content back to end user

The downsides with this as per my opinion is that you could suffer a significant delay since the flow is this “complex”.

In the perfect world where you would want the transcribed content presented to the end user as fast as possible you would have a direct streaming of audio to watson which starts the moment you press record. Thus skipping probably at least 3 intermediary steps in the above list.


#15

I am with you Gurun. I do not want to wait, I want the processing to happen in real time. I like the bridge you built, just in the spirit of Bubble, was wondering if it was something that could be “baked” in, instead having to use an HTML element.


#16

So it would still happen from frontend directly to Watson, generating tokens on the backend and keeping that token in local state for you as a user when you send the data directly from your frontend to watson.

Maybe @emmanuel could give us an opinion of (approximately) how complex he sees such a bubble addon would be in terms of costs. :slight_smile:


#17

I’d be happy to help if you can formulate the question? out of context it’s a bit hard to help.


#18

@emmanuel, see fifth post up. Examples for Google and Watson are provided that show how “Streaming” speech can be changed to text on the fly – go to either link, press the record/microphone button and start talking. Gurun was able to create a “bridge” to allow for this to work and pass the data to a Bubble input field, but it’s not something built in and requires an HTML element with javascript.

[New Feature] Audio recorder element


#19

If i understand the question, you’re asking if we support this? We don’t and don’t have plans for this currently.


#20

I know it’s not supported – was asking if it could be added – and now I have the answer. I will use @gurun’s solution.