BGM再生用JavaScriptと、サイト設置用のHTMLを作成してみました。
下の方に書いたHTMLを、サイドバー等のHTMLを記述できるところに貼り付けます。
曲選択フォームを複数設置したい場合は→こちら。
【注意】
他の方の作成された曲データをBGMとしてご自分のサイト上で使用する場合には、必ず前もって作成者ご本人の許可を取ってから設置するようにして下さい(このサイト上で設置しているものも含みます)。
素材として配布されているものを使用する場合は、配布元の決まりに従って下さい。
サイト上への設置や再配布には制限や決まり事などがある場合がほとんどです。
例：再配布禁止、配布元サイトへのリンク設置、曲データへの直リンク禁止、etc.
元ネタは、はに丸氏のサイト『BGMを複数曲ボタンで選ぶ[プレイヤー自動再生]:ブログで音楽を流す方法』より。
また、BGMとしては、ろんちゃんさんという方のサイト『ろんちゃん言いたい放題～断続的日記～』及び『blog-tunes』の曲にリンクさせていただいております。
なぜいきなり？というと、いつものようにfacetさんのサイトを覗きに行ったら、ろんちゃんさんが、4/12以降、今まで再生できていた BGM が出来なくなったばかりでなく、ブラウザまでも落ちてしまうことがある旨書かれていたので、ちょっと調べてみたくなったから、だったり(^^;。
http://facet.cocolog-nifty.com/divers/2003/12/post_20.html#c7466342
4月のMicrosoft の IE 用月例パッチ中、『ActiveXの挙動変更』により発生するようになった、らしいです、が。これ、どうもセキュリティがらみじゃなく、特許絡みの対策らしいですね。困ったものです。
http://www.microsoft.com/windows/ie_intl/ja/using/techinfo/activexupdate.mspx
http://www.itmedia.co.jp/news/articles/0603/01/news029.html
http://internet.watch.impress.co.jp/cda/special/2006/04/07/11553.html
Window Update(Microsoft Update)により自動更新している人は勝手に適用されてしまうため、WinXP SP2＋IE6 SP1 で使っている人は(他の組合せもあるけれどこれが一番ユーザが多いでしょう) 4/12 以降、『この Web ページで ActiveXコントロールを実行するにはクリックしてください。』というダイアログが出てくるようになったのだとか。
でも自分は諸般の事情でメインで使っているノートPCはWinXP SP1なので今のところ影響がなかったり……ただ、別のマシンはSP2なのだけれど、現象出ないんですよね。
→QuickTimeを入れてみたら、ダイアログが出ることは確認。落ちるところまでは行きませんでしたが。
ダイアログが出ることも、これはこれで充分うっとうしいのですが、、、問題はそれより、ダイアログが出た後で[OK]を押すと、そのままブラウザが落ちてしまうことがある、というところ。これは明らかにIE6の不具合だと思われるのですが……難儀ですねぇ(実はその後のパッチでこっそり更新されていたり？)。
なお、うちではこの現象そのものではありませんが、WinXP SP2＋IE6 SP1の環境で、IE6のセキュリティ設定において『ActiveXコントロールとプラグインの実行』を『ダイアログを表示する』にしてあると、ダイアログが出て[OK]を押した途端にIE6が落ちてしまう(ことがある)、という現象は確認しております。
で、ダイアログを表示しなくしてしまえば、もしかしてブラウザも落ちなくなるかな、と思って、スクリプト部分を外出しにしてみたのですが……なにせ、うちではそもそも『この Web ページで ActiveXコントロールを実行するにはクリックしてください。』というダイアログが出たことがないので確認しようがなく……。
どなたか、試していただけませんかねぇ？
以下、HTMLソースです。
<script type="text/javascript" src="http://furyu.tea-nifty.com/script/bgmChange.js"></script>
<style type="text/css">
/* _/_/_/ Control 用表示設定 _/_/_/ */
.bgmControl { /* BGMが選択されているとき */
/* width: 148px; height: 40px; */
margin: 0px; padding: 0px;
}
.noBgmControl { /* BGMが選択されていないとき */
width: 148px;
margin: 0px; padding: 0px;
text-align: left;
color: #66CC00;
font-size: 16px; line-height: 18px;
font-weight: bolder;
}
/* _/_/_/ Form 用表示設定 _/_/_/ */
.bgmSelectForm {
margin: 4px 0px 12px 0px; padding: 0px;
}
.bgmSelected {
color: #662200;
background-color: #FFEECC;
}
.bgmChangeButton {
border-style: solid;
border-color: #66CC00;
color: #662200;
background-color: #FFCCEE;
}
</style>
<div id="bgmControlWindow" class="bgmControlWindow"></div>
<form name="bgmSelectForm" class="bgmSelectForm" action="javascript:bgmChange()">
<select class="bgmSelected" name="bgmSelected">
<!-- 0 --><option value="" selected>♪選曲♪</option>
<!-- 1 --><option value="http://ronchan.cocolog-nifty.com/work2.mp3">即興ピアノ曲 無題２</option>
<!-- 2 --><option value="http://ronchan.cocolog-nifty.com/work4.mp3">即興ピアノ曲 無題４</option>
<!-- 3 --><option value="http://ronchan.cocolog-nifty.com/harunoyakudou.mp3">即興ピアノ曲「春の躍動」</option>
<!-- 4 --><option value="http://ronchan.cocolog-nifty.com/work5.mp3">即興ピアノ曲 無題５</option>
<!-- 5 --><option value="http://tunes1.blog-tunes.com/Effect/bt_effect/bt_effect.swf?v=30&s=on&t=1" optval="blog-tunes" >beauty</option>
<!-- X --><option value="">[演奏停止]</option>
</select>
<input class="bgmChangeButton" onclick="javascript:bgmChange()" type="button" value="BGM切替" />
</form>
<script type="text/javascript">
<!--
// _/_/_/ オプション設定 _/_/_/
// -----------------------------------------------------------------------------
// defaultBGM: 初期BGM
// -----------------------------------------------------------------------------
defaultBGM = 0 ; // <form>～</form>内 <!-- X --> の X 指定(0は再生しない)
// -----------------------------------------------------------------------------
// bgmControlOptions: コントロールのオプション設定
// -----------------------------------------------------------------------------
bgmControlOptions = 'width="148" height="40" panel="1" ShowPositionControls="0" ShowControls="1" ShowAudioControls="1" autostart="true" repeat="true" loop="true"' ;
bgmControlOptSelect = {
'blog-tunes' : 'quality="autohigh" width="100" height="100" wmode="transparent"'
, '種別' : 'オプション'
} ;
noBgmControlText = 'Select BGM' ; // BGMが選択されていないときの代替表示
bgmChange() ;
//-->
</script>
【お約束】
- ちょっとした興味から個人的に作ってみたものを公開しているだけですので、全くの無保証です。念のため。
- 設置用HTMLはもちろん、JavaScriptファイルの方も自由に改変して頂いて構いません。
改変後のファイルをご自分のサイトに置かれる場合、設置用HTMLの1行目(<script>タグのsrc="～"部分)の変更もお忘れなく（当たり前ですが、その後は私が裏でこっそりとスクリプトを修正したとしても、反映されなくなってしまいます(笑)）。
- 改変や設置のご連絡も不要ですが、『ここはこうしたほうが良い』等、アドバイスは歓迎です。
