Audio recording component

Developer corner
1

Anyone already build a custom component for audio recording? Like with GitHub - tderflinger/vue-audio-tapir: Audio recorder component for Vue.js 3. It enables to record, play and send audio messages to a server. or similar?

1 Like
2

Not that I’m aware of. @dorilama maybe?

3

not yet :slight_smile:

1 Like
4

Did you find a solution for this?

It’s something I need to add in my project

5

There are Vue components out there that could be spun into a custom component pretty easily and also JS stuff like this

Seems like an obvious component that WeWeb should make and include - unless @dorilama gets bored and wants to crush one out for the upcoming marketplace :stuck_out_tongue_winking_eye:

4 Likes
6

Perfect, thanks Mark! :slight_smile:

7

I think weweb is also working to make it easier to import js libraries. I guess it will come before the marketplace.

1 Like
8

Indeed, we are working on an NPM plugin that will allow you to import and work with libraries in the WeWeb editor. Initial development work is done and the feature is currently being tested internally. Current ETA is October but of course, that could change if our tests reveal we need more development work.

4 Likes
9

Hello. I see that NPM plugin are now live.
Has anyone tried to integrate audio recording to their app?

1 Like
10

Yes. I’ve done this both as specific elements leveraging the NPM plugin AND as a custom component. Not too difficult. Happy to help. Where are you starting from?

For specific elements, I used both RecordRTC and HowlerJS via NPM plugin. This allowed me to record audio and the HowlerJS allowed me to play the audio using its advanced audio controls.

Another way I did this is creating a custom component, which wasn’t too difficult either. A few changes to the properties in the config-js

image
image800Ă—807 33.9 KB

PROPERTIES:
audioLink: {
label: {
en: “Audio file”,
},
type: “Text”,
bindable: true
}

3 Likes
11

found another one: grishkovelli/vue-audio-recorder: A simple audio recorder for VueJS applications (github.com)

12

It still isn’t very stable and you can never predict when it will load a library.

13

I would love to understand more of how you set this up. Is there anything you can share with using the RecordRTC NPM plugin?

14

If you have time, I’m happy to jump on a call if you’re available over the next week?

16

Thanks for the reply.
I did manage to use the RecordRTC plugin along with some few lines of Custom Javascript (workflow triggered on button click)
Did you see any advantage of using a custom component?

17

Hello,

I’m trying to use RecordRTC via NPM. It works well when I create the recording with CustomJs linked to the Record button, but when I try to stop the recording, I can’t find the created object. I’m using this function in my customJS to start the recording

recorder = new RecordRTC(audioStream, {
    type: 'audio'
});
recorder.startRecording();

I think I need to create a global variable called recorder that contains the created RecordRTC object, but I can’t find a way to do it…

18

I’ve implemented an audio recording component. I’m happy to consult you through it. I have both the recorder and the bare bones main audio player elements. Feel free to DM me.

19

I’m really interested in getting a basic audio recorder setup. I’ve tried a few things, but as a newbie to WeWeb (migrating from Draftbit) I’ve not been able to get anything working. Would you have some time to advise?

20

Yes, I’d be glad as well to have a small tutorial explaining how you can easily do it.
Thanks…

21

I found a way doing it with the npm plugin and might be able to help you with that.
Yet is is not very elegant, as I’m using a TimeOut of 50ms, checking if the stop recording button has been clicked or not to stop the recording. If anyone has a more elegant solution, I’m all ears.