4

Не могу найти подходящий вариант. Помогите, если знаете.

Мне нужно озвучивать слова. То есть, когда пользователь нажимает на кнопку, то озвучивается всего одно слово.

Если кто знает как, поделитесь примером, пожалуйста

ПС: озвучка нужна на английском языке.

3
  • В Google, Яндекс и др. решают данную проблему. А если серьёзно, то где ваши попытки? Не понятно какое слово или это будут слова? Любое на которое кликнул юзер или заранее определённые?
    – doox911
    25 янв 2020 в 20:38
  • @СвободуСергеюСуровцеву Дайте ссылку на гугл?
    – EduardRST
    25 янв 2020 в 20:40
  • pogugli.com/?349971
    – doox911
    25 янв 2020 в 20:45

3 ответа 3

18

Пример воспроизведения звука через js:

function speak() {
    let text = document.getElementById('text').value;
    speechSynthesis.speak(new SpeechSynthesisUtterance(text));
}
speak();
<meta charset="utf-8">
<p>Воспроизвести звуки.
<input id="text">
<button onclick="speak();">Произнести вслух</button>

2
  • А как его настроить, что-бы он был хоть как в гугл переводчике? Всмысле произносил слова правильно
    – EduardRST
    25 янв 2020 в 21:05
  • @Denis640Kb Здорово. А есть такая возможность делать паузы между словами, фразами. Я понимаю, что когда есть запятая, тире будет пауза. Но всё равно прикольно слышать родную речь, особенно ударения "Пошла Муха на базар И купила самовар: «Приходите, тараканы, Я вас чаем угощу!»" 4 апр 2020 в 6:44
6

Решил вернуться к данной задаче и добавить более развёрнутое решение.
Хочу сразу отметить, что инициализация speech с декабря 2018 года теперь производится только по активации пользователя.

    var lang = "ru-RU"; // Задаём стандартный язык произношения

    let main = document.querySelector('.main'); // Получаем главное меню
    let sel = document.querySelector('#lang'); // Получаем селектор для наполнение
    let sound = document.querySelector('#text'); // Получаем элемент input
    let land = window.speechSynthesis.getVoices(); // Тестовый вызов для получения языков(Так как speech с 2018 года работает исключительно по активации.
    activate.onclick = function() { // При нажатии на кнопку
        let reactivate = window.speechSynthesis.getVoices(); // Реактивируем получения языков воспроизводимости
        reactivate.forEach(function (c) { //Для каждого элемента
            let opt = document.createElement('option'); // Создаём option
            opt.value = c.lang; // В value помещяем код языка
            opt.innerText = c.name; // В текст option название языка
            sel.appendChild(opt); // Добавляем в селект
        });
        document.querySelector('#activate').style.display = 'none'; // Скрываем начальную кнопку
        main.style.display = 'block'; // Показываем основной блок
    };

    sel.onchange = function () { // При выборе селекта
        lang = this.value; // Меняем язык на выбранный
    };
    function speak(){ // Функция речи
        var speech = window.speechSynthesis, // Объявляем переменные
            voice = '',
            ourvoice = []; // Сюда будем складывать доступные звуки браузера
        if (0 === ourvoice.length) { // Если равно нулю, то...
            var voices = speech.getVoices(); // Получаем все языки
        }
        for (var i = 0; i < voices.length; i++) { // Находим указанный в списке
            if (lang == voices[i].lang) {
                voice = voices[i]; // Ставим язык как параметр
            }
        }
        var readme = new SpeechSynthesisUtterance(sound.value); // вводим текст
        readme.voice = voice; // Задаём язык произношения
        speech.speak(readme); // Произносим
    }
    .main{
        display: none;
    }
<button id="activate">Начать</button>
<div class="main">
    <p>Введите текст
    <input id="text">
    <p>Выберите язык произношения<select id="lang">
    </select>
    <button onclick="speak();">Произнести вслух</button>
</div>

PS Постарался добавить больше комментариев для понимания работы кода.

2
  • 2
    Мне нравится, что En -мужской голос, Ru - женский Ясно, что так сделали разработчики speech() И правильно сделали, сравните звучание - I love и Я люблю 4 апр 2020 в 6:57
  • У меня почему-то Ирина говорит голосом Павла в примере) 13 янв 2022 в 7:30
0

Произнести на всех английских:

activate.onclick = function() { // При нажатии на кнопку
  let reactivate = window.speechSynthesis.getVoices(); 
  let text = "What do you want to know?";
  reactivate.forEach(function(v) {
    if (/^en-/.test(v.lang)) {
      let utterance = new SpeechSynthesisUtterance(text);
      utterance.onstart = function(event) { // SpeechSynthesisEvent
        console.dir(event.utterance.voice.name);
      }
      utterance.voice = v;
      window.speechSynthesis.speak(utterance);
    }
  });

};
<button id="activate">Нажать 2 раза</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.