Создайте голосовой аудиоплеер с API веб-речи

Попробуйте и попробуйте это в вашем браузере. Это так просто!

разговаривать

Мы можем увидеть это в действии в нашем методе talk, который читает вслух сообщение, переданное в качестве аргумента:

 speak: function(text, scope) { var message = new SpeechSynthesisUtterance(text.replace("-", " ")); message.rate = 1; window.speechSynthesis.speak(message); if (scope) { message.onend = function() { scope.play(); } } } 

Если есть второй аргумент ( scope ), мы вызываем метод play для scope (который будет объектом Audio) после завершения воспроизведения сообщения.

processCommands

Этот метод не так увлекателен. Он получает команду в качестве параметра и вызывает соответствующий метод для ответа на нее. Он проверяет, хочет ли пользователь воспроизвести определенную песню с регулярным выражением, в противном случае он вводит оператор switch для проверки различных команд. Если ни один из них не соответствует полученной команде, он информирует пользователя о том, что команда не была понята.

Вы можете найти код для этого здесь .

Связывая вещи вместе

К настоящему времени у нас есть объект data представляющий наш список воспроизведения, а также объект audioPlayer представляющий самого проигрывателя. Теперь нам нужно написать код для распознавания и обработки пользовательского ввода. Обратите внимание, что это будет работать только в браузерах webkit.

Код для общения пользователей с вашим приложением такой же простой, как и раньше:

 var recognition = new webkitSpeechRecognition(); recognition.onresult = function(event) { console.log(event) } recognition.start(); 

Это предложит пользователю разрешить странице доступ к своему микрофону. Если вы разрешите доступ, вы можете начать говорить, и когда вы остановите событие onresult вы получите доступ к результатам захвата речи в виде объекта JavaScript.

Справка: API распознавания речи в HTML5

Мы можем реализовать это в нашем приложении следующим образом:

 if (window['webkitSpeechRecognition']) { var speechRecognizer = new webkitSpeechRecognition(); // Recognition will not end when user stops speaking speechRecognizer.continuous = true; // Process the request while the user is speaking speechRecognizer.interimResults = true; // Account for accent speechRecognizer.lang = "en-US"; speechRecognizer.onresult = function (evt) { ... } speechRecognizer.onend = function () { ... } speechRecognizer.start(); } else { alert("Your browser does not support the Web Speech API"); } 

Как видите, мы проверяем наличие webkitSpeechRecognition в объекте window . Если это так, то мы можем пойти дальше, в противном случае мы сообщаем пользователю, что браузер его не поддерживает. Если все хорошо, тогда мы устанавливаем несколько вариантов. Из этих lang есть интересный, который может улучшить результаты распознавания, исходя из того, откуда вы родом.

Затем мы объявляем обработчики для onresult и onend событий перед тем, как начать с метода start.

Обработка результата

Есть несколько вещей, которые мы хотим сделать, когда распознаватель речи получает результат, по крайней мере, в контексте текущей реализации распознавания речи и наших потребностей. Каждый раз, когда есть результат, мы хотим сохранить его в массиве и установить тайм-аут на ожидание в течение трех секунд, чтобы браузер мог собирать любые дальнейшие результаты. После истечения трех секунд мы хотим использовать собранные результаты и перебрать их в обратном порядке (более новые результаты имеют больше шансов быть точными) и проверить, содержит ли распознанная расшифровка одну из наших доступных команд. Если это так, мы выполняем команду и перезапускаем распознавание речи. Мы делаем это потому, что ожидание окончательного результата может занять до минуты, из-за чего наш аудиоплеер кажется совершенно не отвечающим и бессмысленным, так как было бы быстрее просто нажать на кнопку.

 speechRecognizer.onresult = function (evt) { audioPlayer.toggleSpinner(true); results.push(evt.results); if (!timeoutSet) { setTimeout(function() { timeoutSet = false; results.reverse(); try { results.forEach(function (val, i) { var el = val[0][0].transcript.toLowerCase(); if (currentCommands.indexOf(el.split(" ")[0]) !== -1) { speechRecognizer.abort(); audioPlayer.processCommands(el); audioPlayer.toggleSpinner(); results = []; throw new BreakLoopException; } if (i === 0) { audioPlayer.processCommands(el); speechRecognizer.abort(); audioPlayer.toggleSpinner(); results = []; } }); } catch(e) {return e;} }, 3000) } timeoutSet = true; } 

Поскольку мы не используем библиотеку, мы должны написать больше кода для настройки нашего распознавателя речи, просматривая каждый результат и проверяя, соответствует ли его транскрипт заданному ключевому слову.

Наконец, мы возобновляем распознавание речи, как только оно заканчивается:

 speechRecognizer.onend = function () { speechRecognizer.start(); } 

Вы можете увидеть полный код этого раздела здесь .

Вот и все. Теперь у нас есть аудиоплеер, который полностью функционален и управляется голосом Я призываю загрузить код с Github и поиграть с ним, или ознакомьтесь с демонстрацией CodePen . Я также сделал доступной версию, которая обслуживается через HTTPS .

Вывод

Надеюсь, что это практическое руководство послужило хорошим введением в то, что возможно с помощью Web Speech API. Я думаю, что мы увидим рост использования этого API, так как реализации стабилизируются и добавляются новые функции. Например, я вижу YouTube будущего с полностью голосовым управлением, где мы можем смотреть видео разных пользователей, воспроизводить конкретные песни и перемещаться между песнями только с помощью голосовых команд.

Есть также много других областей, в которых API веб-речи может принести улучшения или открыть новые возможности. Например, просмотр электронной почты, навигация по веб-сайтам или поиск в Интернете — все с вашим голосом.

Используете ли вы этот API в своих проектах? Я хотел бы услышать от вас в комментариях ниже.