音声ファイルのボリュームを操作する

音声ファイルのボリュームを制御する

audio要素はvolumeプロパティとmutedプロパティを持ち、この2つのプロパティの値を設定することで再生している音声ファイルのボリュームを制御することができます。

volumeプロパティは0.0〜1.0の間で値を指定することができます。
0.0は無音、0.5が50%の音量、1.0が最大音量のように設定します。

もう1つのmutedプロパティの値は論理値でtrueかfalseを設定します。
trueなら消音（ミュート）、falseは消音解除の状態になります。
このプロパティはvolumeプロパティよりも優先され、trueのときはvolumeプロパティの値が最大音量でも音は出ません。

以下の例は、音声の再生と一時停止に加えて、消音とボリュームを自由に設定できるようにしています。
赤字の箇所が消音とボリューム調整に関するコードです。

サンプルページはこちら

HTML コード例

<audio src="./audio/bgm01.mp3" type="audio/mpeg"></audio>
<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>
<button id="btn_mute">消音</button>
<input type="range" id="volume" value="0.5" min="0.0" max="1.0" step="0.1">

JS コード例

window.addEventListener('DOMContentLoaded', function(){
  const btn_play = document.getElementById("btn_play");
  const btn_pause = document.getElementById("btn_pause");
  const btn_mute = document.getElementById("btn_mute");
  const slider_volume = document.getElementById("volume");
  const audioElement = document.querySelector("audio");

  // ボリュームの初期設定
  audioElement.volume = slider_volume.value;

  btn_play.addEventListener("click", e => {
    audioElement.play();
  });

  btn_pause.addEventListener("click", e => {
    audioElement.pause();
  });

  btn_mute.addEventListener("click", e => {

    if( audioElement.muted ) {
      audioElement.muted = false;
      btn_mute.textContent = "消音";
    } else {
      audioElement.muted = true;
      btn_mute.textContent = "消音解除";
    }
  });

  slider_volume.addEventListener("input", e => {
    audioElement.volume = slider_volume.value;
  });
});

id属性を使って消音ボタンとボリュームを調整するスライダーをそれぞれ取得して、イベントリスナーを登録します。

消音ボタン「btn_mute」では、クリックされたらmutedプロパティの値を確認し、trueだったら消音なのでfalseを設定して消音解除し、反対にfalseならtrueを設定して消音にします。
mutedプロパティに設定する値にあわせて、ボタンのラベルも「消音」と「消音解除」を切り替えています。

ボリュームを調整する「volume」は非常にシンプルです。
ボリュームの変更があったらvalue属性の値をそのままaudio要素valueプロパティに設定します。

ボリュームに限り、ページが読み込まれたタイミングでもaudio要素valueプロパティへの設定を行っています。
ここではinputプロパティの変更前のvalue属性「0.5」を設定します。