« ふと、頭に浮かんだ | トップページ | 久しぶりの運動(?) »

2006/04/28

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

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

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

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

自作ピアノ曲 by ろんちゃん
from ろんちゃん言いたい放題~断続的日記~
music by Sora Aonami
from オルゴールの城
music from blog-tunes

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

  • 設置フォームのフォーマットは、
    <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="http://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" >即興ピアノ曲 無題2</option>
        <!-- 2--><option value="http://ronchan.cocolog-nifty.com/work3.mp3" >即興ピアノ曲 無題3</option>
        <!-- 3--><option value="http://ronchan.cocolog-nifty.com/work4.mp3" >即興ピアノ曲 無題4</option>
        <!-- 4--><option value="http://ronchan.cocolog-nifty.com/harunoyakudou.mp3" >即興ピアノ曲 「春の躍動」</option>
        <!-- 5--><option value="http://ronchan.cocolog-nifty.com/work5.mp3" >即興ピアノ曲 無題5</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="http://furyu.tea-nifty.com/music/loveyou2.mid" >星降る夜</option>
        <!-- 2--><option value="http://furyu.tea-nifty.com/music/usagi2.mid">うさぎ</option>
        <!-- 3--><option value="http://furyu.tea-nifty.com/music/inori02.mid">祈り</option>
        <!-- 4--><option value="http://furyu.tea-nifty.com/music/greensleeves2.mid" >Green Sleeves</option>
        <!-- 5--><option value="http://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="http://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選択フォーム用パラメータです。現在のところ、以下のようなパラメータがあります
nameBGM選択フォームの名前です(必須)。フォームを複数設置する場合には全て違う名前にして下さい。
optvalBGMコントロール(プレイヤ)用オプション(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="~"部分)の変更もお忘れなく(当たり前ですが、その後は私が裏でこっそりとスクリプトを修正したとしても、反映されなくなってしまいます(笑))。
     
  • 改変や設置のご連絡も不要ですが、『ここはこうしたほうが良い』等、アドバイスは歓迎です。
     

« ふと、頭に浮かんだ | トップページ | 久しぶりの運動(?) »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

音楽」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

風柳さんへ

これまた、凄いモノ出来ましたね!!
見た瞬間、感謝感激でした(⌒▽⌒;) オッドロキー

いや、実を言うと私のピアノ曲とBackMusicを分けられないか、昨日色々試していたんですよ。

こういうのって、以心伝心なのかなぁーヽ(・∀・)ノ 

早速、使用させて頂きますね♪

風柳さん、ありがとう!!

風柳さんへ

この設置用HTMLの内容を自分なりに、改変してみました。
ご覧になって風柳さんのご意見も頂戴したいと思いますので、どうぞよろしくお願いいたします。m(._.)m 

私なりには、もう大大大満足です☆彡

風柳さんありがとうヽ(・∀・)ノ 

ろんちゃんさん、どうもです。

サイト拝見しました(^^)。

この記事をアップしたのは出勤前で、どたばたしていたので細かい注釈なんかは書いていなかったのですが、隠し機能(^^;として入れてあった曲タイトル表示や、曲毎に個別に<option>内にoptval/showtitleを埋めこむ方法なんかもしっかり見抜かれていますね(笑)。

ちょっと気になったのは、

■二つめのフォーム、タイトルが『BGMi』と'i'が付いているのは打ち間違い?それとも何か意味が?

■『オルゴールの城』のMIDIファイル、URLがこのサイト上ファイルへのリンクになっていますが、利用規約には「ダウンロードしたものをご自分のサイトにアップしてご使用ください。」とあるので、ご自分のサイト内のものに戻しておいてください。
(実は私もしばらく、ろんちゃんさんのサイト上ファイルへのリンクになっていたんですが、利用規約を確認してから慌ててダウンロード→自分のサイトにアップしてリンクを張り替えたのです(^^;)

■“music by Sora Aonami. ”の表示、あれだと全BGMが対象ととれてしまいそうですが……My Material Listの方には明示されているので大丈夫、かな?

■マイリストの『自作ピアノ曲』の方、リンクはそのままにしておいても良かったのでは?ダウンロードしてゆっくり聴きたい方もおられると思いますので……(ダウンロードさせたくない場合は別ですけど)

というところですね。
余計なお世話だったらごめんなさい。

To ろんちゃんさん

書き忘れてましたが、

, 'hideplayer' : 'width="0" height="0" panel="0" ShowPositionControls="0" ShowControls="0" ShowAudioControls="0" autostart="true" repeat="true" loop="true"'

となっているところ、

, 'hideplayer' : 'hidden="true" autostart="true" repeat="true" loop="true"'

に修正しておいてください。
これで変な風に点が残ることもなく、プレイヤが隠れる筈です。

風柳さんへ

ご指摘ありがとうございます(~o~)

>タイトルが『BGMi』と'i'が付いているのは打ち間違い?

はい!打ち間違いですw

>『自作ピアノ曲』の方、リンクはそのままにしておいても良かったのでは?
以前は特に今まで通りでいいやっと思っていましたが、ネットの世界の怖さ(ピングでウィルス攻撃されたり、色々あり)を体験したため、風柳さんのフォームに入れることにしたのですよ。('-'*)コワイヨコワイヨ

>URLがこのサイト上ファイルへのリンクになっていますが、ご自分のサイト内のものに戻しておいてください。

全然気が付かなかったです(^^;
はい、今直しました・・・・w

>, 'hideplayer' : 'hidden="true" autostart="true" repeat="true" loop="true"' に修正しておいてください。

はい、今修正しときました☆

風柳さん、どうもありがとうヽ(・∀・)ノ & m(._.)m   

風柳さん、おはようございます。
先日自作ピアノ曲をいつもの様に、BGM再生用JavaScriptに追加したのですが、それ以来自作ピアノ曲集のフォームのみ最初に選曲をして曲を聴く時に表示が一瞬二重にダブる現象が起こるようになってしまいました。
特に、細かく気にする必要もないのかもしれませんが・・・
やはり、7曲も(しかも1曲の容量が多い)フォームに入れてしまうと、重くなってしまうのでしょうか?
お手隙の時で構いませんので、ご回答の程よろしくお願いします m(_ _)m

ろんちゃんさん、どうもです。

| 最初に選曲をして曲を聴く時に表示が一瞬二重にダブる現象
これがよくわかりませんでした。
サイトも拝見してみたのですが……別に普通に見えているような?

もしかすると、タイミングによっては、曲をダウンロードするときの負荷により(そちらが優先されて)、ブラウザの画面の描画(更新)が遅れているのかも知れません。
#曲数自体は特に影響しないのではないかと思うのですけれど。

このサイトにも7曲目を追加してみましたが、ろんちゃんさんから見ると同じように表示がおかしくなりますか?

風柳さん、こんにちは♪
風柳さんのBGMフォームで確認したところ、質問したような現象は出ませんでした。
ちなみに今、自分のブログで確認したところ以前のような現象は直っていました・・・・(??)
おそらく風柳さんのおっしゃる、「もしかすると、タイミングによっては、曲をダウンロードするときの負荷により(そちらが優先されて)、ブラウザの画面の描画(更新)が遅れているのかも知れません。」なのだと思います。

お騒がせしまして・・・orz 
コメントありがとうございました♪m(_ _)m

暑い最中ではありますが、遅ればせながら・・・

「☆暑中お見舞い申し上げます☆」
今後ともどうぞよろしくお願いいたします!

ろんちゃんさん、どうもです。

ろんちゃんさんのサイトで何度か試していると、出ました。ようやく現象がわかりました。
多分、先のコメントで推測したような原因だと思いますが、対策となると、ちょっと私には無理かなぁ……すみません。

毎日暑いですよね。外に出るのが億劫です。
そういえば、暑中見舞い→残暑見舞いに変わるのはいつなんでしたっけ?立秋から?

風柳さん、こんばんは♪
暑中見舞い→残暑見舞いに変わるのは・・・・ん~~多分、立秋からだったと思います(自信なしw)

私も毎年、残暑見舞いになるのか?微妙な時は、お盆明けに出してますけどね♪

再度、現象確認ありがとうございました☆&m(_ _)m

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: BGM再生用JavaScript:曲選択フォーム複数設置:

» BGM再生用JavaScript:演奏中タイトル表示 [風柳亭 - 別館:書庫のある庵 -]
BGM再生用JavaScriptの前回の修正で、曲演奏中にタイトルが出るオプションをこっそり追加したんですが、今度はその [続きを読む]

« ふと、頭に浮かんだ | トップページ | 久しぶりの運動(?) »

戻るリンク追加

カレンダー

2019年9月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

ココログカレンダーPlus

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ