BGM再生用JavaScript
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コントロールを実行するにはクリックしてください。』というダイアログが出てくるようになったのだとか。
→QuickTimeを入れてみたら、ダイアログが出ることは確認。落ちるところまでは行きませんでしたが。
ダイアログが出ることも、これはこれで充分うっとうしいのですが、、、問題はそれより、ダイアログが出た後で[OK]を押すと、そのままブラウザが落ちてしまうことがある、というところ。これは明らかにIE6の不具合だと思われるのですが……難儀ですねぇ(実はその後のパッチでこっそり更新されていたり?)。
なお、うちではこの現象そのものではありませんが、WinXP SP2+IE6 SP1の環境で、IE6のセキュリティ設定において『ActiveXコントロールとプラグインの実行』を『ダイアログを表示する』にしてあると、ダイアログが出て[OK]を押した途端にIE6が落ちてしまう(ことがある)、という現象は確認しております。
で、ダイアログを表示しなくしてしまえば、もしかしてブラウザも落ちなくなるかな、と思って、スクリプト部分を外出しにしてみたのですが……なにせ、うちではそもそも『この Web ページで ActiveXコントロールを実行するにはクリックしてください。』というダイアログが出たことがないので確認しようがなく……。
どなたか、試していただけませんかねぇ?
以下、HTMLソースです。
<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">即興ピアノ曲 無題2</option>
<!-- 2 --><option value="http://ronchan.cocolog-nifty.com/work4.mp3">即興ピアノ曲 無題4</option>
<!-- 3 --><option value="http://ronchan.cocolog-nifty.com/harunoyakudou.mp3">即興ピアノ曲「春の躍動」</option>
<!-- 4 --><option value="http://ronchan.cocolog-nifty.com/work5.mp3">即興ピアノ曲 無題5</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="~"部分)の変更もお忘れなく(当たり前ですが、その後は私が裏でこっそりとスクリプトを修正したとしても、反映されなくなってしまいます(笑))。
- 改変や設置のご連絡も不要ですが、『ここはこうしたほうが良い』等、アドバイスは歓迎です。
« 昨日買った……んだよな?な書籍リスト | トップページ | 編集するときは注意しよう…… »
「ウェブログ・ココログ関連」カテゴリの記事
- 久しぶりの投稿がココログへの苦言というのもなんなのですが……(2019.03.20)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)(2015.10.09)
- ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた(既知の不具合の幾つかに対応)(2015.09.01)
- 現在に生きるということ。(2013.01.05)
「パソコン・インターネット」カテゴリの記事
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- BIGLOBE光ネクスト(大阪)の通信速度問題 - プロバイダ選びは難しい……(2015.08.13)
- BOOK☆WALKER さんに関して最近経験した不安と不満(2015.08.10)
- 『#鳥獣戯画制作キット』が楽しい(2015.07.01)
「音楽」カテゴリの記事
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- 不可抗力をきっかけに、Bluetoothオーディオ環境更新(2015.04.06)
- 新タイプの“楽器”?『Patatap』が面白すぎるので、ぜひ他の方の演奏も楽しみたい!(2014.03.28)
- ノートPCにBluetoothアダプタを付けてヘッドホンを無線化(2014.01.05)
- 月曜の晩どしゃぶり Rainy Day(2013.08.06)
「おもいつき」カテゴリの記事
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)(2015.10.09)
「覚書」カテゴリの記事
- 鍛高譚 ~ カレイにまつわる物語(2018.05.25)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
ピアノ曲は、APPLET、EMBEDまたはOBJECTを一切使用していないので問題はないのです。
私が、削除したのは、mid音源なのです。
使用していたmid音源は以下のものです。
http://ronronchan.cocolog-nifty.com/nocturne-op2-9.mid
http://ronronchan.cocolog-nifty.com/loveyou2.mid
http://ronronchan.cocolog-nifty.com/greensleeves2.mid
http://ronronchan.cocolog-nifty.com/g-sen.mid
また、http://www.blog-tunes.com/では
http://tunes1.blog-tunes.com
http://tunes1.blog-tunes.com/Effect/bt_effect/bt_effect.swf?v=30&s=off&t=1
を使用しており、これもEMBEDが含まれている音源です。
なので、ピアノ曲とは関係がないのです。
でも、このファイルをそのまま適応させて頂き試してみます。
ありがとうございますm(._.)m
投稿: ろんちゃん | 2006/04/22 10:17
今、曲目を以前使用していたMID音源に変え、流してみました。
この状態で問題なく見れるか、友人に確認をお願いし連絡待ちをしています。なにせ自分のPCでは確認がとれないのです。確認が取れ次第、またコメント致しますm(._.)m
今、友人から確認がとれ、全く問題ないそうです!!ヽ(・∀・)ノ
やったぁーーーー!!ばんざーーーーい!!
風柳さん、大成功です!!ありがとうございました!!m(._.)m
ところで、src="https://furyu.tea-nifty.com/script/bgmChange.js">の部分はどうしたら良いのでしょうか??
furyu.tea-nifty.comをronronchan.cocolog-nifty.comに直せばいいのでしょうか?
あと、blog-tunesの方は大して利用していなかったので、これで十分です!!本当にありがとうございましたm(._.)m
投稿: ろんちゃん | 2006/04/22 12:09
風柳さんへ
本当にありがとうございましたm(._.)m
src="https://furyu.tea-nifty.com/script/bgmChange.js">の部分に特に問題がなければ、そのまま使わせて頂きます。
それに関してのご返答よろしくお願い致します。m(._.)m
また、facetさんのブログにも風柳さんのやり取りの経緯を載せさせて頂いております。
今回は本当にありがとうございました♪
投稿: ろんちゃん | 2006/04/22 12:59
ろんちゃんさん、どうもです。
とりあえずうまくいきましたか。ご友人のところでは、BGMを選択したときも問題無く再生されました?
<script type="text/javascript" src="https://furyu.tea-nifty.com/script/bgmChange.js"></script>
のところは、出来ればそのままにしておいてください。
音楽再生のために<embed>タグを書き替えるためのJavaScriptなんですけど、何か不具合が発生したときでも、こちらで修正すれば済みますので。
それと、ろんちゃんさんのところはせっかくの可愛いサイトなのに、このフォームだけ無骨で浮いてしまっているように思えてしまいましたので、記事中のHTMLも若干修正しました。
プルダウンメニューやボタンのスタイルも修正しやすくなったと思いますので、よろしければ差替えてみてください。
あと、一応 blog-tunes にも対応してみました。
上記のHTML中、
<!-- 9 --><option value="http://tunes1.blog-tunes.com/Effect/bt_effect/bt_effect.swf?v=30&s=on&t=1" optval="blog-tunes" >beauty</option>
の部分です。
一応解説しますと、blog-tunes のサイト
http://www.blog-tunes.com/tunes/html/modules/mydownloads/singlefile.php?cid=13&lid=44
だと、HTMLは
<embed src="http://tunes1.blog-tunes.com/Effect/bt_effect/bt_effect.swf?v=30&s=off&t=1" quality="autohigh" width="100" height="100" wmode="transparent"></embed>
を貼付けるようになっていたと思いますが、このうちの src="~"の部分
http://tunes1.blog-tunes.com/Effect/bt_effect/bt_effect.swf?v=30&s=off&t=1
を取り出し、s=off → s=on に変更(これで自動再生になります)したものを、<option>タグのvalue="~"に入れています。
また、<option>タグ中に optval="blog-tunes" というのを追加します。
あと、演奏停止も出来た方がいいかな?と思って、
<!-- X --><option value="">[演奏停止]</option>
という行も追加しています(defaultBGM = 0 の 0 を曲番号に変更すれば、ページを開いた途端に演奏が開始されてしまうので、もしそういう設定にした場合は停止する手段も必要でしょう)。
ところで、ろんちゃんさんのサイトの音楽ファイルに勝手にリンクさせていただいておりますが、もし不都合なようならお知らせ下さいね。
ではでは。
投稿: 風柳 | 2006/04/22 15:18
風柳さんへ
凄く嬉しい限りです♪
私のブログに合わせて、デザインまで変更して下さり、またblog-tunes まで、入れて下さって感激です♪ヽ(・∀・)ノ
友人に確認したところ問題なく再生されたそうです。
音楽ファイルのリンクは、もちろん問題ありませんよ。
風柳さんも、私のピアノ曲を聴いて下さるなら、本人嬉しい限りです♪
今回は何から何まで、お世話になりありがとうございましたm(._.)m
私のMy Favorite Listに、風柳さんのここのブログとリンクさせて頂きました。何か不都合があれば言ってくださいね。
では、今回はありがとうございました。
そして、今後ともよろしくお願い致します。m(._.)m
投稿: ろんちゃん | 2006/04/22 19:39
はじめまして。わざわざお知らせくださってありがとうございます。
私自身、特別な知識があるわけでもなく、中途半端なスクリプトを公開してしまって申し訳ない限りです^^;
できましたら参考にさせていただきたいのですがよろしいでしょうか?
投稿: はに丸 | 2006/04/26 18:37
はに丸さん、改めまして、こんにちは。
私も最近ようやくJavaScriptを使い始めたばかりなので、とても参考になるような代物ではないのですが(<embed>タグなんて初めて使いましたし(^^;)それでもよろしければどうぞ。
改変その他、自由に行っていただいて構いません(もともと、はに丸さんのを参考にさせていただいていますし、当然ですが)。
以下、余談ですが。
今回の件は、まめにMicrosoftのUpdate内容をチェックしている人でもないかぎり、IEで急にダイアログが表示されるようになるまで気付かない(というか、ダイアログが出ても何が起ったのかわからない)人がほとんどではないかなぁ、と個人的には思います……が、それはセキュリティに対する認識が甘い、と見なされてしまうんでしょうか(今回のはセキュリティ関係ではないですが)。
でも、ページに直に<embed><object><applet>タグを埋めこんでいるサイトなんてざらにありますよねぇ……。
そういうサイトを見る人全てに『ダイアログで釦を押す操作が一回増えるだで、影響はない』という説明で、果たして通じるのでしょうか……(特許がからむといろいろ面倒、というのもわからないではないのですが)。
投稿: 風柳 | 2006/04/26 22:28
関連の話題ということで、こっちに書いておきます。
特定の曲を選択したときだけプレイヤ表示を消したい場合、以下のようにすることで対応可能です。
1. プレイヤ表示を消したい曲の<option>タグにoptval="hideplayer"を追加。
例えば、
<!-- 5--><option value="http://ronronchan.cocolog-nifty.com/blog/files/work2.mp3">即興ピアノ曲 無題2</option>
となっているところを、
<!-- 5--><option value="http://ronronchan.cocolog-nifty.com/blog/files/work2.mp3" optval="hideplayer" >即興ピアノ曲 無題2</option>
にします。
2. 『オプション設定』のbgmControlOptSelectに'hideplayer'追加。
bgmControlOptSelect = {
'blog-tunes' : 'quality="autohigh" width="100" height="100" wmode="transparent"'
, '種別' : 'オプション'
} ;
となっているのを、
bgmControlOptSelect = {
'blog-tunes' : 'quality="autohigh" width="100" height="100" wmode="transparent"'
, 'hideplayer' : 'width="0" height="0" panel="0" ShowPositionControls="0" ShowControls="0" ShowAudioControls="0" autostart="true" repeat="true" loop="true"'
, '種別' : 'オプション'
} ;
のようにします。
IEの場合、消したつもりでも実際には小さなドットが表示されてしまいますが……これは勘弁して下さい(^^;。
スタイルシートで非表示(display:none;)にすることでいけるかと思いましたが、そうすると音楽自体が再生されなくなってしまうという罠が(苦笑)。
↓
[2006.04.28]
hidden属性を使えばよいことに気づく……間抜けでした。
, 'hideplayer' : 'hidden="true" autostart="true" repeat="true" loop="true"'
で完全にプレイヤ(コントロール)消せますね(^^;。
投稿: 風柳 | 2006/04/26 23:46
風柳さんへ
早々のご返答ありがとうございますヽ(・∀・)ノ
早速、適応させていただきました♪
私の願っていた通りになり、これで大大満足です!!
ヽ(゜▽゜*)乂(*゜▽゜)ノ バンザーイ♪
平日でお忙しい最中、また高熱を出されたばかりなのに、親切にして頂き
本当にありがとうございましたm(._.)m
本当は、これ以上お友達のリンクは増やすつもりはなかったのですが、勝手ながら加えさせて頂きました♪
風柳さんがいらっしゃることで、私にはとても心強いのです♪
もし、ご迷惑なら削除しますので、風柳さんの本音できっぱり言って下さいね!
では、今後ともよろしくお願いいたします。m(._.)m
投稿: ろんちゃん | 2006/04/27 13:44
勝手ながら紹介させていただきましたm(_ _)m
さらに勝手ながら少し変更しました(簡素化です;)
問題があるようでしたらお申し付けください。
脳みその足りない自分には、他の小技も含め大変勉強になります。
お体お大事になさってくださいね。
投稿: はに丸 | 2006/04/27 15:23
To ろんちゃんさん
うまくいったようで何よりです。
リンクは全然構いませんよ(^^)。
ただ、今回はたまたま、お節介が功を奏したようですけど、大抵の場合は何の頼りにもならない奴ですので(^^;、その辺りはご承知おきの程を……。
ではでは、今後とも宜しくです m(_ _)m。
投稿: 風柳 | 2006/04/27 19:49
To はに丸さん
わざわざご紹介いただき、こちらこそ恐縮です。
先にも書きましたが、改変はお好きなように……。
ところで、『ブログで音楽を流す方法。』で設置されている唄って、実際に、はに丸さんが歌われているのですよね?作詞作曲・演奏もご自分でしょうか?すごいなぁ……。
最近お知り合いになった、ろんちゃんさんも、ブログで詩やピアノ曲を公開なさっていたりしますが……こういう感性というか、自分を『ことば』で綴ったりとか、楽器で表現したりとか、そういう才能は私には全くないので、お持ちの方々が素直にうらやましかったりします。
歌詞も曲調も好みなので、このブログにも設置させていただきたいのですが、構いませんか?
投稿: 風柳 | 2006/04/27 20:05
風柳さんへ
ありがとうございます☆彡
今後とも、よろしくお願いしますね♪
ばんざーい!ヽ(▽ ̄ )乂(  ̄▽)ノ ばんざーい!
投稿: ろんちゃん | 2006/04/28 00:23
構いませんというか、嬉しいです^^* ありがとうございます。
当初は、自分の曲を公開するにあたって「ブログに音楽を流す方法」なんてたいそうな名前を付けてしまいましたが、色んな方にリンクを貼ってもらったあげく、今となっては考える時間も脳みそもなく、風柳さんが神の助けでした。m(_ _;)m 重ねてありがとうございます。
投稿: はに丸 | 2006/05/01 09:56
To はに丸さん
お言葉に甘えまして、サイドバーにはに丸さんの曲を設置させていただきました。
こういうことでもないと、ブログにBGM設置しようなんて考えもしなかったでしょう。良いきっかけとなりました。
投稿: 風柳 | 2006/05/01 14:06
突然のコメントで失礼します。 風柳さんや、はに丸さんのサイト3日ほど熟読しまして、ようやく、BGMを流す事ができました。゚+。:.゚ヽ(*´∀`)ノ゚.:。+゚
1つ質問なのですが、ブログ内でページ遷移する際に、BGMがとまってしまうのですが、 風柳さんのを拝見するとずっと変わらず流れていたので、
方法を教えていただきたく、コメントさせていただきました。
素人ですので、質問がたどたどしく申し訳ないです。
お時間があいた隙で結構ですので、教えていただければと、すみません、突然ですが。
風柳さんのサイト凄いです。これからも参考にさせてください。
よろしくお願いします。
投稿: ジン | 2006/06/21 10:38
ジンさん、はじめまして。コメント有難うございます。
うーん、確かにこのサイト、自分なりに工夫して、ページ遷移自体をなるべく起こさないような細工をしてはいるのですが……あまりにも整理できていないために、まだ他の方に試していただけるような段階にはなっていないのですよ。
#JavaScriptなので、ソースを見ていただくことは出来ると思いますが、なにがなにやらわからないスパゲッティソースになっています……
サイトの構造(テンプレート)等にも大きく依存してしまいますし、設置することによる副作用も結構あるので(URLが変わってしまうとか)。
申し訳有りませんが、今回はご容赦下さい。
#いずれ整理して記事にしたいのですが、いつになることか……
投稿: 風柳 | 2006/06/21 13:06
とんでもないです。わざわざ、お返事いただいて。勉強不足なのは私ですから^^。これからも応援しています。ちょくちょくみさせてください。
お返事すぐに返したのですが、反映していなかったので、また書きました。
体に気をつけて頑張ってください。
ありがとうございました。。
投稿: ジン | 2006/06/22 02:05