【プログラミング】ボタンを押し音声ファイルを再生（YouTuberの効果音とBGMを鳴らす）

本記事ではボタンを押し音声ファイルを再生する方法について紹介しています。

言語はJavaScriptを使っています。

読み込んだ画像をボタンとして使用し、それがクリックされたときにYouTuber の動画によくある効果音やBGMなどの音声ファイルを再生するものをつくりました。

もし実際に同じようなものを試しに作ってみたい方は、

といったサイトから、有名YouTuberの方々が使用しているBGMなどを探すことができます。

上記のサイトから音源をダウンロードをしファイルの名前を変え、プログラミングを適宜変更してください。

↓YouTube に動画もアップしてあるので、そちらもぜひご覧ください。

【早送り】プログラミングでヒカキンボックスっぽいものを作る【JavaScript】

ボタンを押し音声ファイルを再生

まずこちらが完成品です。

ここには肝心の効果音とBGM用の音声ファイルを置いていないので、ボタンを押しても音声は再生されずエラーがでてしまいますが、とりあえず貼っておきます。

10枚＋2枚の画像をimages ディレクトリから読み込み、それをボタンとして使用しています。

10種類の効果音とBGM用の音声ファイル（mp3）を用意し、数字のボタンが押されたら音声が再生されるようになっています。

下の二つのボタンで、効果音とBGMどちらを再生するか決めることができます。

BGMが再生されている時には、もう一度同じボタンを押すことで停止をすることもできます。

まず、以下のようなHTMLファイルを用意します。

読み込んだ画像に0~9と id を付けています。

CSSファイル↓

new Audio() でAudioインスタンスを作成して、play() や pasue() などで音声ファイルの再生、停止を行っています。

また効果音の場合は currentTime を０にし、連続で再生できるようにしています。

効果音ボタン、BGMボタンが押されたときには、まず ctx.clearRect() で gameScreen の画面をクリアし該当するテキストを表示しています。

効果音ボタンが押されたときには、「効果音」と表示され、BGMボタンが押されたときには、「BGM」と表示されます。

addEventListener() メソッドを使用し、click のイベントが発生したときの処理をここに書いています。

ボタンがクリックされたときに、どのような動作をするかをここで決めています。

chose_music() 関数では、効果音モードかBGMモードかを判定する bgm_flag という変数と、ボタンの番号を受け取り、bgm_flag によって再生する音声ファイルを決めています。

bgm_flag が 1 のときはBGMを鳴らし、bgm_flag が 0 の場合は効果音が鳴ります。

stop_music() 関数でBGMの停止をしています。

以上、ボタンを押し音声ファイルを再生する方法についてのソースコードでした。