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;
}
Advertisement
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>