音量とミュート

更新日:2015.05.16
  1. HOME
  2. JavaScript入門(HTML5編)
  3. 音量とミュート

このページでは、ビデオや音声ファイルの音量を調整する方法について見ていきます。 タイマーと組み合わせれば、フェードイン・フェードアウトなどの効果を出せるでしょう。

音量に関連したスクリプト

まずは音量調節に関連したスクリプトを見ておきましょう。

media.volume = 0 ~ 1.0
メディアのボリュームを調節します。0が無音で1.0が最大になります。
media.muted = true/false
メディアを無音(ミュート)にするかどうか指定します。trueでミュートになります。

mediaはメディアオブジェクトで、id名の付いたvideoタグやaudioタグのメディアを以下のようにして取得できます。

var media = document.getElementById("id名")

音量調節のサンプル

以下は、音声ファイルのフェードイン&フェードアウトを実装したサンプルスクリプトです。


<audio id="msc" controls loop> 
<source src="music/sample.ogg">
<source src="music/sample.mp3">
</audio>
<br>
<button type="button" onclick="fadein()">フェードイン</button> 
<button type="button" onclick="fadeout()">フェードアウト</button>

<script>
//mediaオブジェクトの取得 
var media = document.getElementById("msc");

//フェードイン関数 
function fadein()
{
  var vl = media.volume;
  if (vl < 1.0)
  {
    media.volume = Math.ceil((vl+0.1)*10)/10;
    setTimeout("fadein()",200);
  }
}

//フェードアウト関数 
function fadeout()
{
  var vl = media.volume;
  if (vl > 0)
  {
    media.volume = Math.floor((vl-0.1)*10)/10;
    setTimeout("fadeout()",200);
  }
}
</script>

サンプルの詳細説明

それでは、上記のサンプルソースを詳しく見ていきましょう。

audioタグ

<audio id="msc" controls loop>
<source src="music/sample.ogg">
<source src="music/sample.mp3">
</audio>

まずはオーディオタグです。id名を「msc」にしました。 またコントロールを表示し、ループ再生するように記述しています。

sourceとして、mp3ファイルとoggファイルを用意しました。 FireFoxではmp3は再生できないので、oggファイルも必要なのです。

関数呼び出しボタン

<button type="button" onclick="fadein()">フェードイン</button>
<button type="button" onclick="fadeout()">フェードアウト</button>

続いてボタンを2つ設置しています。フェードイン関数とフェードアウト関数を呼び出すようにしています。

mediaオブジェクトの取得

var media = document.getElementById("msc");

グローバル変数mediaを宣言して、document.getElementById()でオーディオオブジェクトを取得しています。

フェードイン関数

function fadein()
{
  var vl = media.volume;
  if (vl < 1.0)
  {
    media.volume = Math.ceil((vl+0.1)*10)/10;
    setTimeout("fadein()",200);
  }
}

今度は関数fadein()を見ていきます。まずは変数vlを宣言し、media.volume現在の音量を取得し、格納します。

続いてif文で、最大音量に届いているか確認します。まだ音量を上げる余地があるなら、if文の中の処理を行います。

if文の中で、変数vlの値を0.1加えて、media.volumeに代入します。 変数vlはきっかりした数字ではないので、「10倍して切り上げ→10で割って」少数1桁ぴったりの数にしています。

最後にsetTimeout()を使って処理を繰り返すようにしています。最大音量になるまで、200ミリ秒毎にfadein関数を呼び出します。

フェードアウト関数

function fadeout()
{
  var vl = media.volume;
  if (vl > 0)
  {
    media.volume = Math.floor((vl-0.1)*10)/10;
    setTimeout("fadeout()",200);
  }
}
</script>

もう一つはフェードアウト関数です。フェードイン関数と同じように、まず最初に変数vlに現在の音量を格納します。

続いてif文で、最小音量になっているか確認します。まだ音量を下げる余地があれば、if文の中の処理を行います。

if文の中で変数vlの値から0.1減らして、media.volumeに代入します。 先程と同じく、変数vlを少数1桁に揃えるため「10倍→切捨て→10で割る」という処理を行っています。

最後に、setTimeout()で、200ミリ秒毎にfadeout()を呼び出し、音量が0になるまで繰り返します。