応用編(MIDIランダム再生)

nerve > sound lectures > how to publish sound files (advanced) > random player

何曲かのMIDIファイルを来るたびにランダムに再生するということを実現するには、再生するためのタグをその都度書き換える必要があります。

その書き換えを自動で行う方法は色々ありますが、手軽なのはJavaScriptを使う方法です。 JavaScriptは、Netscape社とSun社がウェブサイトの処理能力を高めるために共同で開発したスクリプト言語で、Javaとは別の言語です。HTMLファイルの内部に書き込んで、ページに動的な変化を付けることが出来ます。

ここで紹介するスクリプトは、Netscape Navigator 3.0以降、Internet Explorer 4.0以降に対応しています。

仕組み

このスクリプトが書き込まれたファイルを表示すると、スクリプトはパソコン内部にある時計の「秒」の値を使って、表示されるたびに擬似的にランダムな数を計算しています。

あらかじめ再生したい曲には番号を振ってあって、計算した数に対応した番号の曲を再生するためのタグを本文中に自動的に書き出します。

↑[このページの先頭へ]

プログラム

このプログラムは、設定や計算をしたり曲の名前に番号を割り振ったりするためのメイン部分と、実際に曲の再生のためのプラグインパネルを表示させるための部分の2つに別れます。HTMLファイルへの組み込み方はサンプルページのソースを参照してください。

メイン部分

<script type="text/javascript" language="javascript">
<!--
// 何曲のデータをランダム再生するか
files = 10;
songname = new Array(files);
// このファイルから見たMIDIファイルのディレクトリ
dir = "ディレクトリ";
// 再生したいファイル名
songname[0]="MIDIファイル名1"; songname[1]="MIDIファイル名2";
songname[2]="MIDIファイル名3"; songname[3]="MIDIファイル名4";
songname[4]="MIDIファイル名5"; songname[5]="MIDIファイル名6";
songname[6]="MIDIファイル名7"; songname[7]="MIDIファイル名8";
songname[8]="MIDIファイル名9"; songname[9]="MIDIファイル名10";
//再生条件
autostart = "true";
loop = "false";
// (擬似)ランダムにタグ出力
function player(){
    if(navigator.appVersion > "3"){
      t    = new Date();
      sec  = t.getSeconds();
      n    = Math.floor(sec/(60/files));
      opt  ='" type="audio/midi" width="150" height="40"';
      opt += ' autostart ="'+autostart+'"';
      opt += ' repeat="'+loop+'"';
      opt += ' loop="'+loop+'"';
      document.write('<embed src="'+dir+songname[n]+opt+'>');
   }
}
//-->
</script>

メイン部分は、必ず<head>から</head>の間において、画面に表示されないようにします

強調表示されている部分は、下の説明を参照して、使い方に合わせて書き換えてください。

files = 10;

ランダム再生するファイルの数を指定します。

dir = "ディレクトリ";

スクリプトを書き込んだHTMLファイルから見た、MIDIファイルを置いているディレクトリを指定します。同じディレクトリに置くなら、dir = ""; としてください。

MIDIファイル名1・・・・

filesの値で指定した数だけ曲名を指定します。同じ曲を幾つも指定しても構いません。filesの値よりも多く指定するとエラーになるので、10個以下に減らす場合にはその行を削除してください。

autostart = "true"; loop = "false";

ファイル再生の条件をこの二つだけ指定出来ます。MIDIファイルを再生するためのタグのオプションと同じように指定してください。

ここに書いてある設定部分以外を書き換えた場合、動作の保証はできません。

↑[このページの先頭へ]

表示部分

<!-- ランダムMIDI再生パネル表示スクリプト -->
<script type="text/javascript" language="javascript">
<!--
   player();
//-->
</script>
<!-- スクリプトここまで -->

表示させるためのスクリプトは、必ず<body>から<body>までの間に一つだけ置く事が出来ます。特に書き換える必要はありません。表示させる位置は自由です。

ブラウザで表示する場合には、このスクリプトがMIDI再生用のタグに置き換わって表示されます。

↑[このページの先頭へ]

サンプルページ

実際にこのスクリプトを組み込んだ動作サンプルページを作ってみました。サンプルページのソースは次の通りです。CSS対応のグラフィカルブラウザで見ると背景色が薄い青に見える部分が組み込んだソースです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="ja">
<head>
<title>Random Player</title>
   <meta http-equiv="Content-Type"
      content="text/html; charset=Shift_JIS">
   <meta http-equiv="Content-Script-Type"
      content="text/javascript">
   <meta http-equiv="Content-Style-Type"
      content="text/css">
   <meta name="author" content="Koji Kusanagi">
   <link rel="stylesheet" href="default.css" type="text/css">
<script type="text/javascript" language="javascript"> <!-- // 何曲のデータをランダム再生するか files = 10; songname = new Array(files); // このファイルから見たMIDIファイルのディレクトリ dir = "midi/"; // 再生したいファイル名 songname[0]="0000.mid"; songname[1]="0100.mid"; songname[2]="0200.mid"; songname[3]="0300.mid"; songname[4]="0400.mid"; songname[5]="0500.mid"; songname[6]="0600.mid"; songname[7]="0700.mid"; songname[8]="0800.mid"; songname[9]="0900.mid"; //再生条件 autostart = "true"; loop = "false"; // (擬似)ランダムにタグ出力 function player(){ if(navigator.appVersion > "3"){ t = new Date(); sec = t.getSeconds(); n = Math.floor(sec/(60/files)); opt ='" type="audio/midi" width="150" height="40"'; opt += ' autostart ="'+autostart+'"'; opt += ' repeat="'+loop+'"'; opt += ' loop="'+loop+'"'; document.write('<embed src="'+dir+songname[n]+opt+'>'); } } //--> </script>
</head> <body> <h1>動作サンプル</h1> <p>このページを読み込むたびに、ランダムに10種類のMIDIが流れます。</p> <div class="sound">
<!-- ランダムMIDI再生パネル表示スクリプト --> <script type="text/javascript" language="javascript"> <!-- player(); //--> </script> <!-- スクリプトここまで -->
</div> <div class="pagetop"> <a href="l2_rnd.html">↑前のページに戻る</a> </div> </body> </html>
↑[このページの先頭へ]
[ 応用編目次 ]← →[ MIDIノンストップ再生 ] [ sound lectures ] [ 目次 ]

last updated February 13, 2001.

nerve (雑音空間) - http://k2works.com/nerve/

1997-2001 (c) nerve@k2works.com(K. Kusanagi), all rights reserved.