音楽を切り替える１JavaScript入門

bgsoundタグのsrc属性値を切り替える

Internet Explorerのみで使えるbgsoundタグを使うと、 srcの属性値を切り替えるだけで簡単に音楽ファイルを切り替えることができます。 今回はその方法について見てみましょう。

以下のHTMLタグとスクリプトをHTMLのbody内に記入してください。 またHTMLファイルと同じ場所に、01.mp3，02.mp3，03.mp3と３つの音楽ファイルを置いておきます （mp3ファイルは各自ご用意下さい）。

<bgsound src="dummy.mid" id="music" loop="infinite">
<form>
<input type="button" value="音楽1" onclick="melody(0)" />
<input type="button" value="音楽2" onclick="melody(1)" />
<input type="button" value="音楽3" onclick="melody(2)" />
</form>

<script>

function melody(num)
{

  var arrMP3 = new Array("01.mp3","02.mp3","03.mp3");

  var player=document.getElementById("music");
  player.src = arrMP3[num];

}

</script>

サンプル（音量に注意してください！）

スクリプトの解説

では、上記のスクリプトについてみてみましょう。

bgsoundタグ

<bgsound src="dummy.mid" id="music" loop="infinite">

まずはbgsoundタグですが、IDを指定しています。IDの値は「music」としました。 loopでinfiniteを指定することにより、ループ再生させています。

srcの値は適当に記述していますが、 これは偽のパスを指定して、ページを開いたときにいきなり鳴らないようにしている訳です。

フォーム

<form>
<input type="button" value="音楽1" onclick="melody(0)" />
<input type="button" value="音楽2" onclick="melody(1)" />
<input type="button" value="音楽3" onclick="melody(2)" />
</form>

フォーム内ではボタンを３つ設置しています。 それぞれ音楽を選択させます。 クリックしたら関数melody()を呼び出します。 引数を個々に設定して、目的の曲が流れるようにします。

関数melody()

function melody(num){…}

関数melody()の中では、bgsoundタグのsrcの値を変化させる手続きを記入していきます。 引数numを変えることで、曲も変化させることができます。

var arrMP3 = new Array("01.mp3","02.mp3","03.mp3");

関数内で最初に、配列arrMP3を作成しています。 各mp3ファイルのパスを記入しています。

var player=document.getElementById("music");
player.src = arrMP3[num];

続いてdocument.getElementByIdで、 ID名「music」を持つbgsoundタグを探し、変数playerに代入します。

今度はplayerのsrc値を指定します。代入値はarrMP3[num]です。 つまり関数melody(2)を呼び出したなら、arrMP3[2]は配列の3番目の要素「03.mp3」なので、 それがbgsoundのsrc値に指定される訳です。

このようにbgsoundタグでは簡単に音楽を切り替えることができますが、 残念ながらInternet Explorerでしか使えません。 他のブラウザでも使えるembedタグでも同じようにしてみましたが、残念ながら駄目でした。 それで次のページではinnerHTMLを使ってembedタグまるごと書き換える方法について考えてみたいと思います。