JavaScript-播放音频以及随机生成的值

Question

I have a function that displays a random word from an array, in a non-repeated way.

I would also like to play a sound clip with each word (that sound would be the word's pronounciation).

I know how to play single sounds, and how to play random sounds from an array of sounds. But if I create an array of sounds, how can I play each one only when the corresponding word is displayed?

This is what I am working with:

 const p = document.getElementById("randomWord"); const origWords = ["alpha", "bravo", "charlie", "delta", "echo"]; const audioClips = ["alpha.mp3", "bravo.mp3", "charlie.mp3", "delta.mp3", "echo.mp3"]; let remainingWords = []; function randomize() { if (remainingWords.length === 0) remainingWords = origWords.slice(); const { length } = remainingWords; const [word] = remainingWords.splice(Math.floor(Math.random() * length), 1); p.textContent = word; } 

 <button onclick="randomize()" type="button">Random Word</button> <p id="randomWord"></p> 

Answer 1

I would change the way you store your data. Instead of origWords and audioClips you could use an Array of Objects:

const myWords = [
    {
       text: "alpha",
       audio: "alpha.mp3"
    },
    {
       text: "bravo",
       audio: "bravo.mp3"
    },
    ...
] 

Then in your function after you get the random index just acces the .text or .audio keys

Edit: Snippet

 const p = document.getElementById("randomWord"); const myWords = [ { text: "alpha", audio: "alpha.mp3" }, { text: "bravo", audio: "bravo.mp3" } ]; let remainingWords = []; function randomize() { if (remainingWords.length === 0) remainingWords = myWords.slice(); let length = remainingWords.length; let randomIndex = Math.floor(Math.random() * length); const word = remainingWords[randomIndex]; remainingWords.splice(randomIndex, 1); console.log(word); console.dir(p); p.textContent = word.text; // your audio code here like audio.play(word.audio); } 

  <button onclick="randomize()" type="button">Random Word</button> <p id="randomWord"></p> 

Answer 2

I would use an hashmap, for example:

const origWords = {"alpha":"alpha.mp3", "bravo":"bravo.mp3", "charlie":"charlie.mp3", "delta":"delta.mp3", "echo":"echo.mp3"};

...    

randomIndex = randomize();
key = Object.keys(origWords)[randomIndex];
p.textContent = key;
playSound(origWords[key]);
...