実行例

【リスト】BGMウィンドウの HTML

<HTML>
<HEAD>
<TITLE>BGM WINDOW</TITLE>
<SCRIPT type="text/javascript"></SCRIPT>
</HEAD>
<BODY bgcolor="#FFC0CB">
<p align="center">
Tatsuya's Home Page<br>
イヌでもわかるJavaScript講座<br>
<br>
♪ BGM ♪<br>
「<SCRIPT type="text/javascript"></SCRIPT>」<br>
</p>
<form><p align="center">
<input type="button" value="閉じる" onclick="window.close()">
</p></form>
<p align="center">
<SCRIPT type="text/javascript"></SCRIPT>
</p>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>BGM WINDOW</TITLE>
<SCRIPT type="text/javascript"></SCRIPT>
</HEAD>
<BODY bgcolor="#FFC0CB">
<p align="center">
Tatsuya's Home Page<br>
イヌでもわかるJavaScript講座<br>
<br>
♪ BGM ♪<br>
「<SCRIPT type="text/javascript"></SCRIPT>」<br>
</p>
<form><p align="center">
<input type="button" value="閉じる" onclick="window.close()">
</p></form>
<p align="center">
<SCRIPT type="text/javascript"></SCRIPT>
</p>
</BODY>
</HTML>

サンプルだけの HTMLはこちらへ

使い方

(1) まず、BGMを流すポップアップウィンドウのページを作成します。
     自分の好みに作成します。スクリプト内は変更する必要はありません。

       <SCRIPT type="text/javascript"></SCRIPT>
     が、BGMの曲名を表示するスクリプトです。任意の場所に埋め込んでください。

       <SCRIPT type="text/javascript"></SCRIPT>
     が、BGMを流すプレーヤーです。任意の場所に必須で埋め込んでください。

(2) つぎにプルダウンメニューをつけるページの編集です。

     BGMを流すポップアップウィンドウのファイル名(URL)を指定します。
       myHTML = "bgmwin2.htm"; // 子ウィンドウのURL

     ポップアップウィンドウのサイズを自分の好みに調整します。
       window.open(myURL , "bgmwin" , "resizable=yes,width=300,height=200");

     メニューである <OPTION>タグの 1行目は「曲を選んでね」といったタイトルにします。
     ２行目から曲名とそのファイル名(URL)をセットしていきます。
       <OPTION value="">☆☆ お好きな曲を選んでください ☆☆ </OPTION>
       <OPTION value="sunday.mid">日曜画家</OPTION>
       <OPTION value="../nagisar.mid">渚のヒロイン</OPTION>

以上で完成です。

説明

プルダウンメニューで複数の曲リストから好きな曲を選んでもらって、ポップアップウィンドウで演奏させます。

簡単に作ってしまおうと思えば、曲の数だけそれぞれのポップアップページを作って、選択されたページを window.open すれば良いわけですが、ただ、曲のタイトル名とファイル名が違うだけで、ほかのタグは全部同じ、そして曲の数も多いとなれば、それぞれのポップアップページを作っていくのは肉体労働になってきます。

ならば、ひとつのポップアップページにタイトル名とファイル名をパラメータで渡して、表示/演奏させるようにしてみましょう。

まず、プルダウンメニュー側の説明をします。

プルダウンメニューから曲が選択されて、myGo() が呼ばれます。

myHTML = "bgmwin2.htm"; // 子ウィンドウのURL
function myGo(){
     mySelect = document.myForm.myMenu.selectedIndex;
     if (mySelect == 0) return;
     myTitle = document.myForm.myMenu.options[mySelect].text;
     myFile = document.myForm.myMenu.options[mySelect].value;
     myURL = myHTML + "?title=" + escape(myTitle) + "&file=" + escape(myFile);
     window.open( myURL , "bgmwin" , "resizable=yes,width=300,height=200" );
}
mySelect に何番目のメニューが選択されたかを取得します。※ Step.25 参照
0 番目は見出しなので関数から抜けます。
myTitle には、メニューに表示した曲名をセットします。
myFile には、そのファイル名(URL) をセットします。
myURL は、ポップアップウィンドウのページファイル名(URL)ですが、このURLの後ろに曲名とMIDIファイル名をパラメータとしてくっつけてやります。

検索エンジンサイトや規模のでかいサイトを巡回しているときに見かける長～いURLはこのパラメータがくっついているわけです。

書式は
http://www.….jp/index.html?KEYWORD1=DATA1&KEYWORD2=DATA2&…
です。

今回のサンプルでは、
bgmwin2.htm?title=日曜画家&file=sunday.mid
のようになります。
URLの後ろにまず「?」マークをつけて、KEYWORD=DATA をセットします。
受け渡すパラメータが複数あれば、次からは「&」マーク区切りでセットしていきます。
セットしていく順番は気にする必要はありません。

当ステップの規則として、KEYWORD は半角英数字のみ使えます。
DATA 部分はさすがに全角文字が渡せないと困るので使えますが、文字列を escape() にて Unicode に変換(エンコード)する必要があります。
myURL = "bgmwin2.htm?" + "title=" + escape(myTitle) + "&file=" + escape(myFile);

さて、URLが完成したので、window.open して呼び出し側は終わりです。

次に呼ばれたポップアップウィンドウを説明します。
ポップアップウィンドウの作業ですが、まずパラメータをもらわないといけません。

パラメータは、location.search プロパティに入っています。
上記の例では、
?title=%u65E5%u66DC%u753B%u5BB6&file=sunday.mid
が入っています。『日曜画家』は見事 Unicode になっていますね。

この中からキーワード「title」の曲名と、「file」の音楽ファイル名を取り出します。
取り出したら、unescape() にてパソコン上の文字コードへ変換(デコード)します。

「むむ、このページ間データ転送はいろいろ使えそうだ！」
と思った方のためにキーワードからデータを取り出す汎用関数 myGetQuery() を作りました。

【書式】 myStr = myGetQuery ( キーワード )
【例】 myTitle = myGetQuery ( "title" ) ;
です。
もし、指定のキーワードがパラメータになかったらヌルストリング ( "" ) を返します。

こいつを使えば、
myTitle = myGetQuery("title");
myFile = myGetQuery("file");
と簡単に曲名と音楽ファイル名が取り出せました。ああ便利。

最後に、<EMBED>タグですが document.write() で力ずくで書いています。
<SCRIPT type="text/javascript"></SCRIPT>

参考ステップ
Step.13 リンク先を新しいウィンドウで表示してみましょう　※ window.open
Step.25 プルダウンメニューを使って目次を作りましょうその１　
Step.26 プルダウンメニューを使って目次を作りましょうその２　
Step.31 ポップアップウィンドウを開いて BGMを流してみましょうその１　
Step.32 ポップアップウィンドウを開いて BGMを流してみましょうその２　
Step.81 アクセス毎にＢＧＭを変えてみましょう　

"日曜画家" Copyright (C) K.K. All rights reserved.
Intermezzo http://www1.linkclub.or.jp/~medaka34/

"渚のヒロイン" Copyright (C) MIDIBOX All rights reserved.
MIDIBOX http://www32.ocn.ne.jp/~midibox/

▲TOP