今回は効果音が鳴るようにしてみます。
ゲームは効果音が付くと一気に演出の深みが増すものです・・・😘
🙄効果音について
Wikiより引用。
効果音(こうかおん)は演出の一環として付け加えられる音である。音響効果[1](おんきょうこうか、英: sound effect、サウンドエフェクト、SE)とも呼ばれる。
Wikipedia
ゲームなんかでは、キャラがジャンプしたときに「♪ぴょ~ん」とか、敵キャラを斬りつけた時に「♪ズビショワーーッ!!」とか鳴って、視覚的なエフェクトを引き立たせる効果があります。出来の良い大作は、間違いなくこの効果音を効果的に使っていると言えるでしょう。(逆に言えば、効果音が無くなると味気ないものになります😂)
😉サンプルプログラムの解説
先ずはサンプルプログラムのダウンロードをお願いします👇
https://nengasoft.com/prj/sample03.zip
下記のファイルがキモです。
(1)dat/voice_pee.wav
(2)game.html
(3)nfld.js
それぞれ解説します。
😳dat/voice_pee.wav
「dat」フォルダ内に入れたファイル「voice_pee.wav」のことです。
音声データで、ゲーム中で鳴らす音そのものです。
😏game.html
上のdat/voice_pee.wavをここで読み込んでいます。
タイミング的には、ゲームが立ち上がった時点で読み込まれることになります。

5~7行目ですね。読み込んだ音声データに「SE」というIDを振っています。
このIDは、音声を再生するタイミングで使います。
😮nfld.js
音を鳴らすタイミングを記述しています。

193行目。サンプル02にて、タッチ・スワイプの処理を記述した所ですね。
先ほどの「SE」というIDを使って呼び出しています。
ここに記述することで、タップしたときに音が鳴ります。
😍動かしてみましょう
画面のどこかをタップしてみてください。ペギちゃんがかわいい声で鳴いてくれます💉

なおまだ当たり判定処理を記述していないため、ペギちゃんに限らず画面のどこをタップしても音が鳴るようになっています。
当たり判定処理については、またの機会に解説としましょう・・・😚
😁まとめ
今回は、JavaScriptで効果音を鳴らすサンプルを解説しました。
音声ファイルを置き、読み込み処理3行、鳴らす処理1行というとんでもなく簡単なコードですね。
今回は音声ファイル1つだけの処理でしたが、複数読み込ませたい場合はgame.htmlの5~7行目のコードと同じものを書いて、IDを「SE」以外にすればできそうですよね。簡単、簡単・・・🤗
コメント