Skip to content

Playing audio along with a random array of words

Hello everyone i want to know how can i play each audio files with certain words in this code. I want to make my quiz and my friend send me this. It kinda work but now i want that when clicking a word, when the word appear the pronounciation of that word also need to be played, i added the audioFiles array in here but i don’t know how can i attach it with the word array in Javascript. Someone help me please, Thank you a lot.

Below here is the HTML code

<html>
<head>
        <meta charset="UTF-8">
        <title>Testing quiz</title>

        <style>
        #clock{ font-size : 90px; }
        #field{ width: 1200px; }
        .card {
            width:150px;
            height:300px;
            line-height: 300px;
            text-align: center;
            border:2px solid #aaa;
            border-radius: 15px;
            font-size: 90px;
            margin: 24px;
            float: left;
        }

        </style>
    </head>
    <body>
      <div id="clock">time</div>
      <div id="field">

      </div>

      <script src = "new.js"></script>

    </body>
</html>

And here is the Javascript code

function rand(min,max)
{
  return Math.floor(Math.random()*(max-min+1))+min;

}

let audioFiles=["a.mp3","b.mp3","c.mp3","d.mp3","e.mp3","f.mp3","g.mp3","h.mp3","j.mp3","k.mp3",];

let words = [
  "a","b","c","d","e","f","g","h","j","k",
  "a","b","c","d","e","f","g","h","j","k",
];


for (let i = words.length-1 ; i>0; i--)
{
  let r = rand(0,i);
  let tmp = words[i];
  words[i] = words[r];
  words[r] = tmp;
}

let field = document.getElementById("field");

for (let i=0 ; i<words.length ; i++)
{
  let elm = document.createElement("div");

  elm.className = "card";
  elm.innerHTML = ""; //words[i];
  elm.index = i;
  elm.onclick = click;
  field.appendChild(elm);
}

let first  = null;
let second = null;
let timer  = null;

let count = 0;
let mekuri = 0;
let clock = document.getElementById("clock");
let timer2 = setInterval( function (){
  clock.innerText = "time:" + (++count);
} , 1000 );



function click(e)
{
  if(timer)
  {
    clearTimeout(timer);
    judge ();
  }
  let elm = e.target;

  //elm.style.visibility = "hidden";
  //let i = elm.index;
  elm.innerHTML = words[ elm.index ];

    if( !first )
    {
      first = elm;
    }
    else if ( first.index == elm.index )
    {
      return;
    }
    else
    {
      second = elm;
      timer = setTimeout( judge , 700 );
    }
}


function judge()
{
 if( first.innerHTML == second.innerHTML)
 {
 first.style.visibility = "hidden";
 second.style.visibility = "hidden";
 mekuri += 2;
 if( mekuri == words.length ) clearInterval(timer2)
 }
 else
 {
 first.innerHTML = "";
 second.innerHTML = "";
 }
 first  = null;
 second = null;
 timer  = null;
}

Answer

In your click() function, you can reference the letter (or word) and find the mp3 with the same name:

  let theWord = words[elm.index]
  elm.innerHTML = theWord;
  console.log('playing ' , theWord + '.mp3')
  let audio = new Audio(theWord + '.mp3');
  audio.play();

See working snippet below. You won’t hear a sound bc those mp3’s aren’t here, but you’ll see the console.log when it should play

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;

}

let audioFiles = ["a.mp3", "b.mp3", "c.mp3", "d.mp3", "e.mp3", "f.mp3", "g.mp3", "h.mp3", "j.mp3", "k.mp3", ];

let words = [
  "a", "b", "c", "d", "e", "f", "g", "h", "j", "k",
  "a", "b", "c", "d", "e", "f", "g", "h", "j", "k",
];


for (let i = words.length - 1; i > 0; i--) {
  let r = rand(0, i);
  let tmp = words[i];
  words[i] = words[r];
  words[r] = tmp;
}

let field = document.getElementById("field");

for (let i = 0; i < words.length; i++) {
  let elm = document.createElement("div");

  elm.className = "card";
  elm.innerHTML = ""; //words[i];
  elm.index = i;
  elm.onclick = click;
  field.appendChild(elm);
}

let first = null;
let second = null;
let timer = null;

let count = 0;
let mekuri = 0;
let clock = document.getElementById("clock");
let timer2 = setInterval(function() {
  clock.innerText = "time:" + (++count);
}, 1000);



function click(e) {
  if (timer) {
    clearTimeout(timer);
    judge();
  }
  let elm = e.target;

  //elm.style.visibility = "hidden";
  //let i = elm.index;
  let theWord = words[elm.index]
  elm.innerHTML = theWord;
  console.log('playing ', theWord + '.mp3')
  let audio = new Audio(theWord + '.mp3');
  audio.play();


  if (!first) {
    first = elm;
  } else if (first.index == elm.index) {
    return;
  } else {
    second = elm;
    timer = setTimeout(judge, 700);
  }
}


function judge() {
  if (first.innerHTML == second.innerHTML) {
    first.style.visibility = "hidden";
    second.style.visibility = "hidden";
    mekuri += 2;
    if (mekuri == words.length) clearInterval(timer2)
  } else {
    first.innerHTML = "";
    second.innerHTML = "";
  }
  first = null;
  second = null;
  timer = null;
}
#clock {
  font-size: 90px;
}

#field {
  width: 1200px;
}

.card {
  width: 150px;
  height: 300px;
  line-height: 300px;
  text-align: center;
  border: 2px solid #aaa;
  border-radius: 15px;
  font-size: 90px;
  margin: 24px;
  float: left;
}
<div id="clock">time</div>
<div id="field"></div>