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

1・BGM素材を入手する ↑

Midi素材の入手　まずはMidi素材を入手します。素材試聴ページで気にいった曲を見つけたらローカルに保存(ダウンロード)します。

● ダウンロードの手順

　ローカルへ保存する方法はいろいろあります。OSがWindows、ブラウザがInternetExplorerの場合は、[ダウンロード]の文字をクリックするとプレーヤーが起動して演奏をはじめますので起動したプレーヤーのメニューから保存して下さい。「ファイル」→「名前を付けて保存」を選択します。[ダウンロード]の文字にカーソルを合わせ右クリックして「対象をファイルに保存」または「リンクに名前を付けて保存」を選択してダウンロードする方法は直リンク対策の為、"taitai studio"では出来ません。

　MacOS、またはOSがWindowsでMozilla Firefox、NetscapeなどでQuickTimeをプラグインに指定している場合は[ダウンロード]の文字をクリックすると多くの環境でブラウザ内でプレーヤーが起動して演奏をはじめますのでブラウザのメニューから保存して下さい。Netscapeの場合は「ファイル」→「ページに名前を付けて保存」、Safariの場合は「ファイル」→「別名で保存」です。[ダウンロード]の文字にカーソルを合わせマウスを長押しして「リンクターゲットに名前を付けて保存」を選択してダウンロードする方法(但し、Safariの場合はoptionを押しながら[ダウンロード]をクリック)は直リンク対策の為、"taitai studio"では出来ません。

　保存する場所(フォルダ)はどこでも構いませんが、Webサイトに使っている画像などがおいてあるフォルダに一緒にMidiファイルを置いておくと後々便利です。

　Mozilla Firefox、Netscape8.x～では右クリックまたはマウス長押しによるダウンロードが出来ますがファイル名が「dl.cgi」になるので拡張子を変更する必要があります。ファイル名を「(任意のファイル名).mid」に書き換えて保存して下さい。

JTBならではのセレクション! 露天風呂付客室で日常を離れた極上の休日で身も心もリフレッシュ!

2・ページへ挿入する ↑

　ローカル(お使いのパソコン)への保存ができたら次は実際にページに挿入します。BGMを鳴らす要素(Htmlタグ)は<bgsound>と<embed>、<object>の3種類あります。<bgsound>は文字通りBGMの設定の要素でInternetExplorerの独自拡張要素ですのでその他のブラウザではBGMはなりません(但しVodafone live!、EZwebはこの要素を採用しsmafファイル等を鳴らします)。<embed>はFlashムービーやメディアプレーヤーなどのプラグインオブジェクトの設定のタグです。BGMの挿入には通常<embed>を使います。また<img>や<embed>、<applet>などを包括した<object>要素は難しいのでマニアックな方は下記コラムを参照のうえ挑戦してみてください。

● <embed>要素によるBGMの挿入

オブジェクト（こんなやつ→ これはWindowsMediaPlayerです。)を挿入したい場所にタグを記述します。

記述例：
<embed src="music.mid" autostart="true" hidden="false" loop="true" type="audio/midi">

タグの基本形

embed要素の基本的な属性

src="xxx.mid" (Midiファイルのパスの指定)
Midiファイルを同一ディレクトリ(フォルダ)に転送した時はMidiファイル名だけでも構いませんが、別のディレクトリにある場合正しいパスを記入します。img要素でパスを間違えたら×が出るように、embedもパスを間違えたらBGMは鳴りません。「http://」からのUrlでの指定でも可。

autostart="true"、または"false" (自動再生設定)
"true"なら自動再生されます。"false"なら再生ボタンをクリックするまで再生されません。省略可・省略時は自動再生

hidden="true"、または"false" (オブジェクトの表示/非表示)
"true"ならオブジェクトが表示されず、"false"なら表示されます。当たり前ですけど、autostart="false"とhidden="true"を併用したらダメです。非表示は訪問者が再生、停止などを簡単に操作できないのでオススメできません。省略可・省略時は表示。

loop="true"、または"false" (繰り返し再生の設定)
"true"なら繰り返し再生されます。"false"なら1回だけです。回数の指定は出来ません。省略可・省略時は1回再生。

width、height="ピクセル指定" (プラグインのサイズ指定)
オブジェクトのサイズを指定します。指定することによりMidiファイルの読み込み中でも継続する文書を先に読み込み表示させることが出来ます。WindowsMediaPlayerだとMidiファイルの読み込みが完了するまではフルサイズで表示されるため非常にカッコ悪いですし、QuickTimeのデフォルトサイズは高さが200pxと大きいので出来る限り指定しておいたほうがよいかと思われます。ちなみにWindowsMediaPlayerのサイズ未指定時のMidiファイル読み込み完了後のデフォルトサイズは300x40です。(上のサンプル画像の大きさ)

type="audio/midi" (Mime Typeの指定)
変更不要、Midiなら"audio/midi"です。省略可・ほとんどのサーバであらかじめMime Typeは設定されているので。

　もしページのデザイン上オブジェクトが邪魔なら非表示にすればいいのですが訪問者としてはせめて再生、停止の権利くらい欲しいですよね。embedの属性にwidth="70" height="40"と加えると、

　←これくらいのコンパクトサイズになります。

　またembed要素を<p align="left"、または"center"、または"right">～</p>で囲むとオブジェクトをそれぞれ左揃え、中央揃え、右揃えに出来ます。ちなみにスタイルシートなら<p style="text-align:center;">でOKです。<p>とはセンテンスの設定の要素です。もちろん<div>でも、<table>内に入れたりもOK。

ちなみにNetscape、Firefoxはユーザーがplug-inを指定しないとMidiは再生されません。

* 注意 *
bgsoundはInternetExplorerが、embedはNetscape、InternetExplorer等が独自に対応している要素です。W3Cでは定義されていません。

* 参考 *
上記基本的なembed要素の属性にでてこなかった属性とembedには関係のない属性をまとめます。

embed要素のその他の属性

volume="" (音量)
再生される音量を調節できます。ただし、plug-inによって指定値と音量は変わってきます。InternetExplorer+WindowsMediaPlayerの場合は0が最大で-10000が最小です。Quicktimeの場合は0が最小、100が最大です。すなわちIEで最大値"0"を指定したらネスケでは全く鳴らなくなります。ですからこの属性は指定しない方がいいでしょう。

hspace、vspace="ピクセル指定"、または"%指定" (余白指定)
hspaceが水平余白、vspaceが垂直余白です。imgと同じでオブジェクトの周りに余白を作ります。

align="left"、または"right" (回り込み指定)
これもimgと同じく指定することによりテキスト等が回りこみます。この他、middle、top、bottomなどの属性値もあります。

alt="***" (代替表示)
オブジェクトが実行されない場合の代替テキスト。

title="***" (タイトルや情報)
情報提供。InternetExplorerやNetscapeではOnMouseOverでチップ表示されます。

style="" (スタイルシート)
embedでスタイルシートで視覚効果が見込めるものはマージン指定とボーダー指定くらいかな??

embed要素とは関係のない属性
以下の属性は指定しても意味がないので指定する必要はありません。XG専用要素もありますが「MIDPLUG for XG」の一般配布は終了したので標準的とはいえません。

repeat="true"、または"false" (自動再生設定)
XG専用??リピート指定はloopで。なんだかよくわかりませんが回数も指定できるらしいです。

panel="0"、または"1" (パネル??)
これもXG専用。パネルとやらのデザインが変わるらしい。たまにコレをプラグインオブジェクトの表示/非表示を指定する属性だと勘違いしてる人もいますがそれはhidden属性で決定します。

W3Cは<embed>を完全無視?? これからは<object>!!

　Midiの再生によく使われる<embed>はもともとNetscapeの独自拡張要素で後にInternetExplorer等も対応しました。独自拡張要素なので当然W3CのHTMLの仕様にはありません。同じくNetscapeの独自拡張要素である<center>は<div align="center">の略として一瞬採用されましたがembedだけは認めたくないみたいです。
　「<embed>なんか仕様書に無いヤツはイヤっ」というW3C信者の方は<object>要素を使いましょう。ただ<object>要素はまだ歴史が浅い要素なのでブラウザによっては実装が違うので注意が必要です。もっとも簡単な記述は、

　これだとDOCTYPEでHTML4.01を宣言しつつもembedでBGMを鳴らすという矛盾を回避できます。Midiファイルの指定が何箇所もあるのはブラウザの実装の違いのためです。なお<object>要素にはwidth、heightの属性を指定するよう推奨されているので適当に指定してください。サイズを指定することによりimgと同じくMidiデータの読み込中でも継続する文書を読み込めます。

自動再生、ループに関する制御は<param>要素で指定できます。それぞれ、

autostartは<param>での指定がなければ自動再生、loopは指定が無ければループされません。

　ちなみに「<a href...以下略></a>」の部分はオブジェクトを読み込めない時の代替手段。だから「最新のブラウザを使ってね」などのメッセージでもOK。Operaは<a>要素でMidiファイルへリンクするとプレーヤーが起動することなくBGMのように再生されます。(但しプラグイン未指定の場合。) だから上記記述例がNetscape、InternetExplorer、Opera、Safariに対応した汎用的な手段と言える・・・かもしんない。ちなみにブラウザが古すぎると(Netscape4.xとか)、<object>そのものを無視してしまうので何も起きません。

現状では<embed>を使うほうが無難かもしれません。"taitai studio"でも現在は<embed>で指定しています。しばらくして2大ブラウザの実装が落ち着いてきたら<object>に移行するかもしれませんが・・・。

イーバンク銀行なら預金金利が何倍もお得!!セブンイレブン・郵貯ATMも使えます!

3・サーバへ転送する ↑

　BGMを挿入するタグを記述したらとりあえずローカル(ご自分のパソコン)で確認してみましょう。挿入したページ(Htmlファイル)を開いて見てください。うまくBGMが再生されていますか? プレーヤーは表示されているのに音楽がならないなどの場合はタグの記述ミスです。もう一度確認してみてください。

　ローカルで確認できたら今度はサーバに転送します。転送の際はBGMを鳴らすページ(Htmlファイル)と一緒に必ずMidiファイルも転送して下さい。サーバに画像がなかったりしたら×になるようにMidiファイルを転送し忘れると再生されません。

　転送が完了したらサーバ上に転送したページへアクセスしてみましょう。無事、BGMが再生されていたら作業は完了です。再生されていない場合はもう一度記述したタグを確認して見てください。

　再生されない時に考えられる原因はタグにあると思います。src=で指定したMidiファイル名と実際のMidiファイル名が同じであるか確認して下さい。サーバに転送したMidiファイル名とページから指定したファイル名は同じか? サーバに転送したMidiファイルの拡張子とページから指定した拡張子は同じか? など。ローカルではファイル名の大文字、小文字の違いや拡張子（*.midと*.MID）の違いを区別しなくてもサーバ上では区別します。(サーバのOSがWindowsとかだったら大丈夫ですけど・・・。)

　また、間違ってアスキーモード(テキストモード)で転送していないか確認してみましょう。ファイル転送時は必ずバイナリモードで転送してください。アスキーモード(テキストモード)で転送するとMidiファイルとして読み込めなくなります。FFFTPなど多くのソフトでは予めMidiファイルはバイナリモードで転送するように設定されています。

　パス(srcに記述する属性値)の記述方法に関する詳しい情報は「よく頂くご質問」にも記載しています。またFTPってナニ!?という方は「FTPの利用方法」をご覧下さい。

【Lunascape 4】RSSリーダー付無料タブブラウザ。mixiやYoutubeとの連携も。

■ WebページBGM挿入 (1/3)

1・BGM素材を入手する ↑

2・ページへ挿入する ↑

W3Cは<embed>を完全無視?? これからは<object>!!

3・サーバへ転送する ↑