JavaScript - Воспроизведение аудио вместе со случайно сгенерированными значениями

Question

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

Я также хотел бы воспроизвести аудиоклип с каждым словом (этот звук будет произношением слова).

Я знаю, как воспроизводить отдельные звуки и как воспроизводить случайные звуки из множества звуков.Но если я создаю массив звуков, как я могу воспроизводить каждый из них только при отображении соответствующего слова?

Это то, с чем я работаю:

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

Я бы использовал хэш-карту, например:

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]);
...

Answer 2

Я бы изменил способ хранения ваших данных.Вместо origWords и audioClips вы можете использовать Массив объектов:

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

Затем в вашей функции после получения случайного индекса просто получите доступ к клавишам .text или .audio

Редактировать: Фрагмент

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>