応用編(MIDIノンストップ再生)

nerve > sound lectures > how to publish sound files (advanced) > non-stop play

[ ホームページに音を載せる(応用編) | MIDIランダム再生 | MIDIノンストップ再生 ]

ページを移動するたびにBGMが途切れて、別の曲に変わったり同じ曲がまた始まったりするのは、雰囲気をそがれてしまう物です。

HTML4のフレーム技術を使えば、一つの曲を複数のページで途切れずに再生することが出来ます。

仕組み
サンプルページ

仕組み

フレーム技術を使えば、画面を複数の部分に区切って、複数のページを同時に表示することが出来ます。

あるフレームの中のリンクをクリックしても、通常は他のフレームは元のページを表示し続けて、内容が変化しません。内容が変化しないフレームを作って、そこでBGMを再生すれば、他のページの移動の影響を受けず、ずっと途切れずにBGMが再生されることになります。

フレームというものが何か判らない方は、あらかじめHTMLの講座サイトなどで勉強してください。

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

サンプルページ

本来表示したいmain.htmlというページがあるとします。次のような内容のframe.html、midi.htmlというファイルを用意してください。(midi.htmlの"***.mid"という部分は自分が使いたいファイル名に変更してください。他にも、ページの構成にあわせて変更すべき箇所は強調表示になっています。)

frame.html

これは、フレームの枠組みだけを作るための設定ファイルのようなものです。

<html>
<head>
<title>フレーム設定</title>
</head>
<frameset rows="100%,*" border="0"
   frameborder="0" framespacing="0">
<!-- 次の行のSRCに本来表示したいHTMLファイル名を記入 -->
   <frame src="main.html" name="main"
      marginheight="0" marginwidth="0">
   <frame src="midi.html" name="midi"
      marginheight="0" marginwidth="0" scrolling="no">
   <noframes>
      <body>
         <p><a href="main.html">コンテンツへ</a></p>
      </body>
   </noframes>
</frameset>
</html>

midi.html

これは、BGM再生用のファイルです。フレームの設定で、表示はされませんが機能はするようになっています。

<html>
<head>
<title>midi</title>
</head>
<body>
<embed src="***.mid"
  width="150" height="40"
  type="audio/midi"
  autostart="true"
  repeat="true"
  loop="true">
</body>
</html>

main.html

main.htmlは本文用のファイルです。内容は何でも良いのですが、幾つか注意すべき点があります。

他のページからmain.htmlを呼び出していたリンクは、全てframe.htmlに修正してください。
音の流れ続けるページから抜けたい場合は、main.html内のリンクで下の例のようなリンクを貼って、フレームから抜けるようにしてください。target="_top"を指定しない限り、ずっと曲が流れ続けることになります。
<a href="main.html" target="_top">BGMストップ</a>

この章で使っているファイル名はご自分の環境に合わせて判りやすいように書き換えてください。

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

[ ホームページに音を載せる(応用編) | MIDIランダム再生 | MIDIノンストップ再生 ]

last updated February 13, 2001.

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