ミュージックプラットからご連絡

ただいまぷらっとさーちへの登録募集中です。
音楽に関するサイトのリンク集です。
ぷらっとさーちへ登録はこちら

検索

iTunes Store(Japan)

 iTunes Store(Japan)
音楽サイト作成Tips
■■HPで音楽再生:midiファイル再生■■


ある程度HP作成やHTMLの知識がある方を前提としています。
HTMLについて一般的な事がもっと知りたいという方は、
とほほのWWW入門さん等のHP作成Tipsサイトを参考にしてみて下さい。



■音楽付きページを作るにあたっての心構え
・訪問者が任意で再生をストップ出来る形にする方が無難です。(うるさいと思う方もいるのです)
・オーディオファイル(mp3やwavファイル)は容量が大きいので、読み込み時間も考慮しましょう。
・TOPページでいきなり音を鳴らすと、びっくりする方や、時には不愉快になる方もいます。
・「入り口」ページなどで、次ページに音が鳴る事を明記してから音楽付きページに飛ぶと、親切です。


1.<EMBED>タグを使用する方法

1-1. まず聴いてみましょう


ホームページでmidiを再生するには、<EMBED>タグの使用が手軽です。

<EMBED>タグとは、指定したファイルを読み込み、ブラウザに入っている
プラグインソフトで読み込んだ データを再生させるためのhtmlのタグです。
Macならクイックタイム、Windowsならメディアプレイヤーのプラグインが
始めから入っていると思いますので、特に追加の必要は無いと思います。


実際に例を見てみましょう。下のボタンをクリックしてみて下さい。
【サンプル1】 ※別ウィンドウが開いてmidi再生が自動で始まります

ウィンドウが開いて自動的にmidiで音楽が流れましたか?
再生には、以下のようなHTMLタグを使用しています。

<EMBED SRC="sample.mid" TYPE="audio/midi" WIDTH="100" HEIGHT="30" AUTOSTART="true" REPEAT="true" LOOP="true">
ここではmidiファイルの再生についてEMBEDタグを解説していますが、実際には下記の様々なフォーマットの再生に対応しています。

.mid
MIDIファイル(音声)
.wav
WAVEファイル(音声)
.aif
AIFFファイル(音声)
.au
AUファイル(音声)
.ra
RealAudio(音声)
.mp3
mp3ファイル(音声)
.swf
Flash(動画)
.mpg
MPEGファイル(動画)
.dcr
Shockwave(動画)
.mov
QuickTime(動画)
 

1-2. <EMBED>タグの詳細
タグの内容の詳細を見ていきましょう。この細かい部分を選ぶ事で、
自動的に再生させたり、繰り返し再生させたり、といった任意の方法を
選択していくのです。

<EMBED SRC="*.mid" TYPE="*" WIDTH="*" HEIGHT="*" AUTOSTART="*" REPEAT="*" LOOP="*">

*印の値を、以下の表に沿って変更していくと、好みの再生方法を選べます。
SRC ここには再生させたいファイルのURLを書きます。
SRC="img/aaa.mid"
SRC="http://aaa.bb/cc.mid"
といった具合でファイルを指定します。
AUTOSTART 自動再生させるかどうかの設定です。
AUTSTART="true"なら自動的に再生
AUTSTART="false"なら自動再生しない
TYPE 使用するファイルのMIMEタイプを指定します。
MIMEタイプとは、ファイルの種類をサーバやブラウザに認識させるための情報で、ファイルの種類ごとに定義されています。再生に必要なMINEタイプは、右記を参照して下さい。
ちなみにこのページのほとんどのmidiサンプルには記載していません。記載しなくても、動作はします。
LOOP 再生回数の設定です。
LOOP="true"なら無限に繰り返し再生
LOOP="false"なら1回だけ再生
REPEAT 同じく再生回数の設定です。
REPEAT="true"なら無限に繰り返し再生
REPEAT="false"なら1回だけ再生
その他数字を入力して、回数を指定する事も出来ます。
WIDTH 操作パネルの横幅の指定です。
ピクセル数で表します。
HEIGHT 操作パネルの縦幅の指定です。
ピクセル数で表します。

<EMBED>タグは、他の一般的なタグと違って、閉じても閉じなくても動作します。
たとえば、<FONT>タグは <FONT>〜</FONT> という風に「/」付きのタグで閉じないと
いけませんが、 <EMBED>タグは</EMBED>で閉じても閉じなくても構いません。


WIDTH、HEIGHTは、あまりに小さいと操作パネルの役割を果たせない事もあるので
試行錯誤してページに合う大きさを探してみて下さい。通常は100×30〜40ピクセル
ぐらいが扱いやすいでしょう。
※WIDTH、HEIGHTの値を0にすれば、操作パネルを非表示に出来ますが
その場合、自動再生にしなければ手動では再生出来ませんのでご注意を!
【MINEタイプ指定】
EMBEDタグでは特にMINEタイプを指定しなくても再生出来ますが、ブラウザの設定等によっては、まれに設定しておかないと動作しない場合もありますので、念のためであれば記載しておくことをお勧めします。当コーナーのサンプルには、指定してあるものと無いものがあります。

主なMINEタイプ
midiファイル
audio/midi

mp3ファイル
audio/mpeg

Wavファイル
audio/wav

その他MINEタイプについてはMINEタイプ一覧をご覧下さい。お手元に保存してエクセル等でご覧になると見やすいと思います。

REPEATはLOOPと同じ役割ですが(LOOPはIE、ネットスケープ共に有効です)プラグインによってはREPEATが必要になる場合がありますので、念のために両方記載しておくことをお勧めします。

  1-3. <EMBED>タグの使用例
いくつか<EMBED>タグの使用例を掲載してみましたので、参考にしてみて下さい。


操作パネルサイズ300×40、自動再生無し、無限に繰り返し

<EMBED SRC="sample.mid" WIDTH="300" HEIGHT="40" AUTOSTART="false" REPEAT="true" LOOP="true">

操作パネルサイズ70×25、自動再生、一回だけ再生(別ウインドウで開きます)
【サンプル2】
<EMBED SRC="sample.mid" WIDTH="70" HEIGHT="25" AUTOSTART="true" REPEAT="false" LOOP="false">
 

1-4. <EMBED>タグが再生出来ないブラウザの場合
万が一閲覧者のブラウザに、midiを再生出来るプラグインが入ってない場合を
想定して、<EMBED>タグを使う時には、<NOEMBED>タグを一緒に記載しておきましょう。
これはプラグインが入っておらず再生が出来ない場合に、代替として表示する
情報の記載です。

例)
<EMBED SRC="sample.mid" WIDTH="100" HEIGHT="30" AUTOSTART="true" REPEAT="true" LOOP="true">
<NOEMBED>プラグインが入っていないのでmidiが再生出来ません
</NOEMBED>

<NOEMBED>〜</NOEMBED>の間は、通常のHTML作成と同じように
作成して構いませんが、出来ればプラグインのダウンロード先など記載してあれば
親切かもしれません。
EMBEDタグは、閲覧者の環境に依存する事が多く(MINEタイプ設定やプラグインなど)、中には全く機能しない方もいます。このタグは実はHTML仕様には無いタグで、単にブラウザが備えているオプション機能なのです。

ですので、このタグはあくまでサイトのメインを取るような使い方よりも「なんか音楽でも流せたらいいなー」程度のつもりで使ったほうが良いと思います。

2.<BGSOUND>タグを使用する方法(IE専用)

2-1. まず聴いてみましょう

<EMBED>タグと基本的には同じなのですが、こちらはインターネットエクスプローラー
(IE)独自のタグですので、他のブラウザで閲覧した時には再生が出来ません
IEは、普及率ではダントツでナンバーワンのブラウザですが、IEで閲覧する人だけ
midi再生出来れば良い、という方は、この方法でも良いかもしれません。

<BGSOUND>タグは、<EMBED>タグとはいくつか異なる点もあります。
まずこちらを再生してみて下さ い。別ウインドウで開きます。
【サンプル3】
<BGSOUND SRC="sample.mid" VOLUME="0" BALANCE="10000" LOOP="infinite">

BGSOUNDタグもEMBEDタグと同じく、midiファイルだけではなく様々なフォーマットの再生に対応しています。WavファイルやWMAファイルなども再生可能です。

2-2. <BGSOUND>タグの詳細

タグの内容の詳細を見てみましょう。

<BGSOUND SRC="*.mid" VOLUME=0 BALANCE=0 LOOP="*">
SRC ここには再生させたいファイルのURLを書きます。
SRC="img/aaa.mid"
SRC="http://aaa.bb/cc.mid"
といった具合でファイルを指定します。
VOLUME 再生音量を、-10000〜0の数字で指定します。
VOLUME="0"が最大、"-10000"が最小音量です。
(IE4以上で使用可能の機能です)
BALANCE 音の左右の音量バランス(PAN)を、
-10000〜10000の間で指定します。
BALANCE="0"がニュートラル(中央)です。
(IE4以上で使用可能の機能です)
LOOP 再生回数の設定です。
LOOP="infinite"なら無限に繰り返し再生

それ以外の場合は、数字で回数を指定します。
LOOP="5"
LOOP="1"
といった具合です。

<BGSOUND>タグは多機能な反面、操作パネルが無く、自動再生のみになるので
使用には注意が必要です。


 

2-3. 使用方法Tips

自動再生のみ、というと不便な気がしますが、フレームを使用すれば擬似操作パネル的に
再生やストップが可能となります。


【サンプル4】 ←別ウインドウが開いてmidi再生が自動で始まります。

いかがでしょうか。このように、あらかじめ再生用のHTMLと、停止時用のHTMLの
二種類を用意しておいて、それぞれにリンクを貼り、切り替えるという方法です。
この方法ですと、手元で自由に操作パネルを(画像等を利用して)作成出来ますので
サイトの見た目にこだわる方にはお勧めです。
なお、<EMBED>タグでも、「自動再生、操作パネル非表示」に設定すれば
この方法で再生、ストップ方法が利用出来ますので、カスタマイズ派?の方は
試してみてはいかがでしょうか。


<BGSOUND>や、操作パネル非表示の<EMBED>タグを使用しているサイトでは、ブラウザの「中止」ボタンを押すことでmidiを停止することも出来ます。
※サンプルサウンドは全て筆者が製作者から使用の許可を得ています。無断での使用を禁止ています。

おすすめ

HMVジャパン