MidiPlayer Ver.1.2
ページ毎にON/OFF、選曲が指定できる
はじめに
Webページで、BGMを流すには、普通
  <EMBED SRC="****" WIDTH=150 HEIGHT=40 AUTOSTART=TRUE LOOP=TRUE>
のようなタグを書きます。でも、この方法には、次のような欠点があります。
  • BGMが要らない人は、ページを表示するごとに、停止ボタンを押さなければならない。
  • 好きじゃない曲でも変えられない。
そこで、
  • 選曲ができる。
  • 選曲やON/OFFの状態をページ毎に記憶しておき、再訪問の時は自動で設定される。
  • デザインは、CSSファイルを編集することで変更できる。
を実現する、スクリプトを書きました。
サンプル
(1) 説明なし、選曲なし、スタイルシートなし
(2) 説明なし、選曲あり、スタイルシートなし
(3) 説明あり、選曲なし
(4) 説明あり、時刻選曲
(5) 説明あり、メニュー選曲
(6) 説明なし、ランダム選曲、ボタンに画像を使用
(7) 説明あり、選曲なし、ボタンに画像を使用、オプション指定
(8) 説明あり、メニュー選曲、背景・ボタンに画像を使用、オプション指定
(9) 説明あり、ランダム選曲
組み込み方
(1)「midiplayer.js」をダウンロードする  
(2))<HEAD>と</HEAD>の間に、次のようなスクリプトを挿入する
<SCRIPT Language="JavaScript" SRC="midiplayer.js"></SCRIPT>
(3)<BODY>タブの後に、例えば、次のようなスクリプトを挿入する
<SCRIPT language="JavaScript">
<!--
midi = new Array();
note = new Array();
midi[0] = "h_green_o.mid";
note[0] = "♪グリーンスリーブス / イギリス民謡/ オルゴール版";
midiPlayerOne("mp_blue.css", midi, note);
//-->
</SCRIPT>
書式
【固定曲】
決められた曲を演奏します。
  midiPlayerOne(デザイン, ファイル名の配列, 説明文の配列)
【ランダム選曲】
複数の曲からランダムに選曲します。
  midiPlayerRandom(デザイン, ファイル名の配列, 曲数, 説明文の配列)
【時刻選曲】
現在の時刻に応じて選曲します。例えば、曲数=4ならば、0〜5時、6〜11時、12〜17時、18〜23時で、曲が変わります。
  midiPlayerOclock(デザイン, ファイル名の配列, 曲数, 説明文の配列)
【メニュー選曲】
曲目メニューから選曲します。
  midiPlayerSelect(デザイン, ファイル名の配列, 曲数, メニューの配列, 説明文の配列)
※最後の引数の「説明文の配列」は省略可能です。
オプション指定
書式 内容 省略時
MP_TEXT_PLAY = "xxx"; PLAYボタンに表示する文字列  演奏
MP_TEXT_STOP = "xxx"; STOPボタンに表示する文字列 停止
MP_TEXT_SELECT = "xxx"; SELECTボタンに表示する文字列 選択
MP_AUTO_LOAD = xxx; 自動演奏する:1 しない:0
MP_MAQUEE_SPEED = xxx; マーキー表示の速度 動かさない:0 100
CSSファイル
ID 内容
PLAYER 全体
MIDIFORM フォームタグ
MIDITEXT 曲説明の表示枠
MIDISEL 曲目選択枠
PLAYBTN PLAYボタン or SELECTボタン
STOPBTN STOPボタン
基本構造
<DIV id="PLAYER">
  <FORM id="MIDIFORM">
    <INPUT id="MIDITEXT" type="text">
    <SELECT id="MIDISEL">
      <OPTION>
    </SELECT>
    <INPUT id="PLAYBTN" type="button">
    <INPUT id="STOPBTN" type="button">
  </FORM>
</DIV>

音楽ファイルは、HALMIDI.com からダウンロードしました