動画ファイルのボリュームを操作する

動画ファイルのボリュームを制御する

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

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

もう1つのmutedプロパティの値は論理値で、消音のtrueか消音解除のfalseを設定します。
このプロパティはvolumeプロパティよりも優先されるため、trueのときはvolumeプロパティの値が最大音量になっていても音の出ない状態になります。

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

サンプルページはこちら

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <video type="video/webm" src="./movie/swiss.mov"></video>
  <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">
</article>

CSSはvideo要素の表示を調整するために指定します。

CSS コード例

video {
  display: block;
  margin-bottom: 20px;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  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");

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

  // 再生ボタンを押したとき
  btn_play.addEventListener("click", (e) => {
    videoElement.play();
  });

  // 一時停止ボタンを押したとき
  btn_pause.addEventListener("click", (e) => {
    videoElement.pause();
  });

  // 消音／消音解除ボタンを押したとき
  btn_mute.addEventListener("click", (e) => {

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

  // 音量調整スライダーを操作したとき
  slider_volume.addEventListener("input", (e) => {
    videoElement.volume = slider_volume.value;
  });
});

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

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

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

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