Один из моих друзей – дерматолог. У него есть очень плотный график, видя до 60 пациентов в день. Чтобы сэкономить время, он подошел ко мне с запросом:
Можете ли вы помочь мне сделать форму, где вы заполняете поля, используя распознавание речи? Это возможно?
Да, действительно, но Речее определение В настоящее время API работает только в Chrome и Edge (согласно MDN, он также должен работать в Safari 14.1, но я этого не проверял).
Начать работу довольно просто:
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) { /* It's supporpted! */ }
Я решил создать речь -Поджяние, это будет держать все, что мне нужно:
let speech = {
enabled: true,
listening: false,
recognition: new window.SpeechRecognition(),
text: ''
}
/* To allow to continously listen: */
speech.recognition.continuous = true;
/* To return interim results to a transcript area: */
speech.recognition.interimResults = true;
/* To set the language: */
speech.recognition.lang = 'en-US';
Главный Eventlistener берет первый результат массива Результаты – и, если ActiveElement либо или , устанавливает значение этого поля в стенограмма :
speech.recognition.addEventListener('result', (event) => {
const audio = event.results[event.results.length - 1];
speech.text = audio[0].transcript;
const tag = document.activeElement.nodeName;
if (tag === 'INPUT' || tag === 'TEXTAREA') {
if (audio.isFinal) {
document.activeElement.value += speech.text;
}
}
result.innerText = speech.text;
});
Кнопка переключения просто переключает класс, это внутренний текст , а также запуска:
speech.recognition.start(); /* and */ speech.recognition.stop();
Теперь мы готовы щелкнуть «Переключение прослушивания», сосредоточиться на форме и начать говорить. Перейти к этот кодепен демонстрация – Не забудьте использовать ваш микрофон.
Сделайте паузу после предложения, чтобы позволить двигателю обрабатывать аудио и вернуть стенограмму.
Есть много места для улучшения – возможно, вы могли бы вернуть Tag-cloud транскриптов, а затем щелкнуть текст? Что вы думаете?
Честно говоря, API -речевое признание делает Почувствуйте себя немного шатким, но я уверен, что это улучшится в будущем. Я тестировал с различными языками и могу подтвердить, что это хорошо работает с датскими, английскими и литовскими языками!
Спасибо за чтение!
Примечание: Из-за ограничений на безопасность браузера демо, демонстрация Codepen не работает при встраивании.
Документация для API в MDN
Оригинал: “https://dev.to/madsstoumann/how-to-fill-out-a-form-with-your-voice-3k6d”