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
JavaScript
x
33
33
1
<html>2
<head>3
<meta charset="UTF-8">4
<title>Testing quiz</title>5
6
<style>7
#clock{ font-size : 90px; }8
#field{ width: 1200px; }9
.card {10
width:150px;11
height:300px;12
line-height: 300px;13
text-align: center;14
border:2px solid #aaa;15
border-radius: 15px;16
font-size: 90px;17
margin: 24px;18
float: left;19
}20
21
</style>22
</head>23
<body>24
<div id="clock">time</div>25
<div id="field">26
27
</div>28
29
<script src = "new.js"></script>30
31
</body>32
</html>33
And here is the Javascript code
JavaScript
1
96
96
1
function rand(min,max)2
{3
return Math.floor(Math.random()*(max-min+1))+min;4
5
}6
7
let audioFiles=["a.mp3","b.mp3","c.mp3","d.mp3","e.mp3","f.mp3","g.mp3","h.mp3","j.mp3","k.mp3",];8
9
let words = [10
"a","b","c","d","e","f","g","h","j","k",11
"a","b","c","d","e","f","g","h","j","k",12
];13
14
15
for (let i = words.length-1 ; i>0; i--)16
{17
let r = rand(0,i);18
let tmp = words[i];19
words[i] = words[r];20
words[r] = tmp;21
}22
23
let field = document.getElementById("field");24
25
for (let i=0 ; i<words.length ; i++)26
{27
let elm = document.createElement("div");28
29
elm.className = "card";30
elm.innerHTML = ""; //words[i];31
elm.index = i;32
elm.onclick = click;33
field.appendChild(elm);34
}35
36
let first = null;37
let second = null;38
let timer = null;39
40
let count = 0;41
let mekuri = 0;42
let clock = document.getElementById("clock");43
let timer2 = setInterval( function (){44
clock.innerText = "time:" + (++count);45
} , 1000 );46
47
48
49
function click(e)50
{51
if(timer)52
{53
clearTimeout(timer);54
judge ();55
}56
let elm = e.target;57
58
//elm.style.visibility = "hidden";59
//let i = elm.index;60
elm.innerHTML = words[ elm.index ];61
62
if( !first )63
{64
first = elm;65
}66
else if ( first.index == elm.index )67
{68
return;69
}70
else71
{72
second = elm;73
timer = setTimeout( judge , 700 );74
}75
}76
77
78
function judge()79
{80
if( first.innerHTML == second.innerHTML)81
{82
first.style.visibility = "hidden";83
second.style.visibility = "hidden";84
mekuri += 2;85
if( mekuri == words.length ) clearInterval(timer2)86
}87
else88
{89
first.innerHTML = "";90
second.innerHTML = "";91
}92
first = null;93
second = null;94
timer = null;95
}96
Advertisement
Answer
In your click() function, you can reference the letter (or word) and find the mp3 with the same name:
JavaScript
1
6
1
let theWord = words[elm.index]2
elm.innerHTML = theWord;3
console.log('playing ' , theWord + '.mp3')4
let audio = new Audio(theWord + '.mp3');5
audio.play();6
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
JavaScript
1
86
86
1
function rand(min, max) {2
return Math.floor(Math.random() * (max - min + 1)) + min;3
4
}5
6
let audioFiles = ["a.mp3", "b.mp3", "c.mp3", "d.mp3", "e.mp3", "f.mp3", "g.mp3", "h.mp3", "j.mp3", "k.mp3", ];7
8
let words = [9
"a", "b", "c", "d", "e", "f", "g", "h", "j", "k",10
"a", "b", "c", "d", "e", "f", "g", "h", "j", "k",11
];12
13
14
for (let i = words.length - 1; i > 0; i--) {15
let r = rand(0, i);16
let tmp = words[i];17
words[i] = words[r];18
words[r] = tmp;19
}20
21
let field = document.getElementById("field");22
23
for (let i = 0; i < words.length; i++) {24
let elm = document.createElement("div");25
26
elm.className = "card";27
elm.innerHTML = ""; //words[i];28
elm.index = i;29
elm.onclick = click;30
field.appendChild(elm);31
}32
33
let first = null;34
let second = null;35
let timer = null;36
37
let count = 0;38
let mekuri = 0;39
let clock = document.getElementById("clock");40
let timer2 = setInterval(function() {41
clock.innerText = "time:" + (++count);42
}, 1000);43
44
45
46
function click(e) {47
if (timer) {48
clearTimeout(timer);49
judge();50
}51
let elm = e.target;52
53
//elm.style.visibility = "hidden";54
//let i = elm.index;55
let theWord = words[elm.index]56
elm.innerHTML = theWord;57
console.log('playing ', theWord + '.mp3')58
let audio = new Audio(theWord + '.mp3');59
audio.play();60
61
62
if (!first) {63
first = elm;64
} else if (first.index == elm.index) {65
return;66
} else {67
second = elm;68
timer = setTimeout(judge, 700);69
}70
}71
72
73
function judge() {74
if (first.innerHTML == second.innerHTML) {75
first.style.visibility = "hidden";76
second.style.visibility = "hidden";77
mekuri += 2;78
if (mekuri == words.length) clearInterval(timer2)79
} else {80
first.innerHTML = "";81
second.innerHTML = "";82
}83
first = null;84
second = null;85
timer = null;86
}JavaScript
1
19
19
1
#clock {2
font-size: 90px;3
}4
5
#field {6
width: 1200px;7
}8
9
.card {10
width: 150px;11
height: 300px;12
line-height: 300px;13
text-align: center;14
border: 2px solid #aaa;15
border-radius: 15px;16
font-size: 90px;17
margin: 24px;18
float: left;19
}JavaScript
1
2
1
<div id="clock">time</div>2
<div id="field"></div>