-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (65 loc) · 2.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/*
creates an Audio instance to play a specfic sound clip
*/
function createAudioNode(src, options={}) {
var audio = document.createElement('audio');
audio.volume = options.volume || 0.5;
audio.loop = options.loop;
audio.src = src;
return audio;
}
/*
pass in an Array of strings corresponding to the sound file names
pass in a String of the base url pointing to the folder where sound files are placed
pass in a String indicating sound file extension; default to mp3
*/
function loadSounds(names) {
return names.reduce((module, effectName) => {
const src = `sounds/${effectName}.wav`;
module['_' + effectName] = createAudioNode(src);
// override the getter for this prop; have it return the context-bound play function of the audio node
// Note: using this way to define the props seems to make them ennumerable...
// check out the buttons that get created; the "_effect" prop is ennumerated but not the "effect" prop!
Object.defineProperty(module, effectName, {
get: function() {
var effectNode = module['_' + effectName];
return effectNode.play.bind(effectNode);
},
set: function(thing) {
console.log('Sorry. Property modification disallowed. Here is your thing back: ', thing);
}
});
return module;
}, {});
}
var effects = ['correct', 'wrong', 'complete', 'finishCard'];
var audioNodes = loadSounds(effects);
Object.keys(audioNodes).forEach(function (effectName) {
var btn = document.createElement('button');
btn.innerHTML = effectName;
btn.onclick = function() {
audioNodes[effectName].play();
console.log('playing ' + effectName);
};
document.getElementsByTagName('body')[0].appendChild(btn);
});
console.log(audioNodes);
var btn = document.createElement('button');
btn.innerHTML = 'play correct';
btn.onclick = function() {
console.log('using getter to play!?', audioNodes.correct);
// can invoke the sound effect by name directly as shortcut for invoking play function
audioNodes.correct();
};
document.getElementsByTagName('body')[0].appendChild(btn);
</script>
</body>
</html>