効果音が鳴るキーボード
キーボードから文字を入力するのときに、楽しい効果音が鳴るプログラム（Javascript）を作りました。
【音量注意】
大まかな手順は、以下となります。
- 効果音の素材作成
- Audioオブジェクトの生成
- キーボードの打鍵を感知し、Audioオブジェクトを鳴らす
手順 1 は、プログラミングの準備作業です。
手順 2 と 3 は、プログラミングとなります。
手順 1 と 2 に関しては、前回記事「ゲーム効果音の再生方法」にて、詳細に説明しましたので、ご参照ください。
ここでは、概要をおさらいします。
効果音の素材作成
効果音の決定
フリー素材を探したり、自分で作ったりして、どのような効果音にするかを決定します。
- sound.mp3
効果音の加工
効果音を、mp3からbase64に加工します。
- sound.mp3 → sound.txt
sound.txtの中身は、base64形式の効果音テキストデータです
base64形式の効果音テキストデータ
mp3形式をbase64に加工した場合、base64形式の効果音テキストのデータサイズは、元のmp3形式の効果音データのサイズと同程度となります。
- 例） sound.mp3（7.11KB） → sound.txt（9.48KB）
また、base64形式の効果音テキストデータは、１バイト文字が延々と続いています。
- 例） sound.txt（9.48KB）は、１バイト文字が9,712文字もあります。
プログラム（全体）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>Sound Effect Keyboard</title>
<script>
//
// base64文字列
//
var se64 = "SUQzAw ・・・途中省略・・・ qqqg==";
//
//
//
var se = new Audio("data:audio/wav;base64," + se64);
//
window.onkeydown = function(e) {
//
se.currentTime = 0;
se.play();
//
}
</script>
</head>
<body>
<textarea cols="50" rows="3"></textarea>
</body>
</html>
Audioオブジェクトの生成
効果音を変数に代入
Audioオブジェクトを生成するため、一旦、効果音を変数に代入します。
10行で、変数「se64」に、base64形式の効果音テキストデータを代入しています。
- var se64 = “base64形式の効果音テキストデータ”;
（注）10行目
10行で示したプログラムは、base64形式の効果音テキストデータを途中省略したので、１行に収まっています。
実際のプログラムでは、この部分は、複数行にまたがっています。
Audioオブジェクト生成
14行で変数（se64）を用いて、Audioオブジェクト（se）を生成しています。
- var se = new Audio(“data:audio/wav;base64,” + se64 );
キーボードの打鍵
打鍵感知
打鍵は、onkeydownイベントで感知します。
onkeydownイベントは、キーボードが打鍵されたときに発生します。
window.onkeydown = function(e) {
//
Audioオブジェクトの再生処理
//
}
onkeydownイベントの波括弧 { } の中に、イベント発生時に行いたい処理を記述します。
ここでは、Audioオブジェクトの再生処理を記述しています。
すなわち、以下の流れとなります。
- キーボードを打鍵する
- onkeydownイベントが発生する
- Audioオブジェクトを再生（効果音を鳴らす）する
Audioオブジェクト再生
プログラムの16行から21行を、以下に抜き出しました。
window.onkeydown = function(e) {
//
se.currentTime = 0;
se.play();
//
}
se.play() により、Audioオブジェクト（se）のplayメソッドを動かし、音を再生しています。
se.currentTime = 0 により、遅延のない再生を実現しています。
（注）currentTimeプロパティについては、前回記事「ゲーム効果音の再生方法」をご参照ください。
