javascript – Button On-Click Plays The Value Specified But Also Plays Every Other Value Listed In Object Array

I’m been trying to code something which, using the WebSpeech API, ‘speaks’ the values specified in each button using the voice selected. But the problem that arises is that when the button is clicked, it will ‘speak’ the value out, but will also ‘speak’ every other value which has been set for other buttons.

What I’m expecting to happen is for each button when clicked to ‘speak’ its specific value and nothing else.

Here is the JavaScript code:

var voiceListSelection = document.querySelector('#voice-list-selection');
var textToVoice = document.querySelector('#text-to-voice');
var speechSynth = window.speechSynthesis;
var voiceList = [];

// Populates Voices From Web Speech API
populateVoices();
if (speechSynthesis !== undefined) {
    speechSynthesis.onvoiceschanged = populateVoices;
};

function populateVoices() {
    voiceList = speechSynth.getVoices();
    var selectedIndex = voiceListSelection.selectedIndex < 0 ? 0 : voiceListSelection.selectedIndex;
    voiceListSelection.innerHTML = '';
    voiceList.forEach((voice) => {
        var voiceListItem = document.createElement('option');
        voiceListItem.textContent = voice.name;
        voiceListItem.setAttribute('data-lang', voice.lang);
        voiceListItem.setAttribute('data-name', voice.name);
        voiceListSelection.appendChild(voiceListItem);
    });
    voiceListSelection.selectedIndex = selectedIndex;
};

// Object Data Stored Here
let buttonData = [
    {
        image: "https://cdn4.iconfinder.com/data/icons/hand-alphabet/100/Artboard_11-512.png",
        word: "One",
    },
    {
        image: "https://cdn4.iconfinder.com/data/icons/hand-alphabet/100/Artboard_103-512.png",
        word: "Two",
    },
]

// Outputs From Object Data
for (i = 0; i < buttonData.length; i++) {
    var textToVoiceDiv = document.createElement("div");
    textToVoice.appendChild(textToVoiceDiv);  
    textToVoiceDiv.id = "text-to-voice-div";
    var textToVoiceImg = document.createElement("img");
    textToVoiceDiv.appendChild(textToVoiceImg);
    textToVoiceImg.id = "text-to-voice-img";
    textToVoiceImg.src = buttonData[i].image;
    var textToVoiceInput = document.createElement("input");
    textToVoiceDiv.appendChild(textToVoiceInput); 
    textToVoiceInput.id = "text-to-voice-btn";
    textToVoiceInput.type = "button";
    textToVoiceInput.value = buttonData[i].word; 
    // Outputs Speech On Click
    textToVoiceInput.addEventListener('click', () => {
        for (const property in buttonData) {
            var textToVoiceOutput = new SpeechSynthesisUtterance(buttonData[property].word);
            var voiceListItemSelected = voiceListSelection.selectedOptions[0].getAttribute('data-name');
            voiceList.forEach((voice) => {
                if (voice.name === voiceListItemSelected) {
                    textToVoiceOutput.voice = voice;
                };
            });
            speechSynth.speak(textToVoiceOutput);
        }
    });   
};

Here is the HTML code (if needed):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
</head>
<body>
    <p>Select Voice: <select name="" id="voice-list-selection"></select></p>
    <section id="text-to-voice">
    </section>
    <script src="App.js"></script>
</body>
</html>

Read more here: Source link