Привет, ребята🙌

Сегодня я закончил 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 ✅

Спасибо за внимание.Увидимся завтра!