MIDI CHANGER を作る


Web ページに付けるＢＧＭとしては MIDI が一般的です。 ＷＷＷブラウザで MIDI を聴くには、Netscape Navigator なら MIDI 用の Plug-Inが必要で、Intenet Explorer の場合は <BGSOUND> タグを使えばプラグイン不要と言われていました（但しコンソールを表示できない）。 しかし最近は、YAMAHA の MID Plug-In for XG などをインストールすることで、IE でも <EMBED> タグからコンソール付きの MID を聴けるようになっています。

Web ページの作者にとっては、ＢＧＭはページがロードされるとさりげなく音楽が流れるといいと考えています。 （ＢＧＭとは、そもそもそうしたものですから。）しかしページを訪れた人は、必ずしもＢＧＭを聴きたいと考えていません。 最近はパソコンの性能も向上してきたので、 MIDI ファイルの読み込みやプラグインの起動にそれほどストレスを感じなくなったものの、 まだそれらを敬遠する人がいます。会社でこっそり見ているから音楽は困るとか（笑）、ＣＤ聴きながらインターネットしているからＢＧＭは要らないよ、 と言う人もいます。MIDI 付きのページが未だにそれほど普及していないのは、そうした事情も手伝っているのかも知れません。

加えて MIDI 設定には不便なところがあります。<A HREF="ABC.mid">ABC.mid</A> のように MIDI ファイルに直接リンクした場合、 Netscape では小さいウィンドウにコンソールがちょうど良く収まって表示されますが、IE では１ページ大のウィンドウになってしまいます。 多くの場合、ページの中で <EMBED> タグから MIDI を起動するのが一般的ですが、 訪れた人に配慮して、或いはページが重くならないように、たとえ autostart を false にして、MIDI を自動的にスタートしないように設定したとしてもページは MIDI ファイルとプラグインを読み込んでしまいます。 MIDI を別ウィンドウで起動するとか、フレームを使うとかの方法もありますが、どうもいまいちです。

そこで私は Dynamic HTML を使用した MIDI CHANGER を考えてみました。これには、以下のような特長があります。

１．ページを読み込んだ時点では、MIDI ファイルやプラグインを読み込まない。（ページが軽くて済む。）
２．同一ページ上で何度でも MIDI の選曲ができる。（MIDI CHANGER たるゆえん。）
３．コンソールの表示・非表示も自由自在。
４．コンソールを表示しなくても、MIDI のスタート・ストップが可能。
５．MIDI のほか、MP3、wave、au、aiff ファイルもＯＫ。

またバージョン 1.02 では、

１．曲の著作権を表示できるように設定。
２．繰り返し演奏（リピートまたはループ）するかどうかのチェックボックスを追加。
３．Netscape 6 にも対応（プラグインがインストールされている必要があります）。
４．要望に応えて最小版も用意。

さっそく試してみましょう。下のドロップダウンリストから好きな曲を選んで下さい。 （IE の場合は MID Plug-In がインストールされている必要があります。Netscape でももちろんプラグインが必要です。） MIDI を終了させるには、「MIDI OFF」を選択します。

コンソールを表示 繰り返し演奏

前バージョンまではＨＴＭＬのヘッダ部分に初期値や関数を定義していましたが、 今回から使いやすくするためにＨＴＭＬ本文内にまとめてプログラムを入れられるようにしました。

まずＨＴＭＬ本文内の適当な個所にドロップダウンリストとチェックボックスを用意します。曲数は何曲でもかまいません。

<!-- ドロップダウンリスト -->
<DIV align="center">
<FORM name="MIDIPLAYER">
<SELECT name="SELECTOR" onChange="ChangeMIDI(this.selectedIndex)">
<OPTION selected>MIDI OFF
<OPTION>（曲名１）
<OPTION>（曲名２）
<OPTION>（曲名３）
<OPTION>（曲名４）
<OPTION>（曲名５）
</SELECT>
<!-- チェックボックス -->
<INPUT type="checkbox" name="Cons" onClick="ChangeMIDI(document.MIDIPLAYER.SELECTOR.selectedIndex)" checked>コンソールを表示
<INPUT type="checkbox" name="Rep" onClick="ChangeMIDI(document.MIDIPLAYER.SELECTOR.selectedIndex)">繰り返し演奏
</FORM>

続いて、スクリプトのソースを入れます。

<SCRIPT Language="JavaScript">
<!--
//ブラウザの種類を取得
check=0;
Br = navigator.appName;
if(document.all) check=1;
else if(document.layers) check=2;
else if((document.getElementById) && navigator.appName.indexOf("Netscape")>-1) check=3;

//<EMBED> タグの前半部分を規定
CSL = '<EMBED autostart="true" height="60" nosave="true" width="144" SRC="';

//MIDI を起動する関数
function ChangeMIDI(M) {
S=document.MIDIPLAYER.SELECTOR.options[M].text;
if (document.MIDIPLAYER.Rep.checked) K='" loop="true" repeat="true"';
else K='" loop="false" repeat="false"';
if (document.MIDIPLAYER.Cons.checked) K+=' control="console">';
else K+= ' hidden="true">';
K+=" <FONT COLOR='#005500'>"+S+"</FONT>";
songs = new Array();
songs[0] = S;
//以下、songs[5] まで MIDI ファイルの定義
songs[1] = 'AAA.mid';
songs[2] = 'BBB.mid';
songs[3] = 'CCC.mid';
songs[4] = 'DDD.mid';
songs[5] = 'EEE.mid';
Copyright = new Array();
Copyright[0] = '';
//以下、Copyright[5] まで曲の著作権の説明
Copyright[1] = 'Copyright (C)2000 <A HREF="http://www.***.ne.jp/~AAA/" TARGET="_top">AAA</A>';
Copyright[2] = 'Copyright (C)2001 <A HREF="http://www.***.com/~BBB/" TARGET="_top">BBB</A>';
//リンクを省略する場合
Copyright[3] = 'Copyright (C)2000 CCC';
//Copyright とリンクの間に改行を入れる場合 <BR> を挿入
Copyright[4] = 'Copyright (C)2000<BR><A HREF="http://www.***.ne.jp/~DDD/" TARGET="_top">DDD</A>';
//著作権の説明を省略する場合
Copyright[5] = '';
if(M==0) BGM = '';
else BGM = CSL+songs[M]+K+'<BR>'+Copyright[M];
if(check==1) document.all.midichanger.innerHTML= BGM;
else if(check==2)
{
with (document.layers["midichanger"].document)
{
write("<HTML><BODY><DIV align='center'>",BGM,"</DIV></BODY></HTML>");
close();
}
}
else if(check==3) document.getElementById("midichanger").innerHTML = BGM;
}
// 以下、MIDI を読み込む場所
document.write("<DIV align='CENTER'><FONT size=5><><A href='http://www.umechando.com/tips/36.htm' target='_top'>MIDI CHANGER</A> ver.1.02</I></FONT>");
document.write(" Copyright(C) <A href='http://www.umechando.com/' target='_top'>梅ちゃん堂</A></DIV>");
if(check==1) document.write("<P id='midichanger'></P>");
else if(check==2) document.write("<P style='margin-bottom:5em'><LAYER name='midichanger'> </LAYER></P>");
else if(check==0) document.write("<FONT color='#ff0000'>Netscape Navigator 4.0 以上または internet Explorer 4.0 以上が必要です。<FONT>");
//-->
</SCRIPT>
</DIV>

例えば MIDI のリストが10曲あるなら、songs[1]〜songs[10] の所に MIDI ファイル名を入れます。 （songs[0] は実は「MIDI OFF」の場合を表しています。）これは、ドロップダウンリストで設定した曲と対応していなければなりません。 songs[0] が MIDI OFF に対応します。
曲の著作権の説明も Copyright[1]〜Copyright[10] に同数定義します。


ご要望に応えて、下のような最小版も用意しました。 ２行スペースに収まります。

MIDI CHANGER ver.1.02 by 梅ちゃん堂

以下のソースをＨＴＭＬ本文内の適当な場所に入れます。

<P>
<!-- ドロップダウンリスト -->
<DIV ALIGN="CENTER">
<FORM name="MIDIPLAYER2">
<SELECT name="SELECTOR2" onChange="ChangeMIDI_2(this.selectedIndex)">
<OPTION SELECTED>MIDI OFF
<OPTION>（曲名１）
<OPTION>（曲名２）
<OPTION>（曲名３）
<OPTION>（曲名４）
<OPTION>（曲名５）
</SELECT> <FONT size=-1><A href='http://www.umechando.com/tips/36.htm' target='_top'>MIDI CHANGER</A> ver.1.02 by <A href='http://www.umechando.com/' target='_top'>梅ちゃん堂</A></FONT>

<SCRIPT Language="JavaScript">
<!--
//ブラウザの種類を取得
check=0;
Br = navigator.appName;
if(document.all) check=1;
else if(document.layers) check=2;
else if((document.getElementById) && navigator.appName.indexOf("Netscape")>-1) check=3;

//<EMBED> タグの前半部分を規定
CSL = '<EMBED autostart="true" nosave="true" SRC="';

//MIDI を起動する関数
function ChangeMIDI_2(M) {
S=document.MIDIPLAYER2.SELECTOR2.options[M].text;
//初期設定を繰り返し演奏にするなら下の１を、しないなら２を残す。
K='" loop="true" repeat="true"'; //・・・１
K='" loop="false" repeat="false"'; //・・・２
K+= ' hidden="true">';
K+="<FONT color='#005500'><STRONG>「"+S+"」</FONT></STRONG>";
songs = new Array();
songs[0] = S;
//以下、songs[5] まで MIDI ファイルの定義
songs[1] = 'AAA.mid';
songs[2] = 'BBB.mid';
songs[3] = 'CCC.mid';
songs[4] = 'DDD.mid';
songs[5] = 'EEE.mid';
Copyright = new Array();
Copyright[0] = '';
//以下、Copyright[5] まで曲の著作権の説明
Copyright[1] = 'Copyright (C)2000 <A HREF="http://www.***.ne.jp/~AAA/" TARGET="_top">AAA</A>';
Copyright[2] = 'Copyright (C)2001 <A HREF="http://www.***.com/~BBB/" TARGET="_top">BBB</A>';
//リンクを省略する場合
Copyright[3] = 'Copyright (C)2000 CCC';
//Copyright とリンクの間に改行を入れる場合 <BR> を挿入
Copyright[4] = 'Copyright (C)2000<BR><A HREF="http://www.***.ne.jp/~DDD/" TARGET="_top">DDD</A>';
//著作権の説明を省略する場合
Copyright[5] = '';
if(M==0) BGM = '';
else BGM = CSL+songs[M]+K+' <FONT size=-1>'+Copyright[M]+'</FONT>';
if(check==1) document.all.midichanger2.innerHTML= BGM;
else if(check==2)
{
with (document.layers["midichanger2"].document)
{
write("<HTML><BODY><DIV align='center'>",BGM,"</DIV></BODY></HTML>");
close();
}
}
else if(check==3) document.getElementById("midichanger2").innerHTML = BGM;
}
// 以下、MIDI を読み込む場所
if(check==1) document.write("<DIV id='midichanger2'></DIV>");
else if(check==2) document.write("<DIV id='midichanger2' style='position:absolute'></DIV>");
//-->
</SCRIPT>
</FORM>
</P>

Q1: ページを開いたときに自動的に演奏を開始させたのですが。

まずドロップダウンリストの演奏開始させたい曲を SELECTED にします。

<SELECT name="SELECTOR2" onChange="ChangeMIDI_2(this.selectedIndex)">
<OPTION>MIDI OFF
<OPTION SELECTED>（曲名１）//この曲を選択
<OPTION>（曲名２）
<OPTION>（曲名３）
<OPTION>（曲名４）
<OPTION>（曲名５）
</SELECT>

次に <BODY> タグの onLoad イベントで関数を呼び出せばＯＫです。

<BODY onLoad="ChangeMIDI_2(document.MIDIPLAYER2.SELECTOR2.selectedIndex)">



次のトピックは「リンク先のウィンドウ」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで