ホームページやブログにBGMをつける

(ブログについてはFC2ブログで動作を確認しています。)

ホームページを開いたときにBGMが流れることがあります。これはbgsound要素embed要素を使っています。
ブログでも応用できますので私自身の資料としてまとめました。不備な点とあると思いますがご容赦ください。
なお、ブログによっては設置できないものもあります。私はFC2ブログで動作を確認しました。(gooでは駄目です。)


bgsound要素:<bgsound src="サウンドファイルのURL">が基本です。これにくり返す回数や音量の属性を追記できます。
但し、このままですとページを開いた途端に音が出ますので好ましくありません。そこで何らかの操作をして再生したり止めたりできる工夫が必要です。ただ、このbgsound要素は全てのブラウザで使えるものではありません。IEでは使えます。
embed要素:<embed src="サウンドファイルのURL">が基本です。width属性、height属性の追加でプラグインの幅や高さを指定できます。IEのほか多くのブラウザで使用できます。

ここではbgsoundについてはボタンまたは画像クリックで再生、停止出来るようにしています。
embedボタンで再生、ボタンで停止出来るように設定されます。

このページで視聴する際は必ず一つずつ聞いて下さい。同時には働きません。

なお、それぞれのソースは表の下においてあります、それぞれの「タグを選択/コピー」ボタンをクリックしてコピーできます。説明文のソースはコピーしても動作しなことがあります。

bgsound要素の例
input要素のタイプ属性でbutton(普通のボタン)を使ったものです。styleで大きさや色を変えることもできます。
ソースは次の通りです。
<bgsound id="snd" src="" volume="-500" loop="-1"><INPUT type="button" value="BGMon/off"onclick="if(snd.src==''){snd02.src='サウンドファイルURL'}else{snd.src='';}">
id="snd"…ボタンクリックの制御にidを使います。ここではsndがそれです。3ヵ所あります。このページのように複数のBGMを使っている場合はそれぞれ変える必要があります。ブログでもその都度変えた方が無難です。 
volume="-500" は音量のコントロールです。値は「-10000」から「0」までの整数で、「0」が最大の音量。例では「-500」として音量を押さえています。
loop="-1" はくり返す回数です。値を「-1」とすればいつまでもくり返し、「0」とすればくり返しません。
value="BGMon/off" の””の中の文字はボタンに表示される文字です。
前述しましたがボタンの色や文字、サイズはstyleで変える事が出来ます。『ボタンのいろいろ』をご覧ください。
のボタンの代わりに画像(写真も)使うことが出来ます。次がソースです。
<bgsound id="snd1" src="" volume="-500" loop="-1"><img src="画像URL"onclick="if(snd1.src==''){snd1.src='サウンドファイルURL'}else{snd1.src='';}">
同じページですのでidを変えているのがわかりますね。
これは画像を使ったものですが、ONとOFFで画像が変わるものです。スライドショー「PS-05」の応用で id も2種類、ソースも長くなります。参考までに作ってみました。下がソースです。
<span id="wak" num="1"><bgsound id="snd3" src="" volume="-200" loop="-1"><img src="ON画像URL" onclick="if(wak.num==1){wak.num=2;this.src='OFF画像URL';snd3.src='サウンドファイルURL';}else if(wak.num==2){wak.num=1;this.src='ON画像URL';snd3.src='';}"></span>
id="wak" は画像を切り替える為のidです。ここでは wak を使いました。snd と同じように使用の都度変えます。5か所あります。snd の id は3ヵ所です。ON画像URLは2か所あります。OFF画像URLは1か所です。
embed要素の例
基本的には下のソースです。 idは使っていません。
<EMBED src="BGMファイルのURL" autostart="false" hidden="false" loop="true" width="80" height="44">
autostart="false" は自動的に再生するか銅貨を指定します。ここでは false として再生しないようにしています。 true とすると再生します。false としておきましょう。
hidden="false" はデータを表示するか否かの指定です。表示させます。(trueではプラグインが表示されません)
loop="true" は再生を繰り返す回数の指定です。true とすると無限、false は1回。
width="75" height="44" はプラグインのサイズです。いろいろと変えてみましたがこの程度が適当なようです。
BGM on-off
embed要素を少し装飾したのがこれです。その1に背景をつけ下に BGM on-off と文字を入れました。その分ソースが長くなります。
<TABLE bgcolor="#9999ff" width="99"><TBODY><TR><TD align="center" bgcolor="#008080" height="57" valign="middle"><EMBED src="BGMファイルのURL" autostart="false" hidden="false" loop="true" width="80" height="44" align="top"></TD></TR><TR><TD align="center" bgcolor="#008080" height="57"><FONT size="-1" color="#ffffff"><B>BGM on-off</B></FONT></TD></TR></TBODY></TABLE>
bgcolor="#9999ff"は背景色、width="99"はテーブルの幅、bgcolor="#008080" height="57"はプラグイン表示部の背景色、bgcolor="#008080" height="57"は文字部分の背景色と高さ、FONT size="2" color="#ffffff"は文字サイズと色です。
BGMファイルに直接リンクする
自分のホームページにアップロードしてあるBGMファイルに直接リンクすることもできます。gooブログでも使えました。
画像を使った例です。クリックするとWindows Media Playerが起動します。画像を使いましたが文字でもかまいません。下がソースです。
<a href="BGMファイルURL" target="_blank"><img src="画像ファイルURL" width="100"></a>
ここをクリック 文字を使った例です。文字は好きなように…。クリックすると同じくWindows Media Playerが起動します。
<a href="BGMファイルURL" target="_blank">ここをクリック</a>

1~7のソースです。[タグ選択/コピー]をクリックします。

このぺーじのBGMは、下のサイトからお借りしました。『音楽の部屋』様・『Shinjyous'MusicRoom』様・『Gallery Oto』様
なお、BGMファイルはダウンロードしたものを自分のブログなどにアップロードして下さい。直リンクは禁止されています。それぞれのサイトの注意書きをよく読んで下さい。
それと、著作権の問題があります。自分でCDを買って来てファイルにしてもブログなどで公開すると音楽著作権に触れますのでくれぐれもご注意ください。