ミュージックプラットからご連絡
ただいまぷらっとさーちへの登録募集中です。音楽に関するサイトのリンク集です。
検索
iTunes Store（Japan）
音楽サイト作成Tips
■■HPで音楽再生：リアルオーディオファイル再生■■
ある程度HP作成やHTMLの知識がある方を前提としています。
HTMLについて一般的な事がもっと知りたいという方は、
とほほのWWW入門さん等のHP作成Tipsサイトを参考にしてみて下さい。
■音楽付きページを作るにあたっての心構え
・訪問者が任意で再生をストップ出来る形にする方が無難です。（うるさいと思う方もいるのです）
・オーディオファイル(mp3やwavファイル)は容量が大きいので、読み込み時間も考慮しましょう。
・TOPページでいきなり音を鳴らすと、びっくりする方や、時には不愉快になる方もいます。
・「入り口」ページなどで、次ページに音が鳴る事を明記してから音楽付きページに飛ぶと、親切です。
※サンプルサウンドは全て筆者が製作者から使用の許可を得ています。無断での使用を禁止ています。
■■HPで音楽再生：リアルオーディオファイル再生■■
ある程度HP作成やHTMLの知識がある方を前提としています。
HTMLについて一般的な事がもっと知りたいという方は、
とほほのWWW入門さん等のHP作成Tipsサイトを参考にしてみて下さい。
■音楽付きページを作るにあたっての心構え
・訪問者が任意で再生をストップ出来る形にする方が無難です。（うるさいと思う方もいるのです）
・オーディオファイル(mp3やwavファイル)は容量が大きいので、読み込み時間も考慮しましょう。
・TOPページでいきなり音を鳴らすと、びっくりする方や、時には不愉快になる方もいます。
・「入り口」ページなどで、次ページに音が鳴る事を明記してから音楽付きページに飛ぶと、親切です。
| 1.基本的な方法 1-1. ファイルに直接リンクを貼る リアルオーディオ形式のエンコード方法は割愛します。リアルプレーヤーのサイトに、 無料のエンコーダもありますので、ダウンロードしてお使いになると良いでしょう。 ここではエンコードソフトを使って作成した「sample01.rm」というファイルを作りました。 HPでの扱い方として最も基本的な方法は、直接このファイルにリンクを貼る方法です。 【サンプル9】 ※ファイルサイズ301k 再生が始まりましたか？それともダウンロードダイアログが出て来たでしょうか？ |
| 1-2. メタファイルの使用 最近のリアルプレーヤーは、直接ファイルをクリックしてもストリーミング再生が 始まると思いますが（デフォルトの設定では、全てのファイルをストリーミング出来るよう 設定されていると思います）通常サイトに掲載する時は、メタファイルと呼ばれる ファイルを使用してデータを呼び出す方法が一般的です。 メタファイルとは？： メタファイルとは、サーバからデータをDLながら再生（ストリーミング再生）する為に 使うファイルです。ファイルには、データ（ここでは sample01.rm ）のURLを記載します。 ここではメタファイルを使用してストリーミング再生させる方法をご案内していきます。 メタファイルの作成： [1] まずリアルオーディオ形式のファイルを作成してアップロードしておきましょう。 （ここではsample01.rmというファイルを作成、アップロードしてあります） [2] 次に、テキストエディタ等で新規テキストを作り、そのテキストに、アップロードした ファイルのURLを記載します。ここでは sample01.rmを、http://www.musicplat.com/tips_sample/ にアップロードしましたので、URLは http://www.musicplat.com/tips_sample/sample01.rm と記載したテキストを作ります。それをいったん保存（たとえばsample01.txt）してから、 ファイル名を sample01.ram と変更します。こうして出来たファイルがメタファイルです。 ※メタファイルの拡張子は .ram です。 [3] 完成したメタファイルをクリックすると、内部に記載したURLを呼び出してストリーミング再生が 始まります。お手元で確認してみましょう。 動作を確認したら、メタファイルもサーバにアップロードして、HP上ではこのメタファイルに リンクを貼って試聴させます。 ・・・以上でメタファイルの完成です。おわかり頂けましたか？ 実際にアップロードしたファイルはこちらです 【サンプル10】 要するに、直接リアルオーディオファイルにリンクを貼らないで、メタファイルで URLを呼び出す方式をとれば、ストリーミング再生の形になるのです。これがメタファイルの 基本的な使用方法ですが、次からちょっと応用編を見ていきましょう。 |
リアルプレーヤの環境設定（バージョンによって呼び方が違うかもしれません）の中に「パフォーマンス」という設定項目があります。 ここにメタファイル（.ram）以外の直ファイル（.rm）もストリーミング可能にするチェックボックスがあり、これにチェックが入っていると直ファイル、メタファイルの区別無く、リアルオーディオ形式であれば全てストリーミング再生可能になります。 最近のリアルプレーヤは始めからこの設定になっているので、メタファイル直ファイルを意識することなくストリーミング出来ていると思います。 ただ、サイトを作成するにあたっては、なるべくメタファイルを使用して、ストリーム配信出来る形にする事をお勧めします。 |
| 2.操作パネルを付けてみよう 2-1. <EMBED>タグの使用 さて、基本的な方法を見てきたので次に、画面上に操作パネルを表示してみましょう。 操作パネルを使うには、ブラウザにリアルオーディオのプラグインが入っている必要が ありますが、ほとんどの場合リアルプレーヤーをインストールしてあれば入っているはずです。 もし入っていなければ一度リアルプレーヤーを再インストールしてみましょう。操作パネル 使用や、サイト内で自動的に再生させたりするには、midiと同じくEMBEDタグを使用します。 プラグインが入っていれば、次のサンプルを再生出来るはずです。 【サンプル11】 <embed src="sample01.rpm" width="300" height="135" autostart="true" repeat="true" loop="true"> ここで、sec= のファイル指定の所を見て下さい。拡張子が、上で見てきた拡張子とは ちょっと違います。この .rpm というファイルも、先ほど作成した拡張子 .ram ファイルと 全く同じファイルです。単に拡張子が違うだけですが、なぜ違うのか説明します。 （重要） ブラウザのプラグインを使用して<EMBED>タグ等でリアルオーディオをストリーミング させる場合、直ファイルにリンクをしても構いませんが、一般的にはメタファイルを リンクさせるのが普通です。 通常のメタファイルの拡張子は先ほど書いたように .ram となりますが、プラグインを 使用してブラウザで再生する場合は拡張子を .rpm に変更して使いましょう。 拡張子ramもrpmも、上記で作成したメタファイルですので、使用目的によって拡張子を 変更するだけで大丈夫です。 |
EMBEDタグの詳細についてはmidiファイル再生の項をご覧になって下さい。 ブラウザでプラグインを使って再生する場合のみ、メタファイルの拡張子を .rpm とします。rpmの「p」を、プラグインのp、とでも覚えておくと良いでしょう。 |
| 2-2. パネル表示にひと工夫！ リアルオーディオのパネルはWIDHTH、HEIGHTでサイズを変えると、サンプル11のパネルが 単に伸縮するだけになってしまい、ただサイズを小さくすると、何が何だか解らなくなって しまいます。次のサンプルを見て下さい。 サンプル11のパネルを100×40で表示させてみました。 【サンプル12】 <embed src="sample01.rpm" width="100" height="40" AUTOSTART="true" REPEAT="true" LOOP="true"> <オプションタグ CONTROLS> 上記のように、ただ画面サイズを変えるだけでは、パネルが全然使い物になりません。 かといって、常に300×135の大きいパネルを使うのではサイトのレイアウトが取りにくく なってしまいます。そこで使用するのが、リアルプレーヤーのプラグイン独特の オプション、 CONTROLSです。 まずこちらをご覧下さい。 【サンプル13】 <embed src="sample01.rpm" width="300" height="30" AUTOSTART="true" REPEAT="true" LOOP="true" CONTROLS="ControlPanel"> 【サンプル14】 <embed src="sample01.rpm" width="50" height="25" AUTOSTART="true" REPEAT="true" LOOP="true" CONTROLS="PlayButton"> いかがでしょうか。サンプル12までとはちょっと違ったパネルになっていますね。 このように、<EMBED>タグ内に、 CONTROLS="*" と書く事で、表示させるパネルを部品単位で 選択することが出来るのです。 この方法ですと、お好みのパネルを選択して表示することが 出来ます。以下に、 CONTROLSの種類と推奨サイズをまとめます。 <<CONTROLS="*">> *に下記のCONTROLS名を入れて使用します
|
CONTROLSは、何も推奨サイズでなくとも使用可能ですが、あまりに大きくなりすぎたり小さくなりすぎたりしては使いにくくなってしまうので、最も標準的であろうサイズを記載しています。 これにとらわれずに、いろいろなサイズで試して見て下さい。特に再生ボタンなどは、もっともっと小さくても使用には差し支えないと思います。 |
| 2-3. CONTROLSの有効活用 さてさて、このCONTROLSを見ていて気付いたと思いますが、たとえばストップボタンと再生 ボタンとボリュームだけを付けたい、とか、CONTROLSを組み合わせて使用出来たらもっと カスタマイズしやすいと、思いますよね？次は、CONTROLSを組み合わせて使用する方法を ご案内します。 <オプションタグ CONSOLE> リアルオーディオを<EMBED>タグで使用する時に、CONTROLS以外にもう一つオプションが あります。CONTROLS同士を組み合わせて使用するためのCONSOLEという値です。 次のサンプルを見て下さい。前項で説明したCONTROLSを二つ組み合わせています。 【サンプル15】 <embed src="sample01.rpm" width="50" height="25" AUTOSTART="true" REPEAT="true" LOOP="true" CONTROLS="PlayButton" CONSOLE="sample01"><br> <embed src="sample01.rpm" width="50" height="25" CONTROLS="StopButton" CONSOLE="sample01"> どうでしょうか。PlayButtonと StopButtonの二つを組み合わせて表示させているのが おわかりでしょうか？このように部品を組み合わせれば、表示パターンも様々考え られます。 使い方としては、まず任意のグループ名を決めて、組み合わせたいCONSOLE=* の値を 同じグループ名にして記載するだけです。グループ名は、好きなように決めて構いません。 サンプルでは、グループ名は sample01 になっています。 さらに、CONSOLE="_master" という特殊なCONSOLEを使って、複数のファイルを コントロールすることも出来ます。次のサンプルをご覧下さい。 【サンプル16】 <embed src="sample01.rpm" width="50" height="25" AUTOSTART="false" REPEAT="true" LOOP="true" CONTROLS="PlayButton" CONSOLE="sample01"> <embed src="sample02.rpm" width="50" height="25" AUTOSTART="false" REPEAT="true" LOOP="true" CONTROLS="PlayButton" CONSOLE="sample02"><br> <embed src="sample01.rpm" width="50" height="25" CONTROLS="StopButton" CONSOLE="_master"> サンプルでは2つの曲を一つのストップボタンで操作しています。 sample01とsample02という二つの曲（二つのCONSOLE）を、 CONSOLE="_master"と書いた 一つのストップボタンで制御しています。 これを応用すれば、曲を何曲並べてもストップ ボタンは一つで済むので、かなりすっきりしたページをレイアウト出来ます。 まとめ いかがだったでしょうか。現在mp3形式のファイルが、インターネット再生でも主流になって 来ていますが、 リアルオーディオの再生は他の形式よりも再生のバリエーションが 豊富ですので、まだまだサイト作成にあたっては利用価値の高い形式かと思います。 |
CONSOLEのグループ名は、ファイル名と同じにしておくと解りやすいと思います。 |