-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (84 loc) · 2.78 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<body>
<p>
Use your keyboard to make some tunes 🎵 <br>
Number keys are C4 to E5, other keys are random 🎵
</p>
</body>
<style>
body {
overflow: hidden;
}
</style>
<script src="https://tonejs.github.io/build/Tone.js"></script>
<script>
/* global Tone */
//some pleasant notes taken from https://gist.github.com/mattdesl/50fa00622294a86261edf3c7fbee2d3e
const notes = ['C5', 'A3', 'D4', 'G4', 'A4', 'F4']
const intervals = ['12n', '10n', '8n', '6n', '4n']
function getRandomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)]
}
async function play(e) {
const reverb = new Tone.Reverb({
decay: 5,
wet: 1,
}).toDestination();
const synth = new Tone.AMSynth().connect(reverb);
console.log('music!')
//const randomInterval = getRandomItem(intervals)
if (e.key === '1') {
synth.triggerAttackRelease('C4', intervals[3])
} else if (e.key === '2') {
synth.triggerAttackRelease('D4', intervals[3])
} else if (e.key === '3') {
synth.triggerAttackRelease('E4', intervals[3])
} else if (e.key === '4') {
synth.triggerAttackRelease('F4', intervals[3])
} else if (e.key === '5') {
synth.triggerAttackRelease('G4', intervals[3])
} else if (e.key === '6') {
synth.triggerAttackRelease('A4', intervals[3])
} else if (e.key === '7') {
synth.triggerAttackRelease('B4', intervals[3])
} else if (e.key === '8') {
synth.triggerAttackRelease('C5', intervals[3])
} else if (e.key === '9') {
synth.triggerAttackRelease('D5', intervals[3])
} else if (e.key === '0') {
synth.triggerAttackRelease('E5', intervals[3])
} else {
const randomItem = getRandomItem(notes)
synth.triggerAttackRelease(randomItem, intervals[3])
}
}
//adding visuals to the music
function createMusicalNote(x, y) {
//I want the note to appear at certain locations
//window.innerWidth x window.InnerHeight
const randomLeft = Math.random() * window.innerWidth
//const randomTop = Math.random() * window.innerHeight
//console.log(randomLeft, randomTop)
const musicalNote = document.createElement('div')
musicalNote.innerText = '🎵'
document.body.appendChild(musicalNote)
musicalNote.style.position = 'absolute'
musicalNote.style.left = randomLeft + 'px'
musicalNote.style.top = y + 'px'
musicalNote.style.fontSize = '50px'
musicalNote.style.opacity = Math.random() * 1
//I want the notes to move a little
function animate() {
requestAnimationFrame(animate)
y+= 0.5
musicalNote.style.top = y + 'px'
}
animate()
}
function visual(e) {
if (e.key) {
createMusicalNote(0, 50)
}
}
window.addEventListener('keypress', play)
window.addEventListener('keypress', visual)
</script>