Audio recording component

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

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

not yet :slight_smile:

1 Like

Did you find a solution for this?

It’s something I need to add in my project

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:

3 Likes

Perfect, thanks Mark! :slight_smile:

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

1 Like

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.

2 Likes

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

1 Like

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

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

2 Likes

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

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

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

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

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?