Visitar URL original
01: sequence-02 Using AudioContext, still not in sync · wesbos/JavaScript30@135b907 · GitHub
Skip to content

Commit 135b907

Browse files
saitodissesaitodisse
committed
01: sequence-02 Using AudioContext, still not in sync
1 parent beb8d18 commit 135b907

3 files changed

Lines changed: 125 additions & 17 deletions

File tree

‎src/01 - JavaScript Drum Kit/sequence-02.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div class="titleContainer">
10+
<h1 class="title">Sequence</h1>
11+
</div>
12+
<script src="sequence-02.js"></script>
13+
</body>
14+
</html>

‎src/01 - JavaScript Drum Kit/sequence-02.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* global AudioContext, XMLHttpRequest, requestAnimationFrame */
2+
3+
function start () {
4+
window.AudioContext = window.AudioContext || window.webkitAudioContext
5+
const context = new AudioContext()
6+
7+
function loadAudio (url) {
8+
return new Promise((resolve, reject) => {
9+
const request = new XMLHttpRequest()
10+
request.open('GET', url, true)
11+
request.responseType = 'arraybuffer'
12+
13+
// Decode asynchronously
14+
request.onload = function () {
15+
context.decodeAudioData(request.response, function (buffer) {
16+
resolve(buffer)
17+
}, reject)
18+
}
19+
request.send()
20+
})
21+
}
22+
23+
function playSound (buffer) {
24+
const source = context.createBufferSource() // creates a sound source
25+
source.buffer = buffer // tell the source which sound to play
26+
source.connect(context.destination) // connect the source to the context's destination (the speakers)
27+
source.start(0) // play the source now
28+
// note: on older systems, may have to use deprecated noteOn(time);
29+
}
30+
31+
let hithatBuffer
32+
let kickBuffer
33+
34+
loadAudio('sounds/hihat.wav').then((buffer) => {
35+
hithatBuffer = buffer
36+
})
37+
.then(() => {
38+
return loadAudio('sounds/kick.wav').then((buffer) => {
39+
kickBuffer = buffer
40+
})
41+
})
42+
.then(() => {
43+
const beatsPerSecond = 4
44+
let seqIndex = 0
45+
46+
function draw () {
47+
setTimeout(() => {
48+
requestAnimationFrame(draw)
49+
50+
if (seqIndex % 4 === 0) {
51+
playSound(hithatBuffer)
52+
playSound(kickBuffer)
53+
}
54+
if (seqIndex % 4 === 1) {
55+
playSound(hithatBuffer)
56+
}
57+
if (seqIndex % 4 === 2) {
58+
playSound(hithatBuffer)
59+
}
60+
if (seqIndex % 4 === 3) {
61+
playSound(hithatBuffer)
62+
playSound(kickBuffer)
63+
}
64+
seqIndex++
65+
}, 1000 / beatsPerSecond)
66+
}
67+
draw()
68+
})
69+
}
70+
71+
window.onload = start

‎src/01 - JavaScript Drum Kit/style.css‎

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
11
html {
22
font-size: 10px;
3-
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
3+
background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
44
background-size: cover;
55
}
6-
body,html {
6+
7+
body, html {
78
margin: 0;
89
padding: 0;
910
font-family: sans-serif;
1011
}
1112

1213
.keys {
13-
display:flex;
14-
flex:1;
15-
min-height:100vh;
14+
display: flex;
15+
flex: 1;
16+
min-height: 100vh;
1617
align-items: center;
1718
justify-content: center;
1819
}
1920

2021
.key {
21-
border:4px solid black;
22-
border-radius:5px;
23-
margin:1rem;
22+
border: 4px solid black;
23+
border-radius: 5px;
24+
margin: 1rem;
2425
font-size: 1.5rem;
25-
padding:1rem .5rem;
26-
transition:all .07s;
27-
width:100px;
26+
padding: 1rem .5rem;
27+
transition: all .07s;
28+
width: 100px;
2829
text-align: center;
29-
color:white;
30-
background:rgba(0,0,0,0.4);
31-
text-shadow:0 0 5px black;
30+
color: white;
31+
background: rgba(0, 0, 0, 0.4);
32+
text-shadow: 0 0 5px black;
3233
}
3334

3435
.playing {
35-
transform:scale(1.1);
36-
border-color:#ffc600;
36+
transform: scale(1.1);
37+
border-color: #ffc600;
3738
box-shadow: 0 0 10px #ffc600;
3839
}
3940

@@ -46,5 +47,27 @@ kbd {
4647
font-size: 1.2rem;
4748
text-transform: uppercase;
4849
letter-spacing: 1px;
49-
color:#ffc600;
50+
color: #ffc600;
51+
}
52+
53+
.titleContainer {
54+
display: flex;
55+
flex: 1;
56+
min-height: 100vh;
57+
align-items: center;
58+
justify-content: center;
59+
}
60+
61+
.title {
62+
border: 4px solid black;
63+
border-radius: 5px;
64+
margin: 1rem;
65+
font-size: 3.5rem;
66+
padding: 1rem .5rem;
67+
transition: all .07s;
68+
width: 270px;
69+
text-align: center;
70+
color: white;
71+
background: rgba(0, 0, 0, 0.4);
72+
text-shadow: 0 0 5px black;
5073
}

0 commit comments

Comments
 (0)