【JavaScript】ボタンを押した時の効果音を実装する方法

2022.01.01

2022.04.02

どうも！かけちまるです！

毎年クリスマスに話題になるGoogleのサンタを追いかけようというサイトがあります。
立体的なデザインやボタンを押した時の効果音など楽しい仕掛けがたくさんあるサイトです。

その中でボタンを押したときに効果音が鳴る部分を実装してみようと思います。
エンターテイメント性の高いサイトの実装に使えるのではと思います。

この記事では、

・音声ファイルのブラウザサポート状況
・ボタンを押したときに効果音を実装
・ミュートのON、OFF切り替え方法

を解説します。

音声拡張子のブラウザサポート状況

.mp3だけ用意しておけばいいのではと思います。

古いブラウザも考慮したいという人は.wavも用意しておくと良いかもしれません。

以下の表がブラウザサポート状況です。※2022年1月1日時点

	IE	Edge	Firefox	Chrome	Safari	iOS	Android
.mp3	9~	12~	22~	4~	4~	4~	2.3~
.wav	×	12~	3.5~	8~	4~	3.2~	2.3~

最新のサポート状況は「Can I use」にて確認できます。

.mp3 ： https://caniuse.com/?search=mp3
.wav ： https://caniuse.com/?search=wav

無料音声素材サイト

音声素材を無料でダウンロードできるサイトをいくつかピックアップします。
利用規約に目を通してから使用するようにしましょう！

効果音ラボ： https://soundeffect-lab.info/
魔王魂： https://maou.audio/

音声ファイル変換ツール

音声素材サイトでは.mp3形式でのダウンロードが多いと思います。
.wavも用意する人ように音声ファイル変換ツール「Online UniConverter」のURLをご共有します。

Online UniConverter ： https://www.media.io/convert/mp3-to-wav.html

ボタンを押したときに効果音の実装

押したら音が鳴るボタンを実装していきます。
まず、実装サンプルでどんな感じになるか見てもらいます。
その後に、コードとその解説をします。

実装サンプル

実装サンプルはこんな感じです。

実装サンプル

音がなるよ!!

HTML

HTML
コピー
<div class="btn" onclick="audio()">音がなるよ!!</div>
 
<audio id="btn_audio">
    <source src="./audio/btn_audio.mp3" type="audio/mp3">
</audio>

1行目

まずボタン要素を用意します。
今回はこのボタンを押すと音が鳴るようにします。
onclick属性をふっておきクリックされたらJavaScriptの関数を実行するようにしましょう。

3~5行目

音声データを用意します。
audioタグにはJavaScriptで操作するためにid属性をふっておきます。

CSS

CSS
コピー
.btn {
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 80%;
}

CSSはボタンの見た目を整えるだけなので特に解説はです。

JavaScript

JavaScript
コピー
function audio() {
    document.getElementById('btn_audio').currentTime = 0; //連続クリックに対応
    document.getElementById('btn_audio').play(); //クリックしたら音を再生
}

1行目

audio関数を定義します。
ボタンがクリックされるとaudio関数内の処理が実装される仕組みです。

2行目

ボタンを連続でクリックされた時のために用意した音を再生する前に0秒に戻します。
この処理がないと再生が途中で止まらず2回目に押したときに反応しなくなってしまします。

3行目

この部分で用意した音を再生します。

ミュートの切り替え機能

ボタンを押して音が出るのは迷惑な場合があります。
なので、ユーザー側で音声のON、OFFを切り替えられるとよさそうですね。

まず、実装サンプルでどんな感じになるか見てもらいます。
その後に、コードとその解説をします。

実装サンプル

実装サンプルはこんな感じです。

音声が鳴るボタンはボタンを押したときに効果音の実装のときと同じものです。
本当はON、OFFがわかるように表示も切り替えられたらいいのですがコードのシンプルさ優先で実装します。

実装サンプル

音がなるよ!!

muteの切り替え

HTML

HTML
コピー
<div class="btn" onclick="audio()">音がなるよ!!</div>
<!-- mute切り替えボタン追加 -->
<div class="mute_btn" onClick="mute()">muteの切り替え</div>
 
<audio id="btn_audio">
    <source src="./audio/btn_audio.mp3" type="audio/mp3">
</audio>

3行目

mute切り替え用のボタン要素を追加します。
このボタンを押すとmuteのON、OFFが切り替えられます。
onclick属性をふっておきクリックされたらJavaScriptの関数を実行するようにしましょう。

CSS

CSS
コピー
/* mute切り替え用スタイル */
.mute_btn {
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 80%;
}

CSSはボタンの見た目を整えるだけなので特に解説はです。

JavaScript

JavaScript
コピー
// muteの切り替え
function mute() {
    if (document.getElementById('btn_audio').muted) {
        document.getElementById('btn_audio').muted = false;
    } else {
        document.getElementById('btn_audio').muted = true;
    }
}

1行目

mute関数を定義します。

2～6行目

if文を使ってボタンが押された時点でmuteがtrueならfalseに変更し、muteがfalseならtrueに変更します。