
どうも!かけちまるです!
毎年クリスマスに話題になるGoogleのサンタを追いかけようというサイトがあります。
立体的なデザインやボタンを押した時の効果音など楽しい仕掛けがたくさんあるサイトです。
その中でボタンを押したときに効果音が鳴る部分を実装してみようと思います。
エンターテイメント性の高いサイトの実装に使えるのではと思います。
この記事では、
を解説します。
.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コピー<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コピー.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コピーfunction audio() { document.getElementById('btn_audio').currentTime = 0; //連続クリックに対応 document.getElementById('btn_audio').play(); //クリックしたら音を再生 }
1行目
audio
関数を定義します。
ボタンがクリックされるとaudio
関数内の処理が実装される仕組みです。
2行目
ボタンを連続でクリックされた時のために用意した音を再生する前に0秒に戻します。
この処理がないと再生が途中で止まらず2回目に押したときに反応しなくなってしまします。
3行目
この部分で用意した音を再生します。
ボタンを押して音が出るのは迷惑な場合があります。
なので、ユーザー側で音声のON、OFFを切り替えられるとよさそうですね。
まず、実装サンプルでどんな感じになるか見てもらいます。
その後に、コードとその解説をします。
実装サンプルはこんな感じです。
音声が鳴るボタンはボタンを押したときに効果音の実装のときと同じものです。
本当はON、OFFがわかるように表示も切り替えられたらいいのですがコードのシンプルさ優先で実装します。
実装サンプル
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コピー/* 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コピー// 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
に変更します。
今回はボタンを押したときに効果音をつける方法を解説しました。
仕組みが分かればサイトのBGMや画面遷移時のアニメーションに効果音を加えるなど様々な応用ができそうですね。
効果音は場合によってはない方がいい時もあるのでユーザーのほうでmuteのコントロールができると良いと思います。
おわり
フィードバックを送信
記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。