# Connect the browser\_audio to a custom frontend

**URL:** <https://forum.rasa.com/t/connect-the-browser-audio-to-a-custom-frontend/67127>\
**Category:** Rasa CALM\
**Created:** [May 29, 2025, 6:00pm UTC](https://forum.rasa.com/t/connect-the-browser-audio-to-a-custom-frontend/67127 "2025-05-29T18:00:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![carlojanssens](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/carlojanssens/32/25092_2.png) [@carlojanssens](https://forum.rasa.com/u/carlojanssens)\
**Post date:** [May 29, 2025, 6:00pm UTC](https://forum.rasa.com/t/connect-the-browser-audio-to-a-custom-frontend/67127/1 "2025-05-29T18:00:09Z")

</div>

Hi everyone!

I’ve successfully built a voice bot using Rasa, and it works great when I test it with the `rasa inspect --voice` command.

Now, I’m looking to integrate this voice functionality into my own web frontend.

For text-based interactions, I’m currently using the rasa-chatbot-widget, which works perfectly.

Could anyone point me in the right direction or offer advice on how to get the voice version working on a separate page in my frontend? What are the common methods or recommended libraries for handling audio input from the user’s microphone, sending it to Rasa, and playing back the voice responses?

for now this is what my credentials looks like on the browser\_audio part.

browser\_audio: server\_url: 0.0.0.0 asr: name: deepgram tts: name: cartesia

Thanks in advance!"

---

<div class="post-metadata">

**Author:** ![izi](https://avatars.discourse-cdn.com/v4/letter/i/dfb087/32.png) [@izi](https://forum.rasa.com/u/izi)\
**Post date:** [June 5, 2025, 12:14pm UTC](https://forum.rasa.com/t/connect-the-browser-audio-to-a-custom-frontend/67127/2 "2025-06-05T12:14:42Z")

</div>

Hey, you can try using [audiostream.ts](https://gist.github.com/vcidst/cbb51a0db4c723ab6642e310e8d7f684) with your custom frontend.

`createAudioConnection` is the function that you would be using to start streaming.

```auto
<Button
  onClick={async () =>
    await createAudioConnection(baseUrl)
  }
>Go</Button>

```

Note that baseUrl is parsed by the function `getWebSocketUrl` so you need to ensure that it points to wherever Rasa is deployed. Hope this helps!