フレームを利用して音楽演奏

フレームを使ってホームページにWMAやMIDIなど音楽ファイルを掲載し演奏させる方法を説明しました。

TopPage > Home > ホームページへの音楽掲載方法

MIDIとWMAで音楽

目次
├最初に読んでください
├MIDI WMA音楽置場
├DTMやMIDIに付いて
├MIDI WAVE録音方法
├WAV WMA変換方法
├音楽のH.P掲載方法
│├プラグインの方法
│├BGMにする方法
│├フレームで演奏
│├絶対パス相対パス
│└音楽掲載に付いて
├音源MU2000記事
├リンク
├Web検索! メタサーチ
└mail

DTM Original music


フレーム ページで音楽演奏させる基本
フレームの土台となるページ
下段の音楽演奏 ON OFFのページ
サイズ０のフレームで音楽を演奏させる
フレーム ページを利用した場合の問題点

検索でいきなりこのページに入って来られた方は、説明の為に必要ですので フレームを表示させてください。
フレーム ページ音楽演奏の基本
フレームを利用して画面を分割するには少なくとも３ページが必要です。
このページを例にしますと画面を上下に２分割していますので、上のページと下のページ、 更にそれらをはめ込む枠（フレームの土台）の３ページが基本的に必要になります。
フレームは入れ子にすればいくらでも画面分割を行えますが、 あまりゴチャゴチャやると閲覧者にとっては迷惑なだけな物になりかねません。
特別な目的がない限り ３分割程度でやめておく方が無難です。

ここではホームページ作成やフレーム ページの作り方などは主題では有りませんので深入りはしませんが
Webガーデンさんや ホームページお役立ち小技集 さんなど多数のサイトがあると思いますので参考にされると良いと思います。

本題のフレームを利用して音楽の演奏ですがこのページの場合、 上段にこの説明を書いているページを表示し、 下段には演奏のスイッチになるページをはめ込み、演奏ONと演奏OFF のページを切り替えています。

最初にフレームの土台の下段からリンクしているのは演奏OFFのページです、 演奏OFFのページを先にするのは閲覧者の自由意志を尊重する為です。

とりあえずONをクリックしてみてください、MIDIファイルのダウンロード終了後に演奏が始まるはずです。
OFFのページからはONのページへリンクを行いクリックされたら演奏ONのページに埋め込んだタグ bgsound で演奏を開始します。
OFFがクリックされると bgsound のないページが表示され演奏を止めます。
Top
フレームの土台となるページ
下記は実際にこのページを表示している土台のソースです
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Keywords" content="フレーム,MIDI,WMA,音楽,演奏,方法">
<meta name="Description" content="フレームのベースになるページの説明">
<title>フレームを利用しMIDIやWMAを演奏させる方法</title>
</head>

<frameset rows="*,70" title="フレーム上下分割">

<frame src="frmain.html" name="f1" title="上フレーム メイン">
<frame src="musicoff.html" name="f2" title="下フレーム MUSIC ON,OFF">

<noframes>
<body>
<p>ここにはフレーム未対応のテキストブラウザ等を利用している人の為に、説明とリンクを作っておきましょう。
<p>フレーム未対応のブラウザをご利用の方は <a href="frmain.html" target="_top">frmain.html</a> をクリックしてください。
</p>
</body>
</noframes>

</frameset>

</html>

上記にはフレームの説明に直接関係のないタグが含まれていますので、必要な部分だけを下記に切り出しました。

参照１
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
  2. <html lang="ja-JP">
  3. <head>
  4. </head>
  5. <frameset rows="*,50" title="フレーム上下分割">
  6. <frame src="frmain.html" name="f1" title="上フレーム メイン">
  7. <frame src="musicoff.html" name="f2" title="下フレーム MUSIC ON,OFF">
  8. </frameset>
  9. </html>

5行目の frameset rows="*,50" は上下に分割し下50ピクセルと上が残りの領域を使う事を表わす
6行目の frame src="frmain.html" name="f1" は上の領域へ frmain.html （現在見ているこのページ）を埋め込む
7行目の frame src="musicoff.html" name="f2" は下の領域へ musicoff.html （演奏OFFのページ）を埋め込む

Top
下段演奏 ON OFFのページ
演奏 ON のページのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<bgsound src="../midi1/nn0012gm.mid" loop="1">
<title>MUSIC On のページ</title>
</head>
<body>
<p>
MUSIC <a href="musicon.html" target="f2">On</a> <a href="musicoff.html" target="f2">Off</a> 演奏中
</p>
</body>
</html>

演奏ONのページは bgsound タグにMIDIファイルを組み込んでいます。
演奏ONと演奏OFFのページの違いは演奏ONのページには
<bgsound src="../midi1/nn0012gm.mid" loop="1"> がある事とテキスト「演奏中」「停止中」の違いだけです。
後はリンクテキストの装飾を行ったり、画像に変更したりすれば良いだけす。

演奏のON OFFのクリックをブラウザの履歴に残したくない場合は
MUSIC <a href="javascript:location.replace('musicon.html')" target="f2">On</a> <a href="javascript:location.replace('musicoff.html')" target="f2">Off</a>

上記のようにJavaScriptを組み込んだリンクを行えば良いのですが、 JavaScript未対応ブラウザやJavaScriptをOFFにしてる環境では役に立ちません。
navigatotオブジェクトを使って閲覧者の環境を調べて切り替えるのが正解です。
試して見たい方はご自身でメソッドを調べてスクリプトを書いてみるのも良いでしょう。

実際の所あまりややこしく考える必要は無いような気もしますが．．．
Top
サイズ０のフレームで演奏
今度は演奏スイッチを上段のページ（このページ）に置きました。　 リンクを置いてあるページが違うだけで動作は同じになるはずです。

MUSIC　On　Off 　←上述のブラウザに履歴を残さないリンク

MUSIC　On　Off 　←こちらは下記のソース

上記リンクのソース
MUSIC <a href="musicon.html" target="f2">On</a> <a href="musicoff.html" target="f2">Off</a>

フレームの土台を作った時、下段には f2 と言う名前を付けていますので
<a href="musicon.html" target="f2"> のようにリンクする時には target="f2" を指定します。

それでは　フレームを消してみましょう　フレームの下段が消えましたか？
フレームを消しても上の演奏スイッチは使えます。

実は下段のフレームを外したわけでは有りません。
参照１　の５行目 <frameset rows="*,50" title="フレーム上下分割"> の
rows="*,50" を rows="*,0" にした土台のページに移動し下段のフレーム スペースを０　にしただけなのですが、 見かけ上ではフレームが消えてサッパリします。
Top
フレーム ページの問題点
何かと都合の良い場合も多いフレームですが弱点もあります。
どのような事かと言うと、フレームの土台になるページ以外の各ページを単独で表示された場合です。
このページで　試してみますか？　 ←　をクリックした後はフレーム無しでこのページが単独に表示されますので、下のリンクをクリックしてみてください。

MUSIC　On　Off

大したことでは在りませんが面白くは有りませんね。 　このページの先頭付近に下記のリンクを置いている理由がお分かり頂けましたでしょうか？
検索でいきなりこのページに入って来られた方は、説明の為に必要ですので フレームを表示させてください。
実際問題として数は非常に少ないと思われますが、一応念の為にメッセージとリンクは用意しておく方が良いでしょう。

こう言った状況を考えるとフレーム ページの一部にメニューやリンクを全部置いてしまって、 メインになるページ単独ではどこへも行けないようなページを作ってしまうような事は無くなるはずです。
安易なフレーム使用はせっかく訪れてくれた人に混乱を与える事になりかねません。
サイト運営者としては細心の注意をもってフレームを使用する必要があると思います。
Back　音楽をホームページに掲載する方法 　Next　サイト内リンク絶対パスと相対パス

Top