# Audio recording component **URL:** \ **Category:** Developer corner\ **Created:** [July 9, 2023, 4:45pm UTC](https://community.weweb.io/t/audio-recording-component/3441 "2023-07-09T16:45:18Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\ **Post date:** [July 9, 2023, 4:45pm UTC](https://community.weweb.io/t/audio-recording-component/3441/1 "2023-07-09T16:45:18Z")
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.](https://github.com/tderflinger/vue-audio-tapir) or similar? ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [July 10, 2023, 11:21am UTC](https://community.weweb.io/t/audio-recording-component/3441/2 "2023-07-10T11:21:38Z")
Not that I’m aware of. @dorilama maybe? ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [July 10, 2023, 11:29am UTC](https://community.weweb.io/t/audio-recording-component/3441/3 "2023-07-10T11:29:12Z")
not yet 🙂 ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 3:40pm UTC](https://community.weweb.io/t/audio-recording-component/3441/4 "2023-09-22T15:40:14Z")
Did you find a solution for this? It’s something I need to add in my project ---
**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\ **Post date:** [September 22, 2023, 3:54pm UTC](https://community.weweb.io/t/audio-recording-component/3441/5 "2023-09-22T15:54:48Z")
There are Vue components out there that could be spun into a custom component pretty easily and also [JS stuff like this](https://javascript.plainenglish.io/an-ultimate-guide-to-voice-recording-with-javascript-119e505780cd) 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 😜 ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 3:55pm UTC](https://community.weweb.io/t/audio-recording-component/3441/6 "2023-09-22T15:55:51Z")
Perfect, thanks Mark! 🙂 ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [September 22, 2023, 6:46pm UTC](https://community.weweb.io/t/audio-recording-component/3441/7 "2023-09-22T18:46:38Z")
I think weweb is also working to make it easier to import js libraries. I guess it will come before the marketplace. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [September 25, 2023, 1:26pm UTC](https://community.weweb.io/t/audio-recording-component/3441/8 "2023-09-25T13:26:53Z")
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. ---
**Author:** ![BaptisteJ](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/baptistej/32/4040_2.png) [@BaptisteJ](https://community.weweb.io/u/BaptisteJ)\ **Post date:** [December 28, 2023, 11:35am UTC](https://community.weweb.io/t/audio-recording-component/3441/9 "2023-12-28T11:35:26Z")
Hello. I see that NPM plugin are now live. Has anyone tried to integrate audio recording to their app? ---
**Author:** ![Profound5753](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/profound5753/32/6870_2.png) [@Profound5753](https://community.weweb.io/u/Profound5753)\ **Post date:** [December 28, 2023, 9:05pm UTC](https://community.weweb.io/t/audio-recording-component/3441/10 "2023-12-28T21:05:40Z")
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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a147fc3d0e4441615f40587ecf0e2b7e197917eb.png) > **PROPERTIES:** > audioLink: { > label: { > en: “Audio file”, > }, > type: “Text”, > bindable: true > } ---
**Author:** ![Antiokh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/antiokh/32/2794_2.png) [@Antiokh](https://community.weweb.io/u/Antiokh)\ **Post date:** [January 7, 2024, 6:19pm UTC](https://community.weweb.io/t/audio-recording-component/3441/11 "2024-01-07T18:19:45Z")
found another one: [grishkovelli/vue-audio-recorder: A simple audio recorder for VueJS applications (github.com)](https://github.com/grishkovelli/vue-audio-recorder) ---
**Author:** ![Antiokh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/antiokh/32/2794_2.png) [@Antiokh](https://community.weweb.io/u/Antiokh)\ **Post date:** [January 7, 2024, 6:22pm UTC](https://community.weweb.io/t/audio-recording-component/3441/12 "2024-01-07T18:22:12Z")
> [@Joyce](#): > > 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. It still isn’t very stable and you can never predict when it will load a library. ---
**Author:** ![Johnfranck8](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/johnfranck8/32/7420_2.png) [@Johnfranck8](https://community.weweb.io/u/Johnfranck8)\ **Post date:** [February 1, 2024, 10:11pm UTC](https://community.weweb.io/t/audio-recording-component/3441/13 "2024-02-01T22:11:49Z")
I would love to understand more of how you set this up. Is there anything you can share with using the RecordRTC NPM plugin? ---
**Author:** ![Profound5753](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/profound5753/32/6870_2.png) [@Profound5753](https://community.weweb.io/u/Profound5753)\ **Post date:** [February 1, 2024, 10:54pm UTC](https://community.weweb.io/t/audio-recording-component/3441/14 "2024-02-01T22:54:33Z")
If you have time, I’m happy to jump on a call if you’re available over the next week? ---
**Author:** ![BaptisteJ](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/baptistej/32/4040_2.png) [@BaptisteJ](https://community.weweb.io/u/BaptisteJ)\ **Post date:** [February 9, 2024, 3:38pm UTC](https://community.weweb.io/t/audio-recording-component/3441/16 "2024-02-09T15:38:04Z")
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? ---
**Author:** ![axelCCCOM](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@axelCCCOM](https://community.weweb.io/u/axelCCCOM)\ **Post date:** [June 3, 2024, 4:44pm UTC](https://community.weweb.io/t/audio-recording-component/3441/17 "2024-06-03T16:44:53Z")
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 ```auto 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… ---
**Author:** ![Profound5753](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/profound5753/32/6870_2.png) [@Profound5753](https://community.weweb.io/u/Profound5753)\ **Post date:** [June 4, 2024, 5:32am UTC](https://community.weweb.io/t/audio-recording-component/3441/18 "2024-06-04T05:32:29Z")
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. ---
**Author:** ![EnigmaXXIII](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@EnigmaXXIII](https://community.weweb.io/u/EnigmaXXIII)\ **Post date:** [June 4, 2024, 10:33am UTC](https://community.weweb.io/t/audio-recording-component/3441/19 "2024-06-04T10:33:18Z")
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? ---
**Author:** ![axelCCCOM](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@axelCCCOM](https://community.weweb.io/u/axelCCCOM)\ **Post date:** [June 4, 2024, 2:09pm UTC](https://community.weweb.io/t/audio-recording-component/3441/20 "2024-06-04T14:09:27Z")
Yes, I’d be glad as well to have a small tutorial explaining how you can easily do it. Thanks… ---
**Author:** ![axelCCCOM](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@axelCCCOM](https://community.weweb.io/u/axelCCCOM)\ **Post date:** [June 5, 2024, 11:04am UTC](https://community.weweb.io/t/audio-recording-component/3441/21 "2024-06-05T11:04:20Z")
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. [Next page](https://community.weweb.io/t/audio-recording-component/3441.md?page=2)