Users can easily record and share voice messages in conversations.
You can enable voice messages by selecting the 'Allow recording voice messages' checkbox in the Chat UI page of your TalkJS dashboard.
When recording voice messages is enabled, if the message field is empty, a microphone ('Voice Message') button shows next to the message field. To start recording, the user has to click the microphone button.
On a web interface, when a user clicks the microphone button, the user's browser sends a prompt to request microphone access, for example as follows:
While a user is recording a voice message, the message field area shows a real-time display of the recorded waveform. Recording continues until the user clicks the red square ('Stop') button next to the message field.
When the user stops recording, their voice recording gets processed. While the recording is processing, a spinner icon appears next to the message field.
Once the recording ready, the user can:
- Delete the recording, using the cross ('Cancel upload') button on the left side of the message field.
- Play back the recording before sending, using the triangular ('Play') button in the message field.
- Send the recording to the chat as a voice message, using the paper plane ('Send') button on the right side of the message field.
Once sent, the voice recording appears as a playable message in the conversation. The user can select the playback speed of the voice message from a pop-up menu on the message itself.
If you would like only one group of users to be able to send voice messages, but not other user groups, create a separate role for each user group and adjust the voice messaging settings per role.
In most cases, voice messages work normally as soon as you have enabled recording voice messages on the Settings page of your dashboard.
However, if you signed up or have customized your theme before October 2022, then follow the instructions in the upgrade guide to add the voice recording feature to your existing theme.
On the web, the user needs to grant the browser permission to use the
microphone before sending their first voice message. TalkJS automatically
triggers this permission dialog. Additionally, you can listen to the
events to amend this permission flow with your own dialogs or help messages.
When using a mobile SDK, such as React Native or Flutter, you should add the Microphone/Record Audio permission to your app. How to add the Microphone/Record Audio permission to your app depends on the platform:
Add the following to your
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /><uses-permission android:name="android.permission.RECORD_AUDIO" />
Add the following to your
<key>NSMicrophoneUsageDescription</key><string>Your message to user when the microphone is accessed for the first time</string>
If you are using Flutter, you need to update your
Podfile, as shown in the following:
post_install do |installer|installer.pods_project.targets.each do |target|flutter_additional_ios_build_settings(target)target.build_configurations.each do |config|config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)','PERMISSION_MICROPHONE=1',]endendend