Senses Circuitロゴマーク
フリーBGM MP3 効果音-SE- Wave Loop MIDI 着メロ 音楽素材サイト [Senses Circuit]

素材設置方法

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

 このエントリーをはてなブックマークに追加

WebサイトでBGMを再生するには?

以下の方法は、BGM素材をサイトに設置する場合の基本中の基本と言えます。これをクリアしないとBGMは設置できないので、頑張りましょう。見た目複雑そうですが、しっかり読めば実は簡単なことに気付くはずです。

まずはダウンロードした素材の解凍

ダウンロードした圧縮ファイル(.lzh)を解凍ソフトで解凍します。解凍すると.mid(mp3,wav)ファイルと.htmlファイルの2種類が入ってます。.mid(mp3,wav)をFTPソフト等を使ってご使用中のサーバーにアップして下さい。

オススメ解凍ソフト「+Lhaca

オススメFTPソフト「FFFTP

メモ帳やテキストエディタを開いてタグを記述

BGMを鳴らすタグは<bgsound>と<embed>の2種類あるのですが、<bgsound>はIE専用のタグです。まだまだIEを使ってる人数は多数を占めていますが、最近はFireFoxやGoogle Chromeなど様々なブラウザが登場しており、不特定多数の訪問者を対象とするならば、IE専用タグは使うべきではありません。

当サイトでは素材サイトを運営している立場なので、IE以外のブラウザもサポートしなければなりません。そこで幅広くサポートできる<embed>タグを推奨します。また、XHTMLで記述される場合は<object>タグを使用します。この方法は下に記載しています。

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/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">

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

パネル変更画像

こうすればそんなに邪魔でもなく、訪問者の方も再生、停止を選べます。設置の参考にしてもらえれば嬉しいです。

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

MP3は基本的に鑑賞用、またはゲームやFlash等にお使い頂くのがBestだと思われます。ただしFlashによるMP3Playerなどでパブリッシュされたものに関しては、MP3などのファイルを直接読み込むよりも容量が小さくなることも多いので、MP3Playerなどをご使用いただくのも良いかと思います。

objectタグ記述例(XHTML)

XHTMLではHTML4.01で使用されていた<embed>のタグは廃止されていますので、文法違反となってしまいます。XHTMLで記述する場合は<object>タグを用いて以下のように記述して下さい。

<object id="MediaPlayer" type="audio/midi" width="横幅の数値" height="縦幅の数値">
<param name="src" value="xxx.mid" />
<param name="enabled" value="true" />
<param name="autostart" value="true" />
<param name="uimode" value="full" />
</object>

MIDIではなく、MP3を流す場合 type="audio/mp3"と記述します。

※どうしてもパネルを表示したくない方は、unimodeのvalueをfullではなくfalseとして下さい。

BGMを再生させる際のマナーについて考える

BGMを設置する際の、個人的に思うマナーについて書いてみようと思います。一個人の意見ですが、よろしければお読み下さい。

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

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

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

また、深夜や仕事中に何も知らずに訪問した人は、いきなり音楽が流れるとまずい人も、中にはいるかもしれません。なのでTOPページでは、音楽を流さない方が無難だと思います。

どうしても流したい場合は、TOPページで流すのではなく、現在のTOPページの前にワンクッション置くページを用意し、気配りとして以下のような文章を書いておくと良いでしょう。

  • 『中に入ると(または、次のページで)BGMが流れます』
  • 『この先BGMが流れます。音量にご注意下さい』

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

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

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

  • 事情があってBGMを鳴らしたくない
  • BGMを聴きたくない
  • 流れてるBGMが訪問者の好みではない

このような方にとって再生、停止を選べないのは迷惑です。身内ノリを目指すサイトならそれでも良いのでしょうが、多くの方に訪問してもらいたいと考えているのでしたらせめて再生、停止だけでも訪問者が選べるようにしておいた方が親切です。




サイト内素材検索

イメージ、キーワード素材検索

例:切ない ピアノ

楽曲DL販売取り扱い

同人音楽の森

試聴できます。お気軽にどうぞ

ニコニコ動画

twitter

facebook