JS30. Задание 23 Magic Site

Демо https://js30232.github.io/
Код https://github.com/js30232/js30232.github.io

Оригинальное авторское задание было в одном из предыдущих постов, здесь - вариация на его тему: сайт, меняющий цвет фона по голосовой команде.

Разметка

        <div class="voiceinator">
            <h1>Magic Site</h1>
            <p>Этот сайт управляется голосом.<br>
            Назовите любой из цветов радуги,<br>
            или выберите его из списка ниже<br><br>
            Работает в Хроме</p>
            <select id="text">
                <option>Белый</option>
                <option>Красный</option>
                <option>Оранжевый</option>
                <option>Желтый</option>
                <option>Зелёный</option>
                <option>Голубой</option>
                <option>Синий цвет</option>
                <option>Фиолетовый</option>
            </select>
            <button id="speak">Speak</button>
        </div>

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

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

Код

1. window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

Строка нужна для того, чтобы распознавание речи работало и с префиксом webkit и без него, когда это станет возможным.

2. Находим некоторые элементы разметки: поле выбора цвета, кнопку для озвучивания названия выбранного цвета, тело документа, цвет фона которого будем менять.

var text = document.getElementById("text");
var speakButton = document.getElementById("speak");
var body = document.querySelector("body");

3. var voice = "белый";

var colors = {
    "белый": "#F7F7F7",
    "красный": "#BC382E",
    "оранжевый": "#FF8000",
    "желтый": "#F5BD00",
    "зеленый": "#388D80",
    "голубой": "#4583AA",
    "синий цвет": "#163260",
    "фиолетовый": "#560DA6"
}

Цвет фона по умолчанию и объект соответствия названий и кода цвета.

4. function speak() {
    var msg = new SpeechSynthesisUtterance();
    msg.text = text.value;
    speechSynthesis.speak(msg);   
}

speakButton.addEventListener("click", speak);

Функция озвучивания выбранного цвета.
Запускается по клику по кнопке

5. Функция распознавания голоса и изменения фона согласно названному цвету

var recognition = new SpeechRecognition();
recognition.interimResults = true;

function recognitionVoice(e) {
    voice = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join("");
    console.log(voice);
   
    for (key in colors) {
        if(voice === key) {
            body.style.backgroundColor = colors[key];
        }
    }
}

recognition.addEventListener("result", recognitionVoice);

recognition.addEventListener("end", function(e) {
    recognition.start();
});

Здесь мне не очень нравится, что объединены две функции, но как их разделить не знаю.
Код полностью:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

var text = document.getElementById("text");
var speakButton = document.getElementById("speak");
var body = document.querySelector("body");
var voice = "белый";

var colors = {
    "белый": "#F7F7F7",
    "красный": "#BC382E",
    "оранжевый": "#FF8000",
    "желтый": "#F5BD00",
    "зеленый": "#388D80",
    "голубой": "#4583AA",
    "синий цвет": "#163260",
    "фиолетовый": "#560DA6"
}

function speak() {
    var msg = new SpeechSynthesisUtterance();
    msg.text = text.value;
    speechSynthesis.speak(msg);   
}

var recognition = new SpeechRecognition();
recognition.interimResults = true;

function recognitionVoice(e) {
    voice = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join("");
    console.log(voice);
   
    for (key in colors) {
        if(voice === key) {
            body.style.backgroundColor = colors[key];
        }
    }
}

recognition.addEventListener("result", recognitionVoice);

recognition.addEventListener("end", function(e) {
    recognition.start();
});

speakButton.addEventListener("click", speak);
recognition.start();