Привет, ребята🙌
Сегодня я закончил 23-е видео JavaScript30!
Проект 23: Синтез речи
Источник: https://javascript30.com
Обучение:
Сегодня перед нами поставили задачу построить веб-интерфейс для Синтеза речи!
Это интерфейс для Web Speech API. Он содержит контент, который будет считывать речевой сервис, а также параметры, которые можно настроить, например language
и pitch
.
Во-первых, мы объявили новую переменную, содержащую сообщение, и пустой массив для хранения различных цифровых голосов из API.
const msg = new SpeechSynthesisUtterance();let voices = [];
Мы выбрали необходимые элементы HTML, включая значение текстового поля (Письменное сообщение), помещенное в массив.
const voicesDropdown = document.querySelector('[name="voice"]'); const options = document.querySelectorAll('[type="range"], [name="text"]'); const speakButton = document.querySelector('#speak'); const stopButton = document.querySelector('#stop'); msg.text = document.querySelector('[name="text"]').value;
Его также можно использовать для запуска и приостановки речи. Функция привнесла выбор синтезированных голосов и поместила их в выпадающее меню.
function populateVoices() { voices = this.getVoices(); voicesDropdown.innerHTML = voices .filter(voice => voice.lang.includes('en')) .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`) .join(''); }
Выше приведены примеры свойств и методов, которые можно использовать для изменения состояния речевого устройства.
function setVoice() { msg.voice = voices.find(voice => voice.name === this.value); toggle(); } function toggle(startOver = true) { speechSynthesis.cancel(); if (startOver) { speechSynthesis.speak(msg); } } function setOption() { console.log(this.name, this.value); msg[this.name] = this.value; toggle(); }
Наконец, прослушиватели событий для интерактивности. Каждый связан с одной из вышеперечисленных функций.
speechSynthesis.addEventListener('voiceschanged', populateVoices); voicesDropdown.addEventListener('change', setVoice); options.forEach(option => option.addEventListener('change', setOption)); speakButton.addEventListener('click', toggle); stopButton.addEventListener('click', ()=> toggle(false));
Сегодня я узнал (Т-И-Л):
- Чтобы создать веб-приложение синтеза речи
- Связывание прослушивателя событий с каждой определяемой пользователем функцией!🙌
Это все на Day23 ✅
Спасибо за внимание.Увидимся завтра!