BGMを複数曲ボタンで選ぶ[プレイヤー自動再生]

>> ブログに音楽を流す方法

posted by はに丸
edit 　re

BGMを複数曲ボタンで選ぶ[プレイヤー自動再生]

音楽SCRIPTのHTML ＢＧＭファイル LOOP
このブログのサイドバー（右上）に設置している複数曲プレイヤー設置のやり方です。
　　※過去に別のスクリプトを公開していましたが、IEブラウザの更新によりエラーが出てしまうようになったので、風柳さんの素晴らしいスクリプトを紹介したいと思います。もうほとんど丸写し状態です（ちょこっと自分仕様＾＾；）

※変更点：
・セレクトボックス内の演奏停止ボタンなし
・はに丸BGM３曲仕様！（もちろん変更可能）

■設置タグ

<script type="text/javascript" src="http://furyu.tea-nifty.com/script/bgmChange.js"></script><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="https://utauouji2.up.seesaa.net/image/hanimaru_pedaru.wma">ペダル</option>
    <!-- 2 --><option value="https://utauouji.up.seesaa.net/image/gakkou.wma">学校の唄</option>
    <!-- 3 --><option value="https://utauouji.up.seesaa.net/image/hoshi-1.wma">星降る夜</option>
  </select>
  <input class="bgmChangeButton" onclick="javascript:bgmChange()" type="button" value="BGM切替" />
</form>
music by <a href="http://utauouji.seesaa.net/" target="_blank">Hanimaru</a>
<script type="text/javascript">
<!--
//* 初期BGM選択
defaultBGM = 0 ; // <form>〜</form>内 <!-- X --> の X 指定(0は再生しない)

//* プレイヤー設定
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>

↑赤字を流したい曲のURL・タイトルに変更して使ってください。
<!-- 番号 --><option value="曲URL">タイトル</option>
を<select>タグ内に追加すれば曲数を増やせます。

◇CSS設定

<style type="text/css">
/* _/_/_/ プレイヤー表示設定 _/_/_/ */
.bgmControl { /* BGMが選択されているとき */
/*     width: 148px; height: 40px; */
    margin: 0px; padding: 0px;
  }
.noBgmControl { /* BGMが選択されていないとき */
    width: 48px;
    margin: 0px; padding: 0px;
    text-align: left;
    color: #66CC00;
    font-size: 16px; line-height: 18px;
    font-weight: bolder;
  }
/* _/_/_/ セレクトボックス表示設定 _/_/_/ */
.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>

◇特定の曲を選択したときだけプレイヤ表示を消したい場合
風柳さんのサイトを参考になさってください。＾＾

注意点
・ブログによっては「改行を<br/>タグに変換する設定」機能が備わっています。コピペして貼る場合は、この機能はオフにしておいてください。
・同ページに１つ以上のプレイヤー設置はうまく動作しません。（複数設置は風柳さんのサイトにて解説されてます）

自分の好きな曲を流す方法
音楽ファイルをアップロードする方法（ウェブスペース）にて多少の説明をしているので、よく分からない人は読んでください。

スペシャルサンクス＾＾*
　風柳亭 - 別館：書庫のある庵 -