BGM再生用JavaScript：曲選択フォーム複数設置

BGM再生用JavaScriptですが、曲選択フォームは複数設置出来る方が、作者毎やカテゴリ毎なんかに分けられて便利かも……ということで、対応してみました。

【注意】
他の方の作成された曲データをBGMとしてご自分のサイト上で使用する場合には、必ず前もって作成者ご本人の許可を取ってから設置するようにして下さい(このサイト上で設置しているものも含みます)。
素材として配布されているものを使用する場合は、配布元の決まりに従って下さい。
サイト上への設置や再配布には制限や決まり事などがある場合がほとんどです。
例：再配布禁止、配布元サイトへのリンク設置、曲データへの直リンク禁止、etc.

こんな感じで(↓)、記事本文中に選択フォームを設置することも出来ます。

自作ピアノ曲 by ろんちゃん
from ろんちゃん言いたい放題～断続的日記～

♪選曲 即興ピアノ曲　無題２ 即興ピアノ曲　無題３ 即興ピアノ曲　無題４ 即興ピアノ曲　「春の躍動」 即興ピアノ曲　無題５ [演奏停止]

music by Sora Aonami
from オルゴールの城

♪選曲 星降る夜 うさぎ 祈り Green Sleeves Nocturne,op.9-2 [演奏停止]

music from blog-tunes

♪選曲 beauty water koushin [演奏停止]

複数フォームを設置する上での注意点としては、

• 設置フォームのフォーマットは、

  <form name="(フォーム名)" class="bgmSelectForm" action="javascript:bgmChange()" >
      <div>(曲データ提供元の明示・リンク等)</div>
      <select class="bgmSelected" name="bgmSelected">
          <!-- 0--><option value="" selected>♪選曲</option>
          <!--(数字)--><option value="(曲データURL)" >(曲タイトル)</option>
            ：
          <!-- X--><option value="">[演奏停止]</option>
      </select>
      <input class="bgmChangeButton" onclick="javascript:bgmChange(this.form)" type="button" value="切替" />
  </form>
  

• 同一ページ内で設置するフォーム名（<form>タグ中name="～"の～部分の英数字)は全て違う名前にすること。
• 上記フォーム名以外のclass及びnameについては変更しないこと。
• 【制限】コントロール(プレイヤ)表示場所はページ内で一ヶ所のみとなる。
  (id/classが"bgmControlWindow"の<div>タグで囲まれた部分に表示)

となります。

以下、設置用HTML例です。

<script type="text/javascript" src="https://furyu.tea-nifty.com/script/bgmChange.js"></script>

<style type="text/css">
/* _/_/_/ Control 用表示設定 _/_/_/ */
.bgmControl { /* BGMが選択されているとき */
    /* width: 148px; height: 80px; */
        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;
    }
.bgmTitle { /* 演奏中のタイトル表示(showtitle="1"のとき) */
        width: 148px;
        margin: 0px; padding: 4px 0px 4px 0px;
        border-style: solid;
        border-width: 2px;
        border-color: #224400;
        text-align: center;
        color: #662200;
        background-color: #FFCCEE;
        font-size: 12px;
        font-weight: bold;
    }
/* _/_/_/ Form 用表示設定 _/_/_/ */
.bgmSelectForm {
        margin: 4px 0px 12px 0px; padding: 0px;
    }
.bgmSelected {
        width: 120px;
        color: #662200;
        background-color: #FFEECC;
        font-size: 12px;
        padding: 2px 0px;
    }
.bgmChangeButton {
        margin:0px; padding:0px;
        border-style: solid;
        border-width: 1px;
        border-color: #66CC00;
        color: #662200;
        background-color: #FFCCEE;
        font-size: 12px;
        line-height: 14px;
    }
</style>

<div id="bgmControlWindow" class="bgmControlWindow"></div>

<form name="bgmSelectForm" class="bgmSelectForm" action="javascript:bgmChange()" optval="hideplayer" showtitle="1" >
    <div style="color:lightslategray; font-size:x-small; font-weight:bold">自作ピアノ曲 by ろんちゃん<br />
        from <a href="http://ronchan.cocolog-nifty.com/">ろんちゃん言いたい放題～断続的日記～</a><br />
    </div>
    <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/work3.mp3" >即興ピアノ曲　無題３</option>
        <!-- 3--><option value="http://ronchan.cocolog-nifty.com/work4.mp3" >即興ピアノ曲　無題４</option>
        <!-- 4--><option value="http://ronchan.cocolog-nifty.com/harunoyakudou.mp3" >即興ピアノ曲　「春の躍動」</option>
        <!-- 5--><option value="http://ronchan.cocolog-nifty.com/work5.mp3" >即興ピアノ曲　無題５</option>
        <!-- X--><option value="">[演奏停止]</option>
    </select>
    <input class="bgmChangeButton" onclick="javascript:bgmChange(this.form)" type="button" value="切替" />
</form>

<form name="bgmSelectForm2" class="bgmSelectForm" action="javascript:bgmChange()" showtitle="1" >
    <div style="color:lightslategray; font-size:x-small; font-weight:bold">music by Sora Aonami<br />
        from <a href="http://sora-aonami.com/">オルゴールの城</a>
    </div>
    <select class="bgmSelected" name="bgmSelected">
        <!-- 0--><option value="" selected>♪選曲</option>
        <!-- 1--><option value="https://furyu.tea-nifty.com/music/loveyou2.mid" >星降る夜</option>
        <!-- 2--><option value="https://furyu.tea-nifty.com/music/usagi2.mid">うさぎ</option>
        <!-- 3--><option value="https://furyu.tea-nifty.com/music/inori02.mid">祈り</option>
        <!-- 4--><option value="https://furyu.tea-nifty.com/music/greensleeves2.mid" >Green Sleeves</option>
        <!-- 5--><option value="https://furyu.tea-nifty.com/music/noct2.mid" >Nocturne,op.9-2</option>
        <!-- X--><option value="">[演奏停止]</option>
    </select>
    <input class="bgmChangeButton" onclick="javascript:bgmChange(this.form)" type="button" value="切替" />
</form>

<form name="bgmSelectForm3" class="bgmSelectForm" action="javascript:bgmChange()" optval="blog-tunes" >
    <div style="color:lightslategray; font-size:x-small; font-weight:bold">music from <a href="http://www.blog-tunes.com/tunes/html/">blog-tunes</a>
    </div>
    <select class="bgmSelected" name="bgmSelected">
        <!-- 0--><option value="" selected>♪選曲</option>
        <!-- 1--><option value="http://tunes1.blog-tunes.com/Effect/bt_effect/bt_effect.swf?v=30&s=on&t=1">beauty</option>
        <!-- 2--><option value="http://tunes2.blog-tunes.com/Healing/bt_healing/bt_healing.swf?v=30&s=on&t=2">water</option>
        <!-- 3--><option value="http://tunes2.blog-tunes.com/Classical/ooita_daigaku/ooita_daigaku.swf?v=30&s=on&t=1">koushin</option>
        <!-- X--><option value="">[演奏停止]</option>
    </select>
    <input class="bgmChangeButton" onclick="javascript:bgmChange(this.form)" type="button" value="切替" />
</form>

<div style="color:lightslategray; font-size:x-small; font-weight:bold; margin-bottom:8px;">REFERENCES<br />
Original Article from <br /><a href="http://utauouji2.seesaa.net/article/10650173.html">ブログで音楽を流す方法。</a><br />
by はに丸<br />
<a href="http://utauouji2.seesaa.net/article/10650173.html"></a>
Modified by <a href="https://furyu.tea-nifty.com/annex/2006/04/bgmjavascript_de1f.html">風柳</a>
</div>

<script type="text/javascript">
<!--
// _/_/_/ オプション設定 _/_/_/

// -----------------------------------------------------------------------------
// defaultBGM: 初期BGM
// -----------------------------------------------------------------------------
defaultBgmFormName = 'bgmSelectForm' ;
defaultBGM = 0 ; // <form>～</form>内 <!-- X --> の X 指定(0は再生しない)

// -----------------------------------------------------------------------------
// bgmControlOptions: コントロールのオプション設定
// -----------------------------------------------------------------------------
bgmControlOptSelect = {
    'default' : 'width="150" height="40" panel="1" ShowPositionControls="0" ShowControls="1" ShowAudioControls="1" autostart="true" repeat="true" loop="true"'
, 'blog-tunes' : 'quality="autohigh" width="100" height="100" wmode="transparent"'
, 'hideplayer' : 'hidden="true" autostart="true" repeat="true" loop="true"'
, '種別' : 'オプション'
} ;
bgmControlOptions = bgmControlOptSelect['default'] ;
noBgmControlText = 'Select BGM' ; // BGMが選択されていないときの代替表示

bgmChange() ;

//-->
</script>

【凡例】

赤：BGM選択肢

BGMとして使用する曲データのURLとタイトルです。
<!--番号--><option value="(曲データURL)" >(曲タイトル)</option>
のような形式で記述します。
　

青：クレジット

曲データの作成者や配布元サイトへのリンク等を必要に応じて記述します。
　

紫：パラメータ

BGM選択フォーム用パラメータです。現在のところ、以下のようなパラメータがあります

name	：	BGM選択フォームの名前です(必須)。フォームを複数設置する場合には全て違う名前にして下さい。
optval	：	BGMコントロール(プレイヤ)用オプション(bgmControlOptSelectとして定義されているもの)を選択します。 指定しない場合は"default"になります。プレイヤを表示したくない場合は、"hideplayer" とします。"blog-tunes" は blog-tunes 専用です。 bgmControlOptSelect定義を拡張すれば、独自のオプションを付けることも出来ます。
showtitle	：	演奏中に曲タイトルを表示するか否かを示します。"1"で表示、"0"で非表示です。デフォルトは非表示となっています。 [2006.04.30]タイトル表示の拡張を行いました。

なお、optval, showtitle は曲毎に指定することも出来ます。
その場合は、<option value="(曲データURL)" optval="hideplayer" showtitle="1" >のように optionタグの属性として指定します。
曲毎の指定は、<form>タグの指定よりも優先されます。
　

緑：スタイルシート

BGMコントロール(プレイヤ)や演奏中の曲タイトル、及びBGM選択フォームの表示スタイル(CSS)の定義です。お好みに応じて変更して下さい。
　

茶：その他

ボタンや演奏停止中の表示文字、初期BGM指定(設置ページを開いたときに最初から演奏されるBGM：閲覧者によっては嫌う人も多いので注意)です。お好みに応じて変更して下さい。

[2006.05.01]
特定の記事でのみデフォルトでBGMを流すようなサンプルを作ってみました。
リンク先にいくと、BGMが鳴り始めますのでご注意下さい。
→サンプル記事はこちら

【お約束】

• ちょっとした興味から個人的に作ってみたものを公開しているだけですので、全くの無保証です。念のため。
  　
• 設置用HTMLはもちろん、JavaScriptファイルの方も自由に改変して頂いて構いません。
  改変後のファイルをご自分のサイトに置かれる場合、設置用HTMLの1行目(<script>タグのsrc="～"部分)の変更もお忘れなく（当たり前ですが、その後は私が裏でこっそりとスクリプトを修正したとしても、反映されなくなってしまいます(笑)）。
  　
• 改変や設置のご連絡も不要ですが、『ここはこうしたほうが良い』等、アドバイスは歓迎です。