Senses Circuit > BGM Material > BGM 設置方法 その他

::BGM 設置方法 その他::

BGM素材をサイトに設置する方法などを、分かりやすく説明しています。よく分かってない方は、一通り読んで参考にして下さい。

マナーについて考える

まずはBGMを設置する際の個人的に思うマナーについてお話してみようと思います。よろしければ少しお付き合い下さい。

いきなりTOPページで自動的に音楽を流す

色々なサイトを訪問していると、TOPページでいきなり 音楽を流しているサイトをみかけませんか? 実はこれ、結構嫌う人がいるようです。

何も心の準備が出来ないままに、 自分の好みではない音楽を強制的に流されたら、 あなたはどう思いますか?

また、深夜や仕事中に何も知らずに訪問した人は、 いきなり音楽が流れるとまずい人も、中にはいるかもしれません。 いけない会社員は、仕事中に色々なサイトを訪問したりしていることでしょう。 さすがにボリュームを下げてるでしょうけど。 なのでTOPページでは、音楽を流さない方が無難かもしれません。

そうですね。気配りとしては

『中に入ると(または、次のページで)BGMが流れます』

『この先BGMが流れます。音量にご注意下さい』

このようなコメントを一言添えておくと、訪問者の方も安心できますね。

再生、停止をできないようにしてしまう

パネルを全部隠してBGMの再生、停止を出来ないようにしているサイトを良く見かけます。 その気持ちは分かります。WindowsXP以前のOSですと、確かに見栄えは悪いですよね。 イメージが崩れるのは誰だって嫌なもんです。 でも・・・

このような方にとって再生、停止を選べないのは 迷惑なことこの上ないです。 身内ノリを目指すサイトならそれでも良いのでしょうが、 多くの方に訪問してもらいたいと考えているのでしたら せめて再生、停止だけでも出きるようにした方が親切です。 詳細は下に掲載している『基本』一般的な方法 をご参照下さい。

また、サイトイメージを壊さないで済む方法を載せました。 『応用』フレームを使うに詳細を書いてあります。 参考にして下さい。

『基本』一般的な方法

基本中の基本と言えます。これをクリアしないとBGMは設置できないので、頑張って下さい。見た目複雑そうですが、しっかり読めば実は簡単なことに気づくはずです。

ダウンロードした圧縮ファイル(.lzh)を解凍ソフトで解凍します。

■オススメ解凍ソフト  >>+Lhaca 以前からずっと愛用しています。

解凍すると.midファイルと.htmlファイルの2種類が入ってます。 .midをFTPソフト等を使ってご自分のサーバーにアップして下さい。

■オススメFTPソフト  >>FFFTP 以前からずっと愛用しています。

つぎはメモ帳やテキストエディタを開いてタグを記述します。 BGMを鳴らすタグは<bgsound>と<embed>の2種類あるのですが <bgsound>はIE専用のタグです。まだまだIEを使ってる人数は大多数を占めていますが、最近は以前に比べ様々なブラウザが登場しており、不特定多数の訪問者を対象とするならば、IE専用タグは使うべきではありません。

当サイトではもちろん素材サイトを運営している立場なので、IE以外のブラウザもサポートしなければなりません。そこで幅広くサポートできるタグに<embed>というのがあります。

以上のような理由から、ここでは<embed>で話しを進めます。


タグ例

<embed src="./xxx.mid" autostart="true" hidden="false" loop="true">

それでは1つずつ説明します。

src="./xxx.mid"
サーバにアップしたmidiファイルを指定します。
MIDIファイルを同一ディレクトリ(フォルダ)にアップした時は そのままMIDIファイルを指定で良いです。 別のディレクトリにある場合正しいパスを記入します。 相対パスでも絶対パスでも可能です。
相対パスと絶対パスの例
相対パス例:src="./midi/xxx.mid">
絶対パス例:src="http://www.xxx.ne.jp/~xxxxxx/midi/xxx.mid">
autostart=""
"true"=データを読みこんだら自動再生。
"false"=再生ボタンをクリックするまで音は鳴りません。
hidden=""
"true"=パネルが表示されない。
"false"=パネルが表示されます。
お分かりとは思いますが autostart="false"とhidden="true"を併用したらダメですよ? 自動再生しないしパネルも出ないので全く意味ないです。
loop=""
"true"=繰り返し再生されます。
"false"=1回のみ再生されます。

これでとりあえず初心者の方でも簡単に設置できるはずです。 まずはとりあえず設置してみましょう!


どうでしょう。うまくできましたか? 普通にタグを記述するとこんなのが出ます。

パネル大画像

ただ、これだと大きすぎですよね。 そこでwidthやheightでパネルサイズを変更出来ます。

例:width=70 height=42とすると

<embed src="xxx.mid" width="70" height="42" autostart="true" hidden="false" loop="true">

こうすると下のようになります。

いかがでしょう。こうすればそんなに邪魔でもなく、訪問者の方も再生、停止を選べます。 設置の参考にしてもらえれば嬉しいです。 もちろん実際は、ご自分の思うように設置をされるのが 一番だと思います。


ちなみにMP3は、ファイルサイズが大きい為に WEB用のBGMには適していません。最近はブロードバンド化が急速に進み、光回線の方も大勢いますが住んでる地域によって格差があり、ネットをしてる人がみんな高速回線で接続してるわけではありません。

MP3は基本的に鑑賞用、またはゲームやFlash等に お使い頂くのがBestだと思われます。

『応用』フレームを使ったOn/Off

ここではフレームページでテキストリンクを使ったBGMの 一番簡単、且つ応用の効くON/OFFの方法を説明します。

細かく説明する為に長々と書いていますが理屈はと〜〜〜っても簡単です。 また、パネルを表示させなくて良いので、見栄えはとてもすっきりして サイトイメージを壊すこともないでしょう。 見栄え重視の方にはオススメの方法と言えます。 しっかり読んで、サンプルを見て理解してお帰り下さい。

例:左右2分割のページがあるとします。

以上のページの完成形がこれ>>Sampleを表示(別窓表示)

※Sampleを開く際にはBGMを止めて下さい。

重要ポイントとしては・・・

■見栄えを綺麗に!パネルを隠す。

パネルを隠す為には?大元のソースは、『基本』一番一般的な方法で挙げた

<embed src="./xxx.mid" autostart="true" hidden="false" loop="true">

とすると、『hidden』がパネルの表示、非表示でしたね? なのでここを『hidden="true"』に変えます。 これで煩わしいパネルは表示されなくなりました。 随分とすっきりしたことでしょう。

■左メニューページのhtmlファイルの中身が全く同じ物を 2個用意して片方にだけBGMタグを貼り付ける。

例えば、menu_bgm_on.htmlとmenu_bgm_off.htmlとした場合

menu_bgm_on.htmlの方にだけ

<embed src="./xxx.mid" autostart="true" hidden="true" loop="true">

と記述します。

最後に両方のファイルの『BGM ON/OFF』の場所に それぞれリンクを貼るだけです。

例:BGM ON /OFF

たったこれだけです。どうです?案外簡単でしょう。 こうすることで、左メニュー部分のBGM ONとBGM OFFのページを、 訪問者の方がクリックして切り替えることで音楽の再生、停止が出来るわけです。お分かり頂けましたか?

何か質問などありましたら遠慮なくBBSに書き込んで下さい。