JavaScript入門[HTML5編]音量とミュート

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

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

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>

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

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を少数１桁に揃えるため「10倍→切捨て→10で割る」という処理を行っています。

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