JavaScript

最終更新日:
公開日:

レシピ

動画

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

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

この記事のポイント

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

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

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

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

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

Note

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

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

サンプルページはこちら

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