JavaScriptでBGM再生 別ウインドウ版

見る人がBGMを選択できるようなJavaScriptです。
別ウインドウで開くので、ページを移動してもBGMが終了しません。
なお、サンプルで使用しているMIDIファイルはRingさんの物を使わせていただきました。

サンプル

BGM1/ BGM2 / BGM3

このように別ウインドウが開き、そのウインドウでBGMが再生されます。
(若干再生までに時間がかかりますが、使用するMIDIファイルによります)

BGMを再生するページを作成

まず始めにBGMを再生するHTMLを用意します。上のサンプルではaaa.html, bbb.html, ccc.htmlの3つを作成しています。このサンプルの各HTMLファイルの中身は

---

<embed src="filename.mid" type="audio/midi" width="100" height="25" autostart="true"></embed>

---

このようになっていて、filename.midの部分を使用するファイルに変更しています。
サンプルでは相対アドレスで書いていますが、http://から始まるアドレスで書かないと動作しないこともあるので音が出ないときは試してみてください。

また、このタグはMIDIファイルの場合ですが、他ファイルを使う場合は形式毎に異なります

各メディア毎のプラグイン再生を参考にしてみてください。

• Real Audioプラグイン再生
• MP3埋め込み再生
• Windows Media Audio埋め込み再生

HTMLタグを自動で作成することも可能です

記述方法

次にBGMウインドウを呼び出す側のファイルのHEADタグ内に

<SCRIPT type="text/javascript"> <!-- function bgmselect(bgmURL){ var scriptwin = window.open(bgmURL,'bgmwindow','toolbar=no,location=no,resizable=no,status=yes,width=200,height=120');} // --> </SCRIPT>

と書きます。コピーなどして使ってください。
その後リンクを張るところに
<A HREF="#" onClick="bgmselect('aaa.html');return false">BGM1</a>
<A HREF="#" onClick="bgmselect('bbb.html');return false">BGM2</a>
<A HREF="#" onClick="bgmselect('ccc.html');return false">BGM3</a>

最初に作ったHTMLファイルのアドレスを(　)の中に記述します。JavaScript部分はBGMのファイル形式には関係ないのでこのままでOKです。

注意点

まず各ファイル形式毎にBGM再生側のウインドウ記述が変わるのでそこに注意してください。BGMが再生されないときはまずそのBGM再生側のHTMLだけでテストしてみてください。

関連ページ

• MIDI埋め込み再生
• Windows Media Player用埋め込み再生HTML自動作成