"taitai studio" WebページBGM挿入 page3

1・ページを移動してもBGMを鳴らし続ける ↑

　トップページにBGMを挿入しても次のページに移動したら曲が途切れたり切り替わったりするとなんだかせせこましい感じがしますよね。それを回避するにはフレームでページを構成するとよいでしょう。

1・フレームでサイトを構成する

　フレームを使う利点はページ移動がわかりやすくなることです。(表示領域が狭くなるのを嫌がる人も多いですが。) 一般的な使い方はメニューのページとコンテンツ表示ページに分ける使い方ですがメニューのページはページ移動の必要がないのでそこにBGMを挿入すればコンテンツが変わってもBGMは鳴り続けます。

　「フレームって何!?」という方の為にごくごく簡単に説明すると領域を分割させ複数のドキュメント(Htmlファイルなど)を表示させるものです。フレームを使った場合、フレーム構成ファイル、分割して表示させるファイルと最低でも3つはファイルが必要になります。このフレーム構成ファイルにアクセスすることによって分割されたページが表示されます。

　フレームを構成する特殊なHTMLファイルの上にごく普通のページが乗っかってるというようなイメージです。メニューファイルにBGMを挿入すればメインフレームでコンテンツが移動してもBGMが途切れたりしません。なおフレームを構成するファイルのソースは以下のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
<frameset rows="(任意の数値),*" frameborder="NO" border="0">
 <frame src="メニューページ" noresize scrolling="NO">
 <frame src="メインページ" name="(任意のフレーム名・半角で)">
 <noframes>
 <body>
 <p><a href="メンページ">フレームなしページ</a></p>
 </body>
 </noframes>
</frameset>
</html>

　「(任意の数値)」は表示領域の指定でピクセル(数値のみ・単位不要)かパーセンテージ(%・単位必要)で指定します。片方の「*」は残り全部といった感じの意味です。このサンプルは横割りですが縦割りにするにはframesetのrowsをcolsにします。また、メニューページからメインページを操作するにはメニューページの<a>要素のtarget属性に予め指定しておいたフレーム名を記述し、「target="(任意のフレーム名)"」のようにします。

2・隠しフレームを使う

　フレームを使った方法を紹介しましたが、実はフレームを嫌う人は意外とたくさんいます。片方のフレームがすごく狭い場合は許せますが画面が分割され表示領域が狭くなるのは難アリのようです。特にフレームを使う必要がない場合でBGMを途切れさせずに鳴らしたい場合は隠しフレームが有効です。

　先ほどのソースを以下のように指定します。(メインページをmain.html、BGMのページをbgm.htmlとする。)

<frameset rows="100%,*" frameborder="NO" border="0">
 <frame src="main.html">
 <frame src="bgm.html" noresize scrolling="NO">
 <noframes>
 <body>
 <p><a href="main.html">フレームなしページ</a></p>
 </body>
 </noframes>
</frameset>

　これだとメインフレームが100%で指定されているのでBGMのフレームは表示されません。表示はされませんがページはちゃんと読み込まれているのでBGMは鳴ります。ページ移動にtarget属性は必要ありません。指定がない場合は同一フレームに読み込まれるからです。またmain.html内に「<a href="main.html" target="_top">BGM停止</a>」と記述すればフレームは解除されメインページだけが表示されるのでBGMは鳴らなくなるので便利です。

3・フレームを使用するときの注意

　フレームを使いBGMを挿入した場合は当然ながらページを移動してもBGMは鳴り続けます。ですから他のサイトへのリンクは必ずフレームを解除しなければいけません。<a>の属性には「target="_top"」を記述してフレームを解除します。また「target="_blank"」は好ましくありません。ブラウザが新しく立ち上がってもBGMはとまらないので他のサイトに移動した状態で自分のサイトのBGMが鳴っている状況になります。また移動先にBGMが挿入されている場合は二重に再生されたり、鳴らなかったりします。必ず「target="_top"」で画面を明け渡しましょう。

　また、フレームを使うとロボット型検索エンジンにヒットしにくくなる可能性が高くなります。特にトップページをフレームにした場合、ロボットが収集するindex.htmlの情報はただフレームを構成する情報だけになってしまいます。こういう時はnoframes要素を有効利用します。ここはフレーム未対応ブラウザへのメッセージを表示する部分なので簡単なサイトの概要を記述しておけばロボットはそれを拾ってくれるでしょう。

2・小窓を開いて再生する ↑

これはJavaスクリプトで小さなウィンドウを開いてBGMを鳴らす方法です。

まずはBGMウィンドウを開かせるページのhead内に以下のように記述します。

<script type="text/javascript">
<!--
function OpenBgm(){
	Bgm = window.open("bgm.html","new","width=160,height=120");
}
// -->
</script>

ページのどこかにBGMを鳴らすボタンをつけます。

<button type="button" onClick="OpenBgm()">BGMを聴く♪</button>

これで160x120の小さなウィンドウでbgm.htmlが開くようになるのでBGMを挿入したbgm.htmlというページを作成すればOK。もちろんウィンドウサイズやファイル名などは任意です。なおbgm.htmlには「閉じるボタン」もあれば更に便利です。閉じるボタンの作り方は、

<button type="button" onClick="top.close()">close</button>

ちなみに開くウィンドウのそれぞれのバーを表示させるには、サイズ指定に続けてカンマ区切りで、「toolbar=yes(ツールバー)」、「location=yes(アドレスバー)」、「status=yes(ステータスバー)」、「menubar=yes(メニューバー)」、「scrollbar=yes(スクロールバー)」を追加します。

3・アクセス毎に違うBGMを流す ↑

　毎回同じBGMじゃ飽きちゃう、でも頻繁に変えるのはメンドくさいって方にオススメなのがJavaスクリプトによるランダム再生です。あらかじめ指定しておいた複数のBGMからランダムにチョイスして演奏されます。

→ランダム再生のサンプル

　以下がランダム再生のスクリプトです。

<script type="text/javascript">
<!--
//----------------------------------
// Script Name ; "Random BGM"
// Author : taitai 
// URL : http://www.taitaistudio.com/
//----------------------------------
fileMax = 5; //最大曲数を指定([0]も含めた曲の総数)

BGM = new Array(fileMax);
BGM[0]="bgm1.mid"; //以下MIDIファイル名の指定
BGM[1]="bgm2.mid";
BGM[2]="bgm3.mid";
BGM[3]="bgm4.mid";
BGM[4]="bgm5.mid";

TITLE = new Array();
TITLE[0]="タイトル1"; //以下タイトルの指定。MIDIファイルと同じ配列で。
TITLE[1]="タイトル2";
TITLE[2]="タイトル3";
TITLE[3]="タイトル4";
TITLE[4]="タイトル5";

fileNo = Math.floor(Math.random()*fileMax);
document.write("<embed src='",BGM[fileNo],"' width='70' height='40'><br>");
document.write("□",TITLE[fileNo],"");
//-->
</script>

　上記スクリプトをBGMを挿入したい場所にコピー&ペーストしてMIDIファイルのパスとタイトルを書き換えます。曲数は連番で増やすことも減らすことも可能です。プラグインオブジェクトのサイズはwidth、heightの値で変更可能です。非表示なら両方とも0にするか、document.writeの中のembedの属性に「hedden='true'」を付け加えてください。また自動再生をoffにするには「autostart='false'」を付け加えてください。

　このスクリプトはついでにタイトルまで表示できます。表示部分の文章は変更可能です。例えば「現在お聴きのBGMは「***」です。」と表示させたいなら「document.write("現在お聞きのBGMは「",TITLE[fileNo],"」です。");」とします。タイトル表示が不要ならTITLE設定部分と、document.writeのTITLEの方を削除します。

←ちなみにコレを2の「小窓で開く」と組み合わせるとこんな感じになります。