JavaScript

最終更新日:
公開日:

レシピ

音声

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

音声ファイルのボリュームを上下したり消音(ミュート)する方法について解説します。

この記事のポイント

  • volumeプロパティ0.01.0の間で音量を指定する
  • mutedプロパティの値は論理値で消音のときはtrue、消音解除はfalse
  • mutedプロパティvolumeプロパティよりも優先される

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

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

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

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

Note

ここでは音声ファイルの再生/一時停止の実装については触れません。こちらについては別記事「音声ファイルの再生、一時停止を操作する」を参照してください。

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

サンプルページはこちら

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」を設定します。