最終更新日


MIDIの音楽とJavaScript


MIDIの音楽を鳴らすのは、機種依存性のないものでは、embededタグを使うか、A(Anchor)タグを使ってmidiファイルにリンクするかですが、ファイルをダウンロードしたあとは、Media Playerのようなプラグインソフトを呼び出すか、関連づけられているソフトを起動するかして鳴らしてくれます。これは、CDなみの音質が出るというmp3やwmaファイルでも、ストリーミグビデオ、wmvファイルで動画を見るときも同じです。

ここでは、JavaScriptの応用として、3通りの方法でトライしてみます。いずれも、フォームの選択項目(selectフォーム)にあるMIDIファイルを選択するのですが、そのあとの処理を変えてみます。最初のものは、document.writeで、EMBEDタグを書き出すのですが、body部に書くと、更新ボタンを押さないとだめだし、head部に書くと、情報が消えてしまうとか欠点があります。2番目は、そういう問題点をみごとに解決したもので、innerHTMLを使うということで、DOMの応用としても重要かと思います。3番目は、location.hrefを使って、A(Anchor)タグを使うと同じ効果をあげるものです。簡単だし、とくに問題もありません。

なお、このページは、JavaScript基礎、JavaScript応用2 にあったものをまとめて整理したもので、それらの延長上のものと位置づけており、JavaScript関連話題もさかんに出てきます。

1 MIDI1-フォームの選択肢を使う-

1 Midi1-フォームの選択肢を使う- でお試しください。

このプログラムはembededタグを使って、midiを鳴らそうというものです。「ホームページに今すぐ活かせるJavaScript」のP137「乱数によるBGM切り替え」及びP154「選択項目」を参考にしましたが、formの中でも、かなり難解な部類でしょう。

form NAME="myform" の中のSELECT NAME="mySEL"から、onChange="getVal()"で、関数getVal()を呼んでいます。

 function getVal() {
	Obj    = document.myform.mySEL;
	selNo  = Obj.selectedIndex;
	selVal = Obj.options[selNo].value;
	return selVal;
 }
 オブジェクトの関連が複雑ですが、選択肢の中味、ここではmidiファイル名を返します。
 BODYの中で、document.writeを使って、EMBEDタグを書き出しています。

   document.write("<EMBED SRC='" + getVal() + "' AUTOSTART='true' 
                                   HIDDEN='false' width=200 height=200>");
 として利用しています。

JavaScriptなどを使わずに、普通に書くと、
"<EMBED SRC="sakura.mid" AUTOSTART="true" HIDDEN="false" >"
となるところです。HIDDEN="true" とする方が多いですが、Media Playerなどのプラグインソフトのアイコンが出なくなり、BGMらしくはなりますが、止めたいときに簡単に止められず、私は好きではありません。また、 LOOP='true' とされると、そのページをみている限り、いつまでも繰り返してくれて、勘弁してほしいと思うことが多いです。ブラウザの「中止」ボタンを押すととまるとのことですが、たいていはそのページからは即座にさようならです。falseの場合は、省略してもいいのだから、記述も簡単になるし、ユーザの自由にまかせることを優先すべきと思うのですが(写真のスライドショーというのも同じ意味で好きではありません)。

EMBED タグには、あと、VOLUME=40 TYPE='audio/midi' などを書きますが、省略可能です。上記、document.write中にある widthとheightは、プラグインソフトのアイコンの大きさを指定しているのでしょう。

document.writeを、HEADに書いている関数の中には書くと、プラグインの画面のみになり、演奏はしてくれるが、すべて消されてしまいます。「戻る」ボタンでもとの画面にはなりますが、それもあまり面白くないので、BODYに書きました。すると、「更新ボタン」を押さないと演奏しないことがわかりました。

関数、getVal()の返り値を使うのに、直接、関数名を書いていますが、どのプログラム言語とも共通していますね。この点は、上記の本のP129「曜日ごとにページの背景色を変える」を参考にしました。

このプログラムの問題点は、前述のように、IE6.0,NN7.0では更新ボタンを押さないと演奏しないことことですが、次のinnerHtmlを使うことでMIDI演奏に利用することで解決しています。なお、これも基本はEMBED タグを使ったものです。

2 MIDI2-innerHTMLを使う-

2 Midi2-innerHTMLを使う- でお試しください。

MIDI演奏には、前と同じくEMBEDを使うのですが、BODY部に戻ってdocument.writeの中に書いていたのを、今回のはHEAD部の関数の中で、DOMを利用して、innerHTMLにEMBEDタグを代入するという形です。曲を選択すると同時に演奏するし、NN6.21でも、プラグインが入っていれば演奏してくれます。

これは、パソコン通信、Niftyのホームページ作成上級フォーラムFHPEXP の#11会議室に、私の質問(#3563、02/1/5)がもとになって、長いツリーができましたが、その過程で平井　公大さん がお作りになったものを(#3574　02/01/08)、核心部のみを許可をえて、使わせていただくものです。midi2.htmlの関数部分はたったの2行といたって簡潔なものになります。

function Music( m ) {
  var str = "<EMBED name='msc' SRC='" + m + "' AUTOSTART='true'>";
  if ( document.getElementById ) {
    document.getElementById('contents').innerHTML = str;
  }
}

ここで、引数m は、選択されたmidiファイル名です。以前のは、このstrをBODY部に戻ってdocument.writeの中に書いていたのですが、今度のは BODY部に戻る前に、innerHTMLにEMBEDタグを代入する という形で書き出しているから、ただちに演奏されるのでしょう。

getElementById('contents')は、BODY部のDIVタグでid指定していますが、ここにmidiプラグインが呼び出されるのでしょう。レイアウトの関係で、試行錯誤の末、left:130px;top:500px;とするところだけ変更しました。DOMでこんな使い方ができるのですね!!

<DIV id="contents"
   style="position: absolute;
          background-color: #efefef;
          width  : 100;
          height : 100;
          left:130px;
          top:500px;">
</DIV>

念のため、FORM の一部です。this演算子が使われています。

<FORM name="frm1">
<SELECT name="slct"
 onChange="Music( this.options[this.options.selectedIndex].value )">
  <OPTION value="">選択してください
      <OPTION VALUE="../midi/ZARATH.mid">ツァラストラはかく語りき(R.シュトラウス)
  ..................
</SELECT>
</FORM>

同じFHPEXP の#11会議室で、Shinzoさん が#3583(02/01/09)で、IE向けにbgsoundの動作が安定しているということで使われています。改定されて、NN4-6,IE4-6用音楽プログラム としてアップされているので、許可をえてその部分だけ紹介させていただきます。

HEAD部の関数
  function AudioPlay(musicName) {
     sound.src = musicName
  }

  function AudioStop() {
    sound.src = "silent.wav"
  }

BODY部
 formuに、
    <select onchange="AudioPlay(this[this.selectedIndex].value)">
       option部 省略
    <input type=button value="stop" onClick="AudioStop()">
  スクリプト部は
   document.write('<bgsound id="sound" src="silent.wav">')

引数musicNameが選択されたmidiファイル名です。
　id指定のsoundを関数の中で、sound.src = musicName という使い方をするのですね。プラグインのアイコンは出ないですが、stopボタンはあり、止められるように配慮されています。
　なお、上記のみの引用は、ShinzoさんのNN4.xでも、6.0でも、IE4.0以降のバージョンでも、全て鳴らしたいという本来の意図からは逸脱なんてものではありません。オリジナルのソースリストを参照下さい。

余談ですが、この2 Midi2-innerHTMLを使う-に使った写真は異様でしょう。右後ろに見える岩は、50年前まで、ゾロアスター(拝火)教徒が行っていた鳥葬の跡です。R.シュトラウスの「ツァラストラはかく語りき」は映画2001年宇宙の旅で使われ、有名になったそうですが、ツァラストラとは2500年前、アケメネス朝ペルシャ時代に、拝火教を興したゾロアスターのドイツ読み、西欧文明を批判したニーチェ哲学につけた曲とか？

選択肢にあるmidiファイルは前回同様、MIDI クラシック音楽データ集　by Windyからダウンロードさせていただきました。

3 MIDI3-location.hrefを使う-

3 Midi3-location.hrefを使う- でお試しください。

 function linkURL(){
	Obj    = document.myform.mySEL;
	location.href=Obj.options[Obj.selectedIndex].value;
 }

JavaScriptは、ブラウザのソフト部品や情報をオブジェクトとして利用できる、ナビゲータ・オブジェクトと、独自に組み込まれたビルトイン・オブジェクトがあります。よくでてきたdocument.writeは、html文書全体を扱うナビゲータ・オブジェクトのメソッﾄﾞで、画面に書き出すものでした。document.myform.mySEL.selectedIndexは、フォーム-セレクト-番号と続く、documentから派生した階層的なのプロパティです。

宵待草の楽譜表紙

ここに出てきたlocationも、ナビゲータ・オブジェクトのひとつであり、URLに関する情報が格納されています。hrefはURL全体の値を扱うプロパティです。関数の右辺は、例えば fuyugeshiki.midであり、<A HREF="fuyugeshiki.mid">冬景色</A> をクリックするのと同じ効果があります。

選択肢にあるmidiファイルは、五十嵐悌三郎歌曲集 によるものです。その息子さんの小林民三郎さんのホームページです。シニアステージ に紹介され、山形でお会いしたおり、一部、使わせていただく許可をえたものです。ホームページには、たくさんの曲があり、歌詞や素敵な絵も載せられています。

その中にある、竹下夢二の「宵待草」にちなんだ絵を出します。
「宵待草」竹下夢二 歌の絵本 矢沢 寛編 大月書房 1992年
にある大正時代、夢二が表紙絵を書いたセノオ楽譜の表紙です。

4 CDの音楽、ビデオとの比較

冒頭にも書いたように、CDの音楽を圧縮したMP3,wmaファイルやビデオを圧縮したwmvファイルを呼び出すのも、Anchorタグないしembededタグです。これらは圧縮しても、容量が大きいので、ページ読み込みと同時に呼び出されるembededよりも、見ておられる方の意志にまかせるAnchorタグで扱っています。

CDについては、
  http://homepage1.nifty.com/mstak/Concert/concert.html
    コンサート交流詩『音を織る』や
  http://homepage1.nifty.com/mstak/Chorus/chorus.html
   オペラ合唱曲を歌うなどにあり、
  http://www.t.daito.ac.jp/~t028050/
   高橋 賢のコンピュータ授業のトップページからも飛べるようにしています。
  
 ビデオは、
   http://uta8.hp.infoseek.co.jp/video.html
    八王子１日うたごえ(ビデオ)
にあります。ここまでは、いずれもAnchorタグです。

 例外的に、embededタグを使ったのは、
  http://homepage1.nifty.com/mstak/Chorus/tomoshibi.html
  多摩のうたごえ・新宿「ともしび」です。wmv形式は、マイクロソフトのものだから、Anchorタグでは、
Netscapeではだめですが、embededタグはできるということを見たかったからです。

CD、ビデオの圧縮とストリーミング は、もっぱら、もとの素材をコンピュータに取り込む方法と圧縮の方法について、主に書いています。midi(Musical Instrument Digital Interface)は、ある規格、約束ごとに基づいて、五線譜を記号化した情報だけであり、それを受け取って音を鳴らすのは、それぞれのパソコンにあるサウンドボードまかせです。したがって、容量は少なくてすみ、圧縮の必要はありません。記号化するmidiソフトは、市販ものでは、ローランドのCakewalkやヤマハのXGなどが有名ですが、かなりの値段です。

Music Studio Standard というシェアウェアで、\2,000というのがあり、このソフトに即して、誰でも作れるMIDI講座 という解説もあります。

なお、このページの1、2、3とも、インターネット上にすでに紹介されている作品を使わせていただきました。ヴァーチャルうたごえ喫茶「のび」 というのもあります。ロシア民謡・労働歌・反戦歌・ラジオ歌謡等をうたごえ喫茶の雰囲気が、歌詞や解説とともに、MIDIやMP3ファイルで紹介されています。タイトルには、「「死んだ女の子」の作曲者ナーズム・ヒクメット生誕１００年記念♪♪♪」ともあります。

「midi歌声喫茶」 も、多数の曲があります。雛祭り などいいですね。雛祭りは MIDI ダウンロード　サイト「童謡・唱歌の世界」 にも。486曲もあり、コロプチカなど、フォークダンスの名曲もあります。

フォークダンスといえば、Classic MIDI Room-Fork Song は詳しい。マイムマイムはイスラエル民謡だそうですね。マイムは水ですって。私は、なぜか北欧民謡で、マイムはかたつむりかと思っていました。「コロブチカ」もあり、これはロシア民謡です。その他、Midi作品を掲載したホームページは多々あります。

ページ独自カウント