Botframework-webchat: Direct Line ( WebChat) - Send Voice Note

[marcasmar94]

Can we let the user send a Voice Note just like in Facebook Messenger or Whatsapp in Direct Line (WebChat) ?

What the samples currently have is an implementation of speech-to-text where whatever the user says on the microphone gets sent as a text to the bot.

What we need is the actual audio message sent by the user.

Is there a way to achieve this in the currently available WebChat ?

Thank you

[stevkan]

This is achievable by utilizing features of Web Chat, yes.

First, when the user is given the option to provide an audio message and selects to do so, the bot can send an event to the web page. When the page receives the event a service can be initiated allowing the user to record a message. When the recording is stopped the audio file can then be sent back to the bot as an activity attachment.

I would suggest you look over the incoming activity event and post activity event samples for reference.

Does that help?

[marcasmar94]

@stevkan
Why will the bot need to send an event to the web page, can't we make it like when the user is given the option to provide an audio message (presses the mic icon), We start recording and that audio message is sent back as an activity attachment directly ?

Isn't the action of recording an audio message controlled from the client side ?

Is there a sample showing how to initiate an audio recording then capturing from the client side ?
That recorded audio message will then be sent as part of an activity attachment

Thank you,

[corinagum]

Closing this as answered. Feel free to continue discussion. :)

[stevkan]

@marcasmar94, your original ask was for the ability to send a voice note (something similar to WhatsApp, for example). However, Web Chat isn't designed with that feature in mind. When the microphone is pressed in Web Chat, it is recording your dialog which it then forwards immediately to the bot as an activity. The dialog, as part of this process, is converted from STT.

Now, it may be that you can intercept the voice recording and do something with it, but Web Chat is still going to act on the spoken dialog and send it to the bot as text.

If you are looking for the ability to send an actual voice note as a file and not as dialog, then I would suggest you look over the implementation I presented above.

As an amendment or alternative, you could add a button alongside or in place of the send/microphone button that, when clicked, would offer the user the option to record a note (like WhatsApp). Setting the display attribute to "none" for the send/button still allows the user to send text by hitting "enter". Then the added button could record voice notes, at the user's request.

If you go this route, just be aware that you would be altering the DOM which _could_ result in breaking changes depending on what code changes are published in the future.

Hope of help!