ぴかぴか(新しい)おすすめ
⇒ジュース1本で動画も音楽もアップロード!ロリポップ

2006年04月27日

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

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

※変更点:
・セレクトボックス内の演奏停止ボタンなし
・はに丸BGM3曲仕様!(もちろん変更可能)

■設置タグ
<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="http://utauouji2.up.seesaa.net/image/hanimaru_pedaru.wma">ペダル</option>
    <!-- 2 --><option value="http://utauouji.up.seesaa.net/image/gakkou.wma">学校の唄</option>
    <!-- 3 --><option value="http://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>
◇特定の曲を選択したときだけプレイヤ表示を消したい場合
風柳さんのサイトを参考になさってください。^^

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

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

スペシャルサンクス^^*
 風柳亭 - 別館:書庫のある庵 -
この記事へのコメント
TBありがとう!!
BGMの再生方法に悩んでいたところです。
かなり詳しいブログですね
参考にさせてもらいます。
Posted by サマスタ at 2005年12月17日 12:30
BGMがエラーがおこって変えられないのですが、僕だけでしょうか?
対応をお願いします。
Posted by サマスタ at 2005年12月17日 12:32
エラーが起きて替えられない、とはボタンを押しても無反応ということでしょうか?
同じページにプレイヤーを複数表示させている場合にjavascriptの競合で切り替わらないエラーを確認してます。
Posted by はに丸 at 2005年12月17日 12:59
あと、上のタグをブログに貼り付けたところ
src=・・・ width=150 height=40
type=audio/x-wav AUTOSTART="TRUE" PANEL="1">

の文字が出てきます。
再生ボタンがXで表示されます。
使っているブログはFC2です。
Posted by サマスタ at 2005年12月17日 13:04
http://utauouji.blog38.fc2.com/blog-entry-1.html
試しに今、作ってみました。
たぶん投稿の際に、本文・追記の下の、
「詳細設定」にあるテキストフォーマットで「自動改行+HTMLタグ」にチェックが入っているのではないでしょうか。「HTMLタグのみ」にチェックを変更して投稿し直してみてください。
Posted by はに丸 at 2005年12月17日 13:33
やってみたらできました!
わざわざ実際に作って証明してくださってありがとうございます。
Posted by サマスタ at 2005年12月20日 00:42
上の設置タグで

"
が抜けてありました。
これを補足したところしっかり起動しました。
上のタグのままでは動かないような気がするのですが・・・
Posted by サマスタ at 2005年12月20日 01:23
>サマスタさん
↑のブログはコピペして動いたので、他のミスが原因ではないかと考えられます。ですがキレイな文法ではないですね。
大文字表記も文法上よろしくないです。
適当に直して使ってください。
Posted by はに丸 at 2005年12月20日 05:17
はじめまして、こんにちは。
ずっと、悩んでいて、検索して、ココを
見つけましたぁ。
できるかなぁ〜、なにせ、私は、へたっぴ。
また、ご指導、お願いしますね。
では。
Posted by ハンガリー娘 at 2005年12月30日 05:47
こんにちは。
こちらのスクリプト使用させて頂きます。
シンプルで使いやすい!
Posted by waka at 2006年01月11日 14:25
はじめまして。
お世話になります。
こちらのブログを参考にして、上記のBGMプレイヤーを貼り付けたのですが、最近更新されたmicrosoftのActiveXが原因で、ブログが上手く表示されない現象がでています。
現在は応急措置で、こちらのプレイヤーパーツをとりはずしておりますが、「EMBED」が原因のようです。
もし、何か対処策をご存知でしたら、教えて頂きたく、何卒よろしくお願い致します。

参考までに、当方とココログサポートセンターのやりとりを以下に貼付いたします。

〜〜
「このWebページでアクティブコントロールの実行するにはクリックしてください」というメッセージの「警告のダイアログ ボックス」が表示されますのは、Internet Explorer6を4月12日以降のActiveX更新プログラムをインストールいただいた閲覧者様のブラウザに起因いたしております。

 詳細につきましては、以下のURLにてご確認いただきますようお願いいたします。

 ココログにAPPLET、EMBEDまたはOBJECTタグが使用されている場合、ActiveX更新プログラムをインストールしたInternet Explorer6で閲覧されますと「警告のダイアログ ボックス」が表示されます。

 閲覧される方が「警告のダイアログボックス」の[ OK ]をクリックしていただきますと、ココログを閲覧することが可能かと存じます。

 ※「警告のダイアログボックス」の[ × ]をクリックすると、ブラウザが閉じてしまう場合がございます。

 誠に恐れ入りますが、何卒ご理解賜りますようお願いいたします。

 また、弊社ではEMBEDを含むHTMLに関する詳細な情報を持ち合わせていない
ため、HTMLに関しましては、ご自身にて関連書籍またはインターネットなどで
お調べいただきますよう、お願いいたいします。

-----以下、お問い合わせ内容-----

>フリー版で、リッチテンプレートを使用しています。先日のメンテナンス後、
>ココログ以外のブログの方達が、私のブログを閲覧しようとしても、
>「アクティブコントロールをするにはクリックして下さい」とブログの真ん中
>に表示され、それをクリックすると落ちてしまうと言う訴えが出てきています。
>なんとか読もうとしても、途中までしか記事が載らないらしく、私も私のブロ
>グの愛読者様達も困っております。
>誰でも閲覧出来るのがブログの本来のあり方だと
>思います。
>早急に対処及びご返答をお願い致します。

以上です。
長々と記述してしまいましたが、もしお時間が許すのであれば、ご教示いただければ幸いです。
尚、当方のブログはココログフリー版のためHTMLが、いじれません。

何卒よろしくお願い致します。
Posted by ろんちゃん at 2006年04月19日 23:39
はに丸さんへ

4月19日に書き込んだ内容は、BGM再生用JavaScriptを、風柳さんが作成して頂けたので無事解決致しました。

また、はに丸さんの楽曲は今のところ使用しておりませんが、私のブログのMy Favorite Listにリンクさせて頂いております。

では、今後ともよろしくお願い致します。
Posted by ろんちゃん at 2006年04月22日 13:13
お返事遅れてごめんなさい。解決なされたようでよかったです^^;
Posted by はに丸 at 2006年04月24日 18:08
はじめまして、風柳と申します。

こちらの設置タグを使用している場合、4月のInternet Explorerに関する月例パッチに含まれる「ActiveXの挙動変更」によって、「このWebページで ActiveXコントロールを実行するにはクリックしてください。」というダイアログが表示されることがあるようです(WinXP SP2+IP6 SP1+QuickTimeの環境で確認できました)。

これは、設置タグ中のJavaScript部分を外部ファイルにすることで回避できるようです。

ダイアログが出るだけならともかく、場合によってはIE自体が落ちてしまうというケースもあるようですので、可能なようでしたら対処されたほうが良いかもしれません。

なお、当方のサイトではこちらを元に改修したものを設置しております。ご参考まで。
Posted by 風柳 at 2006年04月26日 02:13
書き忘れておりましたが、改修後のタグ(HTMLソース)の公開等に関しての制限については特に見当たりませんでしたので、現在当方で公開中です(ほとんど別ソースと化してはおりますが)。もし何か制限がある場合等には対応いたします。その際はお手数ですがお知らせ下さいますようお願いいたします。
Posted by 風柳 at 2006年04月26日 16:21
はわわ、教えてくださって、ありがとうございます。
Posted by はに丸 at 2006年04月26日 18:42
はに丸さんへ  風柳さんが、今度は「BGM再生用JavaScript:曲選択フォーム複数設置」を28日にアップしています。
今までのは、同ページに1つ以上のプレイヤー設置が不可能でしたが、今回のは複数設置が出来、作者毎やカテゴリ毎なんかに分けられて便利に使用することが出来ます。
はに丸さん、こちらの方も参考になされたら宜しいのではないでしょうか?

このコメントをお読みになった方で、風柳さんのブログに行かれる方は必ず風柳さんに許可を頂いて下さい。
そのためにも、はに丸さんの風柳さんへの迅速なご対応を願っています。
Posted by ろんちゃん at 2006年04月29日 15:26
はに丸さん、こんにちは。
既にろんちゃんさんにご紹介頂きましたが、当方サイトで曲選択フォームを同一ページ上に複数設置できるようにする方法を公開しましたので、宜しければご参考までに。
ただし、一度には一曲しか再生できませんし、プレイヤが表示される場所は固定となります。
それと、設置や改変についてはご自由に。特に当方への連絡も不要です。一応念のため。
Posted by 風柳 at 2006年04月29日 17:54
ブログランキングから来ました〜♪

いや〜、このブログマジで詳しいっすね!!
参考になりました〜♪

応援クリックさせてください〜♪

ぽちっと!!
Posted by じゅん@バンドで飯を食う! at 2006年04月29日 23:09
はじめまして!ブログで音楽を流せるなんて素敵ですね。是非リンクを貼って頂きたいです。当ブログにもリンク貼りますよ。宜しくお願いします。
Posted by 歌番兄さん at 2006年04月30日 22:25
>ろんちゃんさん 教えてくださってありがとうございます^^ >風柳さん 更にブログが楽しくなりますね♪素晴らしい!
Posted by はに丸 at 2006年05月01日 10:02
こんにちわ!とても参考になりました!
ろんちゃんさんて方、すごく高圧的な印象を受けます。
Posted by MERO at 2006年05月04日 12:35
かりちゃったw
よろ
Posted by apao at 2006年06月02日 20:37
事後報告で申し訳ありません
毎日伺っては悩み、勝手にお借りしました。
とても解りやすく一発OKで設置できました
ありがとうございます。
Posted by ウッキ at 2006年06月03日 10:20
タグをお借りしました(。・x・)ゝとても簡単ですごく便利ですb
ところで、URLが/〜〜デスクトップ/などという場合に、他のPCで反映されないのですが、どうしたらいいんでしょうか?そのへんよくわからなくて。。。よければ教えてください_| ̄|○))
Posted by みりゅりゅ at 2006年06月10日 19:39
同じくタグお借りしました。

みりゅりゅさんと同じく、

URLが〜〜デスクトップなんです。

なぜか再生できません

教えてください!
Posted by 【taku】 at 2006年06月14日 00:00
俗に言うローカルアドレスですね^^;音楽ファイルをネット上にアップしないと他のパソコンで読み込めません。よかったら他のページも参考にしてみてください。
Posted by はに丸 at 2006年06月14日 00:24
分かりました!探してみます(。・Д・)ゞ
Posted by みりゅりゅ at 2006年06月14日 20:04
頑張って探してみたのですが、PC初心者の私にはさっぱりわかりません('`音楽の許可はでているんですが、肝心の音楽をネット上にアップする方法がどうしても分かりません。教えてくれませんか?
Posted by みりゅりゅ at 2006年06月17日 19:10
本日、タグをお借りしました゚+。:.゚ヽ(*´∀`)ノ゚.:。+゚ 。すごく、すごくありがたいです。

本当にありがとうございました^^。
Posted by ジン at 2006年06月21日 10:29
CURURUを使っているのですがタグがそのまま出てきます。どうすればよろしいのでしょうか?
Posted by 翼 at 2006年08月03日 20:50
自動再生ってどうやるんですか?
Posted by りん at 2008年04月16日 17:10
ココみたいに、Windows Media Playerで再生させたいけど...どうすればいいんですか??
Posted by かりん at 2008年04月20日 14:07
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
新着記事
このサイトは管理人の趣味・勉強の為に運営しています。従ってサポートを目的としておらず、全ての情報が最新かつ正しい内容とは限りません。自己責任でお願いします。
はに丸の楽曲は著作権を放棄しておりません。営利目的での無断使用を禁止します。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。