BGM の再生・停止・音量調整 デザイン見本
HTMLの <audio> タグと JavaScript を使い、BGMの再生・停止・最初から・音量調整を実装するデモ。コピーしてすぐに使えるコードを掲載しています。
① play() と pause() で再生・停止する
クリックして動作を確認できます（合成音によるデモ）
状態: 停止中
<button id="play-sound">再生</button>
<button id="stop-sound">停止</button>
<audio id="audio" src="bgm.mp3"></audio>button {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
cursor: pointer;
border-radius: 6px;
border: none;
background: #3b82f6;
color: #fff;
transition: opacity 0.15s;
}
button:hover {
opacity: 0.8;
}var audio = document.getElementById('audio');
document.getElementById('play-sound').addEventListener('click', function() {
audio.play();
});
document.getElementById('stop-sound').addEventListener('click', function() {
audio.pause();
});BGMの再生には audio 要素の play() メソッド、停止には pause() メソッドを使います。pause() は再生位置を保持したまま停止するため、もう一度 play() を呼ぶと途中から再生が再開されます。
JavaScriptの audio 要素には stop() メソッドがありません。「停止」には pause() を使います。再生位置をリセットしたい場合は、pause() の後に currentTime = 0 を組み合わせてください（次のカードで解説）。
② currentTime で再生位置を操作する
「最初から」ボタンで再生位置が先頭に戻ります
状態: 停止中
<button id="play-sound">再生</button>
<button id="stop-sound">停止</button>
<button id="restart-sound">最初から</button>
<audio id="audio" src="bgm.mp3"></audio>var audio = document.getElementById('audio');
document.getElementById('play-sound').addEventListener('click', function() {
audio.play();
});
document.getElementById('stop-sound').addEventListener('click', function() {
audio.pause();
});
document.getElementById('restart-sound').addEventListener('click', function() {
audio.currentTime = 0;
audio.play();
});currentTime プロパティは再生位置を秒単位で表します。0 を代入すると再生位置が先頭に戻ります。「最初から」ボタンは currentTime = 0 で先頭に戻してから play() を呼ぶだけで実装できます。
③ volume プロパティで音量を調整する
スライダーで音量を変えながら再生を試せます
0.5
<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>button {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
cursor: pointer;
border-radius: 6px;
border: none;
background: #3b82f6;
color: #fff;
transition: opacity 0.15s;
}
button:hover {
opacity: 0.8;
}
input[type="range"] {
margin: 10px;
width: 200px;
}var audio = document.getElementById('audio');
audio.volume = 0.5;
var volumeControl = document.getElementById('volume-control');
document.getElementById('play-sound').addEventListener('click', function() {
audio.play();
});
document.getElementById('stop-sound').addEventListener('click', function() {
audio.pause();
});
document.getElementById('restart-sound').addEventListener('click', function() {
audio.currentTime = 0;
audio.play();
});
volumeControl.addEventListener('input', function() {
audio.volume = volumeControl.value;
});audio 要素の volume プロパティは 0.0（無音）〜 1.0（最大音量）の範囲で設定します。<input type=”range”> の value は文字列なので、数値として扱う場合は parseFloat() で変換するか、JavaScriptが自動変換する volume プロパティへの代入をそのまま利用できます。
スライダーの変化を検知するには change イベントではなく input イベントを使います。input イベントはスライダーをドラッグしている最中もリアルタイムで発火するため、音量をなめらかに調整できます。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
