Skip to content

Instantly share code, notes, and snippets.

@kichiki

kichiki/file2.js

Last active April 3, 2016 02:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kichiki/12f719b7ea91bbbe3281cce323757c3e to your computer and use it in GitHub Desktop.
Save kichiki/12f719b7ea91bbbe3281cce323757c3e to your computer and use it in GitHub Desktop.
Download ZIP
Web Audio API でズンドコキヨシ ref: http://qiita.com/kichiki/items/e561e127396c32a90382
Raw
file2.js
document.onkeydown = function(e) {
var keyCode = false;
if (e) {
event = e;
}
if (event) {
if (event.keyCode) {
keyCode = event.keyCode;
} else if (event.which) {
keyCode = event.which;
}
}
if (keyCode == 81 // Q
|| keyCode == 0x37 // 7
) {
playSound(sample1, 0);
} else if (keyCode == 87 // W
|| keyCode == 0x38 // 8
) {
playSound(sample2, 0);
} else if (keyCode == 69 // E
|| keyCode == 0x39 // 9
) {
playSound(sample3, 0);
} else if (keyCode == 65 // A
|| keyCode == 0x34 // 4
) {
playSound(sample4, 0);
} else if (keyCode == 83 // S
|| keyCode == 0x35 // 5
) {
playSound(sample5, 0);
} else if (keyCode == 68 // D
|| keyCode == 0x36 // 6
) {
playSound(sample6, 0);
} else if (keyCode == 90 // Z
|| keyCode == 88 // X
|| keyCode == 67 // C
|| keyCode == 0x31 // 1
|| keyCode == 0x32 // 2
|| keyCode == 0x33 // 3
|| keyCode == 0x20 // SPC
) {
playSound(sample78, 0);
}
};
Raw
file6.js
document.onkeydown = function(e) {
var keyCode = false;
if (e) {
event = e;
}
if (event) {
if (event.keyCode) {
keyCode = event.keyCode;
} else if (event.which) {
keyCode = event.which;
}
}
if (keyCode == 81 // Q
|| keyCode == 0x37 // 7
) {
playSound(sample1, 0);
} else if (keyCode == 87 // W
|| keyCode == 0x38 // 8
) {
playSound(sample2, 0);
} else if (keyCode == 69 // E
|| keyCode == 0x39 // 9
) {
playSound(sample3, 0);
} else if (keyCode == 65 // A
|| keyCode == 0x34 // 4
) {
playSound(sample4, 0);
} else if (keyCode == 83 // S
|| keyCode == 0x35 // 5
) {
playSound(sample5, 0);
} else if (keyCode == 68 // D
|| keyCode == 0x36 // 6
) {
playSound(sample6, 0);
} else if (keyCode == 90 // Z
|| keyCode == 88 // X
|| keyCode == 67 // C
|| keyCode == 0x31 // 1
|| keyCode == 0x32 // 2
|| keyCode == 0x33 // 3
|| keyCode == 0x20 // SPC
) {
playSound(sample78, 0);
}
};
Raw
km-before.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>kiyoshi-machine</title>
<script src="km.js"></script>
</head>
<body>
<button id="btn1">ズン</button>
<button id="btn2">ウン</button>
<button id="btn3">ズン</button>
<button id="btn4">ズン</button>
<button id="btn5">ズン</button>
<button id="btn6">ドコ</button>
<button id="btn78">キ・ヨ・シ！</button>
</body>
</html>
Raw
km.css
body {
width: 100vw;
height: 100vh;
color: #ccc;
background-color: #000;
}
#btn1 {
position: absolute;
width: 32vw;
height: 30vh;
top: 1vh;
left: 1vw;
right: 33vw;
bottom: 31vh;
font-size: 7vh;
color: #000;
background-color: #ff0;
}
#btn2 {
position: absolute;
width: 32vw;
height: 30vh;
top: 1vh;
left: 34vw;
right: 66vw;
bottom: 31vh;
font-size: 7vh;
color: #000;
background-color: #ff0;
font-size: 7vh;
color: #000;
background-color: #6f0;
}
#btn3 {
position: absolute;
width: 32vw;
height: 30vh;
top: 1vh;
left: 67vw;
right: 99vw;
bottom: 31vh;
font-size: 7vh;
color: #000;
background-color: #06f;
}
#btn4 {
position: absolute;
width: 32vw;
height: 30vh;
top: 32vh;
left: 1vw;
right: 33vw;
bottom: 62vh;
font-size: 7vh;
color: #000;
background-color: #aaf;
}
#btn5 {
position: absolute;
width: 32vw;
height: 30vh;
top: 32vh;
left: 34vw;
right: 66vw;
bottom: 62vh;
font-size: 7vh;
color: #000;
background-color: #0ff;
}
#btn6 {
position: absolute;
width: 32vw;
height: 30vh;
top: 32vh;
left: 67vw;
right: 99vw;
bottom: 62vh;
font-size: 7vh;
color: #000;
background-color: #aff;
}
#btn78 {
position: absolute;
width: 98vw;
height: 30vh;
top: 63vh;
left: 1vw;
right: 99vw;
bottom: 93vh;
font-size: 7vh;
color: #000;
background-color: #f06;
}
#credit {
position: absolute;
width: 99vw;
height: 5vh;
top: 94vh;
left: 1vw;
right: 99vw;
bottom: 99vh;
font-size: 3vh;
color: #fff;
background-color: #000;
}
Raw
km.js
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var getAudioBuffer = function(url, fn) {
var request = new XMLHttpRequest();
request.responseType = 'arraybuffer';
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 0 || request.status === 200) {
context.decodeAudioData(request.response, function(buffer) {
fn(buffer);
});
}
}
};
request.open('GET', url, true);
request.send('');
};
var playSound = function(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
};
// main
window.onload = function() {
getAudioBuffer('kiyoshi_zun1_1.wav', function(buffer1) {
sample1 = buffer1;
var btn1 = document.getElementById('btn1');
btn1.onclick = function() {
playSound(buffer1);
};
});
getAudioBuffer('kiyoshi_zun1_2.wav', function(buffer2) {
sample2 = buffer2;
var btn2 = document.getElementById('btn2');
btn2.onclick = function() {
playSound(buffer2);
};
});
getAudioBuffer('kiyoshi_zun1_3.wav', function(buffer3) {
sample3 = buffer3;
var btn3 = document.getElementById('btn3');
btn3.onclick = function() {
playSound(buffer3);
};
});
getAudioBuffer('kiyoshi_zun1_4.wav', function(buffer4) {
sample4 = buffer4;
var btn4 = document.getElementById('btn4');
btn4.onclick = function() {
playSound(buffer4);
};
});
getAudioBuffer('kiyoshi_zun1_5.wav', function(buffer5) {
sample5 = buffer5;
var btn5 = document.getElementById('btn5');
btn5.onclick = function() {
playSound(buffer5);
};
});
getAudioBuffer('kiyoshi_zun1_6.wav', function(buffer6) {
sample6 = buffer6;
var btn6 = document.getElementById('btn6');
btn6.onclick = function() {
playSound(buffer6);
};
});
getAudioBuffer('kiyoshi_zun1_78.wav', function(buffer78) {
sample78 = buffer78;
var btn78 = document.getElementById('btn78');
btn78.onclick = function() {
playSound(buffer78);
};
});
};
Raw
zdk-before.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>zun-doko-kiyoshi</title>
<script src="zdk.js"></script>
</head>
<body>
<button id="btn_start" onclick="start()">スタート</button>
</body>
</html>
Raw
zdk.css
body {
width: 100vw;
height: 100vh;
color: #ccc;
background-color: #000;
}
#btn_start {
position: absolute;
width: 98vw;
height: 92vh;
top: 1vh;
left: 1vw;
right: 99vw;
bottom: 93vh;
font-size: 15vh;
color: #000;
background-color: #ff0;
}
#credit {
position: absolute;
width: 99vw;
height: 5vh;
top: 94vh;
left: 1vw;
right: 99vw;
bottom: 99vh;
font-size: 3vh;
color: #fff;
background-color: #000;
}
Raw
zdk.js
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var getAudioBuffer = function(url, fn) {
var request = new XMLHttpRequest();
request.responseType = 'arraybuffer';
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 0 || request.status === 200) {
context.decodeAudioData(request.response, function(buffer) {
fn(buffer);
});
}
}
};
request.open('GET', url, true);
request.send('');
};
var playSound = function(buffer, time) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(time);
};
var sample1 = null;
var sample2 = null;
var sample3 = null;
var sample4 = null;
var sample5 = null;
var sample6 = null;
var sample78 = null;
// main
window.onload = function() {
getAudioBuffer('kiyoshi_zun1_1.wav', function(buffer1) {
sample1 = buffer1;
});
getAudioBuffer('kiyoshi_zun1_2.wav', function(buffer2) {
sample2 = buffer2;
});
getAudioBuffer('kiyoshi_zun1_3.wav', function(buffer3) {
sample3 = buffer3;
});
getAudioBuffer('kiyoshi_zun1_4.wav', function(buffer4) {
sample4 = buffer4;
});
getAudioBuffer('kiyoshi_zun1_5.wav', function(buffer5) {
sample5 = buffer5;
});
getAudioBuffer('kiyoshi_zun1_6.wav', function(buffer6) {
sample6 = buffer6;
});
getAudioBuffer('kiyoshi_zun1_78.wav', function(buffer78) {
sample78 = buffer78;
});
};
var start = function() {
// We'll start playing the rhythm 100 milliseconds from "now"
var startTime = context.currentTime + 0.100;
var tempo = 60; // BPM (beats per minute)
var eighthNoteTime = (60 / tempo) / 2;
var time = startTime;
while (1) {
var status = 0;
r = Math.random();
if (r < 0.5) {
playSound(sample1, time);
} else {
// Doko
playSound(sample6, time);
status = 1;
}
playSound(sample2, time + 1 * eighthNoteTime);
r = Math.random();
if (r < 0.5) {
playSound(sample3, time + 2 * eighthNoteTime);
} else {
// Doko
playSound(sample6, time + 2 * eighthNoteTime);
status = 1;
}
r = Math.random();
if (r < 0.5) {
playSound(sample4, time + 3 * eighthNoteTime);
} else {
// Doko
playSound(sample6, time + 3 * eighthNoteTime);
status = 1;
}
r = Math.random();
if (r < 0.5) {
playSound(sample5, time + 4 * eighthNoteTime);
} else {
// Doko
playSound(sample6, time + 4 * eighthNoteTime);
status = 1;
}
r = Math.random();
if (r < 0.5) {
// Zun
playSound(sample5, time + 5 * eighthNoteTime);
status = 1;
} else {
// Doko
playSound(sample6, time + 5 * eighthNoteTime);
}
if (status == 0) {
// KIYOSHI!
playSound(sample78, time + 6 * eighthNoteTime);
break;
} else {
}
time += 8 * eighthNoteTime;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment