効果音が鳴るキーボード

キーボードから文字を入力するのときに、楽しい効果音が鳴るプログラム(Javascript)を作りました。

【音量注意】

 

大まかな手順は、以下となります。

  1.  効果音の素材作成
  2.  Audioオブジェクトの生成
  3.  キーボードの打鍵を感知し、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形式の効果音テキストデータは、1バイト文字が延々と続いています。

  • 例) sound.txt(9.48KB)は、1バイト文字が9,712文字もあります。

 

 

 

プログラム(全体)

 

Audioオブジェクトの生成

効果音を変数に代入

Audioオブジェクトを生成するため、一旦、効果音を変数に代入します。

 

10行で、変数「se64」に、base64形式の効果音テキストデータを代入しています。

  • var  se64  =  “base64形式の効果音テキストデータ”;

 

(注)10行目
10行で示したプログラムは、base64形式の効果音テキストデータを途中省略したので、1行に収まっています。
実際のプログラムでは、この部分は、複数行にまたがっています。

 

 

Audioオブジェクト生成

14行で変数(se64)を用いて、Audioオブジェクト(se)を生成しています。

  • var  se  =  new Audio(“data:audio/wav;base64,” + se64 );

 

 

キーボードの打鍵

打鍵感知

打鍵は、onkeydownイベントで感知します。

onkeydownイベントは、キーボードが打鍵されたときに発生します。

 

onkeydownイベントの波括弧 { } の中に、イベント発生時に行いたい処理を記述します。

ここでは、Audioオブジェクトの再生処理を記述しています。

 

すなわち、以下の流れとなります。

  1. キーボードを打鍵する
  2. onkeydownイベントが発生する
  3. Audioオブジェクトを再生(効果音を鳴らす)する

 

 

Audioオブジェクト再生

プログラムの16行から21行を、以下に抜き出しました。

 

se.play() により、Audioオブジェクト(se)のplayメソッドを動かし、音を再生しています。

se.currentTime = 0 により、遅延のない再生を実現しています。

(注)currentTimeプロパティについては、前回記事「ゲーム効果音の再生方法」をご参照ください。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。