【JS】効果音やBGM（サウンド）の実装方法

2024年10月12日

本記事では、以下のような効果音やBGMを実装する方法を紹介します。

効果音（ボタン）

BGM

音量:

本記事で使用している効果音やBGMは、以下サイトより無料でダウンロードできます。
たくさんのサウンドがあるので、使いたいものを事前にダウンロードしておきましょう。

効果音: 効果音ラボ（https://soundeffect-lab.info/）
BGM: DOVA（https://dova-s.jp）

ボタンクリックで効果音やBGMを再生・停止できるコード（HTML / CSS / JavaScript）

効果音やBGMの再生には、HTMLの<audio>タグとJavaScriptのplay() メソッドを使用します。
まず<audio> タグを使って再生したい音声ファイルを指定し、ボタンをクリックしたときにその要素に対してplay() メソッドを実行することで、音声を再生できます。

使いたい効果音やBGMは事前にダウンロードしておき、ソースを書き換えてご利用ください。
本記事で使用しているサウンドはこちらから無料ダウンロードできます。

ボタンクリックで効果音を出す

<button id="play-sound1">ボタン1</button>
<button id="play-sound2">ボタン2</button>
<button id="play-sound3">ボタン3</button>

<!-- 音声ファイルを再生するための <audio> 要素を設置 -->
<audio id="audio1" src="button1.mp3"></audio>
<audio id="audio2" src="button2.mp3"></audio>
<audio id="audio3" src="button3.mp3"></audio>

body {
    text-align: center;
    padding: 20px;
}

button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
  opacity: 0.7;
}

button:active {
  opacity: 0.4;
}

const audio1 = document.getElementById('audio1');
const audio2 = document.getElementById('audio2');
const audio3 = document.getElementById('audio3');

document.getElementById('play-sound1').addEventListener('click', () => {
    audio1.play();  // ボタン1を押すとbutton1.mp3が再生
});

document.getElementById('play-sound2').addEventListener('click', () => {
    audio2.play();  // ボタン2を押すとbutton2.mp3が再生
});

document.getElementById('play-sound3').addEventListener('click', () => {
    audio3.play();  // ボタン3を押すとbutton3.mp3が再生
});

HTMLでボタン要素を3つ設置し、さらに再生する効果音ファイルを<audio>タグを使って指定します。
CSSでデザイン・レイアウトを調整します。（本実装では、特にポイントとなるコードはありません。）
JavaScriptでボタンがクリックされたときの処理を実装します。各ボタンとそれに対応する <audio> 要素を取得し、ボタンがクリックされたときに該当する<audio>要素のplay()メソッドを実行して効果音を再生できます。

BGMを再生・停止・ボリューム調整する

音声を再生するplay()メソッドに加え、音声を停止するaudio.pause()メソッドや、音声の再生位置を取得/設定できる
currentTimeプロパティ、音量を取得/設定できるvolumeプロパティを使用します。

<button id="play-sound">再生</button>
<button id="stop-sound">停止</button>
<button id="restart-sound">最初から</button>

<label for="volume-control">音量:</label>
<input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.5">
<audio id="audio" src="bgm.mp3"></audio>

body {
    text-align: center;
    padding: 20px;
}

button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
  opacity: 0.7;
}

button:active {
  opacity: 0.4;
}

input[type="range"] {
  margin: 10px;
  width: 200px;
}

const audio = document.getElementById('audio');
audio.volume = 0.5; // 初期の音量を50%に設定
const volumeControl = document.getElementById('volume-control');

document.getElementById('play-sound').addEventListener('click', () => {
    audio.play();
});

document.getElementById('stop-sound').addEventListener('click', () => {
    audio.pause();
});

document.getElementById('restart-sound').addEventListener('click', () => {
    audio.currentTime = 0; // 再生位置を最初に戻す
    audio.play();          // 再生開始
});

volumeControl.addEventListener('input', () => {
    audio.volume = volumeControl.value; // 0.0 から 1.0 までの範囲で音量を設定
});

HTMLで「再生 / 停止 / 最初から」という3種類のボタン要素を設置します。音量の調整は<input>タグを使い、type属性をrangeにすることでバー表示にします。またstepを”0.1″にすることで、音量を0.1刻み（10段階）で調整できるようにしています。さらに、再生するBGMファイルを<audio>タグを使って指定します。
CSSでデザイン・レイアウトを調整します。（本実装では、特にポイントとなるコードはありません。）
JavaScriptでボタンクリックおよびバーが操作されたときの処理を実装します。
ボタンがクリックされたときに、該当する<audio>要素のメソッド（play()、pause()）を実行したり、currentTimeプロパティを使用して再生位置を変更したりします。またvolumeプロパティを使用して、音量をリアルタイムで調整できるようにしています。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。