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

embedタグをinnerHTMLで書き換える

以下のタグとスクリプトを、HTMLのbody内に書き込んでみてください。 今回も01～03と名づけたmp3ファイルを使用していますので、 HTMLファイルと同じフォルダに準備してください。

<div id="music">
<embed src="01.mp3" autostart="false">
</div>

<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 emb = '<embed # autostart="true">';
 emb=emb.replace('#','src="'+arrMP3[num]+'"');

 document.getElementById("music").innerHTML = emb;
}

</script>

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

上記スクリプトの解説

では上記のスクリプトを詳しく見ていきましょう。

embedタグ

<div id="music">
<embed src="01.mp3" autostart="false">
</div>

今回はembedタグを根こそぎ書き換えるので、embedタグ全体をdivタグで囲んでいます。 そしてdivタグにid名「music」を指定しました。

embedタグのsrc属性値にダミーのmp3ファイルを指定すると、音楽ファイルと認識さずプレーヤーが表示されません。 それで今回は01.mp3を指定し、 自動再生しないようにautostartの値を「false」とします（ブラウザによっては再生してしまうものもあります）。

必要ならembedタグにwidth属性やheight属性、loop属性を設定して下さい。 height属性値を0にしてプレーヤーを表示しなければ、前項のbgsoundタグと同じような感じにできます。

フォーム

<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){…}

こちらも前項と同じです。引数numを設け、曲を選別できるようにしています。

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

mp3ファイルのパスを配列arrMP3に格納していきます。

var emb = '<embed # autostart="true">';
emb=emb.replace('#','src="'+arrMP3[num]+'"');

次に、変数embを宣言して、embedタグの骨格を登録します。 src属性が入る部分に「#」を入れています。 また今回は自動再生させるため、autostart属性値は「true」です。 （タグ内の属性にダブルクォーテーションを使っているので、 タグ全体を囲むのにシングルクォーテーションを利用しています）。

次の行でreplace()を利用して「#」を検索し、src属性と置換します。 置換文字は「src="」とmp3ファイルのパスと「"」を結合させたものです。 右辺arrMP3[num]は前項と同様です。引数numの数値によって該当するmp3ファイルが変わります（arrMP3[1]なら02.mp3）。

そして、置換された文字列（embedタグ）を再び変数embに格納します。

document.getElementById("music").innerHTML = emb;

最後に、document.getElementByIdでid名「music」のdivタグを取得し、 innerHTMLを使って新たなsrc属性値が記入されたembedタグに書き換えます。

このようにして少し強引ですが、embedタグでも音楽の切り替えを行うことができます。 しかしHTML5では新たにaudioタグというものができました。 これを使った音楽の切り替えについて、次のページで見てみたいと思います。