nerve (雑音空間) - ホームページに音を載せる(応用編・ランダム再生)

何曲かの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>の間において、画面に表示されないようにします。

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

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

表示部分

表示させるためのスクリプトは、必ず<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ランダム再生)

仕組み

プログラム

メイン部分

表示部分

サンプルページ