Speech to text dictation in an ASP.NET Core rich text editor

Some people think faster than they type, and others cannot type easily at all. Dictation adds a microphone button that turns speech into text in the editor.
Turn it on
<richtextbox asp-for="Body"
toolbar="default"
enable-dictation="true"
dictation-lang="en-US"
dictation-continuous="true"
dictation-auto-punctuation="true"></richtextbox>
Press the microphone, then speak. Words appear under the caret as they are recognized, and the button shows that it is listening. Press it again to stop.
Which language
dictation-lang takes a language tag, such as de-DE or zh-CN. Set it from the user's language:
dictation-lang="@System.Globalization.CultureInfo.CurrentUICulture.Name"
From code
var editor = window.richTextBoxEditors.Body;
if (editor.dictation.isSupported()) {
editor.dictation.start();
}
editor.dictation.stop();
editor.dictation.toggle();
editor.dictation.isListening();
What to know
- It relies on the browser. It uses the Web Speech API, so support varies. Check
isSupported()and do not rely on it as the only way to write. - Your server is not involved. You need no service and no key. In some browsers, though, the browser's vendor processes the audio, so check this against your privacy rules.
- HTTPS is needed. Browsers only give microphone access on a secure page, other than on localhost.