forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscriptEs5.js
More file actions
77 lines (64 loc) · 2.16 KB
/
scriptEs5.js
File metadata and controls
77 lines (64 loc) · 2.16 KB
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
75
76
77
//=============================================
// javascript30 Version ES5
//=============================================
function transitionEndEventName() {
var i,
undefined,
el = document.createElement('div'),
transitions = {
'transition': 'transitionend',
'OTransition': 'otransitionend', // oTransitionEnd in very old Opera
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
for (i in transitions) {
if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
return transitions[i];
}
}
//TODO: throw 'TransitionEnd event is not supported in this browser';
}
function removeTransition(e) {
alert("BOOM");
console.log(e);
if (e.propertyName !== 'transform') return; // Skip if it's not transformed
console.log(e.propertyName);
this.classList.remove('playing');
};
function playSound(e) {
// body
//console.log(e.keyCode);
var keyCode = e.keyCode;
//console.log(keyCode);
var audio = document.querySelector('audio[data-key2=a' + keyCode + ']');
//console.log(audio);
if (!audio) return; // Stops the function from running all together;
audio.classList.add('key');
var key = document.querySelector('audio.key[data-key2=a' + keyCode + ']');
//console.log(key);
playAudio = new Audio(key.src);
playAudio.timeupdate = 0; // Rewind to the start
playAudio.play();
key.classList.add('playing');
};
var keys = document.querySelectorAll('.key');
//console.log(keys);
// for (var i = 0; i < keys.length; i++) {
// keys[i].addEventListener(transitionEndEventName(), removeTransition, false);
// }
for (var i = 0; i < keys.length; i++) {
keys[i].addEventListener('transitionend', function (e) {
alert("BOOM");
console.log(e);
if (e.propertyName !== 'transform') return; // Skip if it's not transformed
console.log(e.propertyName);
this.classList.remove('playing');
}, false);
}
// for (var i = 0; i < keys.length; i++) {
// (function () {
// //console.log(keys[i]);
// keys[i].addEventListener('transitionend', removeTransition);
// }());
// }
window.addEventListener('keydown', playSound);