セレクトボックスでBGMを流す


■Q&A

■Question

ぴろあき先生質問で〜す! 2002.5.15.Wed No.3478

って言うか…
アッチとコッチのスクリプトを合わせて見ましたが期待通りに動きませんでした(T_T)
ぴろあき様にばかり迷惑を掛けてはと思い、他所でも調べたり・聞いたりして見たのですが…
修正して頂ければ嬉しいです。
万年床に追い込むのは私かも(-_-;)

で、やりたいことは…
まずHPにアクセスした時にランダムでMIDIが鳴り、演奏を止める事も、曲を代える事も出来る様にしたいのです。
↓を実行すると
ランダムOK! 曲のチェンジOK! 曲チェンジ後の演奏停止OK!
なのですが、チェンジ前に曲を止める事が出来ません。
どこが間違っていますでしょうか?
停止ボタンを別に付けれると、もっと嬉しいのですが(^_^;)
宜しくお願い致します。

<Script Language="JavaScript">
<!--
function chaBGMAc22(foName,elName) {
 if (document.all || document.getElementById || document.layers) {
  var p,v,emb;
  p=document.forms[foName].elements[elName];
  v=p.options[p.selectedIndex].value;
  if (v!="defult") {
   emb='<EMBED SRC="'+v+'" volume="80" AUTOSTART="true">';
   writeAc22("BGM",emb);
  }
 }
}
function writeAc22(name,mes) {
 if (document.all) document.all(name).innerHTML=mes;
 else if (document.getElementById) document.getElementById(name).innerHTML=mes;
 else if (document.layers) {
  document.layers[name].document.open();
  document.layers[name].document.write(mes);
  document.layers[name].document.close();
 }
}
myImageCnt = 3;
myImage = new Array(
 "aaa.mid",
 "bbb.mid",
 "ccc.mid",
);
myRnd = Math.floor(Math.random()*myImageCnt);
document.write('<embed src="' ,
myImage[myRnd] ,
'" loop="true" repeat="true" autostart="true">');
// --></script>

*** 以下BODY部に ***

<SPAN id="BGM"></SPAN>
<center>
<FORM NAME="bgmFo">
 <SELECT NAME="bgmList" style="font-size:10pt; color:#aa3388; background-color:#ddbbff" onChange='chaBGMAc22("bgmFo","bgmList")'>
  <OPTION VALUE="defult" SELECTED>BGM
  <OPTION VALUE="aaa.mid",>★
  <OPTION VALUE="bbb.mid",>☆
  <OPTION VALUE="ccc.mid",>★
  <OPTION VALUE="-------">BGM_STOP
 </SELECT>
</FORM>
</center>

■Answer

Re:ぴろあき先生質問で〜す! ぴろあき 2002.5.16.Thu No.3490

つか、このスクリプトって、と○○○君ですね。(構文が特徴的なので JavaScript に詳しい人間ならすぐ判別できます)

ここのスクリプトは非常に解析しにくく、見るだけで寝てしまいそうなので、自分でいっちょBGMスクリプトを作ってみました。うーん、大成功…とはとても言いがたいです。こういうサンプルでは「わかりやすい構造」を優先させるべきなのですが、作り慣れてない種のスクリプトでは難しかった…。(個人的に音の鳴るページは好きでないので、作ったことがない)

なので、自分スタイルで組んでしまいました。結局わかりにくいです。
まぁ良い勉強にはなりました…って、自分が学んでどうするんでしょう。がく。

そんな感じで、参考程度にお試しください。
http://faq.creasus.net/02/0516

■Question

ぴろあき大先生へ(^_^)v 2002.5.17.Fri No.3496

いつもいつも本当に有難うございます。
わざわざ作って頂いてしまって(^_^;)
軽い手直しで済むものでは無かったのですねぇ
早速使わせて頂きました。
順調です♪♪♪

ただ‥
全然大した問題では無いのですが2つほどの疑問にお答え頂けませんでしょうか?

まず‥
  bgmPath[10] = "*****.mid";
  bgmName[10] = "*****";
が演奏できないのは2桁だからですか?
10曲以上を希望する時にサクッといじって変える事は無理でしょうか?

そして‥
操作画面でハートが舞い落ちるスクリプトを使っていますがこれを外さないとBGMが鳴りませんでした。
変数に問題が有ったりするのですか?
それとも処理上無理が有るのでしょうか?

と言う事ですが、BGMご機嫌に鳴ってくれています。
お暇な時で結構ですから、回答頂ければ嬉しいです。

只今、雨です彡
夕方には上がるそうですが。。。
プロ野球は有るのでしょうか!?

■Answer

Re:ぴろあき大先生へ(^_^)v ぴろあき 2002.5.17.Fri No.3502

> 軽い手直しで済むものでは無かったのですねぇ
いや、ここまで根こそぎ作り直す必要もない気が…。
ライバル(?)が視野にあったので、無駄に張り切っちゃったのかも。(笑)

> bgmPath[10] = "*****.mid";
> bgmName[10] = "*****";
> が演奏できないのは2桁だからですか?
> 10曲以上を希望する時にサクッといじって変える事は無理でしょうか?
それは「なんで気づかなかったの?」という次元のうかつっぷり。
すみません。9曲までしか登録できない仕様です。
playCtrl() 関数の、最後の方にある
  playNum = sel.value.charAt(0);
  embedWri(sel.value.substr(1), sel.text);
の2行がその元凶です。(最初の1文字しか抜いてないゆえ、1桁になるわけです)
100曲でも1000曲でも10000曲でもサクッと追加できるように修正しておいたので、先日のやつをもう一度設置しなおしてくださいませー。

> 操作画面でハートが舞い落ちるスクリプトを使っていますが
> これを外さないとBGMが鳴りませんでした。
> 変数に問題が有ったりするのですか?
> それとも処理上無理が有るのでしょうか?
この類いのスクリプトは、スタイルシートをコントロールすることで実現してます。
そしてこのBGMスクリプトも、スタイルシートを使ってます。それが干渉してる可能性が一番高い…かな。
構造的な問題がない限り、同時に設置することはできます。

  • BGMスクリプト部分のスタイルシート設定のみ、全部消してみる
  • BGMスクリプト(3行のやつ×2)の埋めこみ場所を色々変えてみる
  • txtObjWri(); の方の3行スクリプトを消してみる

とりあえず上の3通りを試してみてください。
それでも動かない時は、ハートスクリプトに以下の単語が混じってないか探してみます。一個でもあったら干渉してる確率高いです。

  • BGMbox
  • TXT
  • BGM
  • autoStart
  • playMsg
  • stopMsg
  • bgmPath
  • bgmName
  • bgmBrw
  • getEmbed
  • embedWri
  • playNum
  • playCtrl
  • bgmObj
  • bgmFormWri
  • txtWri
  • txtObj
  • txtObjWri

また、ステータスバーの左端に黄色い三角が出てる場合、ダブルクリックしてダイアログを出し、[詳細の表示 >>] を押してください。
ここのメッセージでどの種のエラーかわかるので、役に立つ場合が多いです。役に立たない場合も多いですけど。
もちろん、実際にファイルを見るのが一番早いですけどね。

■Res

ぴろあき大大先生様へ〜 ^_^ 2002.5.18.Sat No.3504

ありがとうございま〜す。
10000曲も設定できるのですねぇ----
でも今日は無理!!
他にも指摘して頂いておりましたが・・・
只今アルコールによりKeyを叩く手も怪しく(^_^;)
明日以降、もう一度ゆっくり読ませて頂こうと思っとります次第です。。。
今から入浴するのですが、今後アクセスが無かった時はお風呂で溺れ死んだと思って頂ければ幸いで〜す。ア-メン!!
それでは‥良い週末をお過ごし下さいね♪


■実行結果

※出だしまで7秒くらいかかる曲が混じってますので、鳴らないよ?と思ってもしばらくお待ちください。


■スクリプトの概要

MIDI演奏スクリプト。何曲でも追加可能・ランダム演奏・演奏/停止ボタン・自動演奏の指定・リピートの指定…くらいの機能しかないです。「次の曲」とかはないし、演奏時間表示もございません。面倒くさかったので。

セレクトボックスとメッセージは好きな位置に表示できます。

スクリプトがちょっと難しくなったので解説はなしです。(一応ソースの方に少し書いてあります)


■このスクリプトの対応ブラウザ

IE5以降
MediaPlayer とかを変にいじってなければ動きます。
Netscape6以降
プラグインがちゃんと入っていれば動きます。
Opera
Opera7 なら鳴らすことはできるんですが、<embed> をやりくりする方法だと演奏を止められないようなので、判別で外してます。(<embed> を抜いても演奏が止まらない)
その他
なにも起きません。セレクトボックスも表示されません。

■ソース

■本体スクリプト

■セレクトボックス

<script type="text/javascript"><!--
  bgmEnv.writeNameArea();//-->
</script>

■メッセージエリア

<script type="text/javascript"><!--
  bgmEnv.writeNameArea();//-->
</script>

■セレクトボックス

<script type="text/javascript"><!--
  bgmEnv.playCtrl("random");//-->
</script>


■初期設定

//曲リスト(追加や削除はここでやります)
//左側にMIDIファイルのパス、右側に表示する曲名
var songList = new Array(
  "yukyu.mid",    "悠久の間に",
  "hokuto.mid",   "北斗伝説",
  "asuwo.mid",    "明日を待つ君に",
  "hakumai.mid",  "白舞夜" //最後の行の尻にはカンマを付けないこと!
);

MIDIファイルのパスと、画面に表示する曲名を入れます。同じ要領でいくらでも増やせます。

this.autoStart = false; //ページに入った時に演奏を開始するか( true / false )
this.repeat = true; //リピート演奏するか( true / false )

それぞれ truefalse で指定。

this.playMsg = "ただいま演奏中の曲は「***」です"; // *** は再生中のタイトルに置換されます
this.stopMsg = "演奏を停止中です";                //停止ボタンを押した時の文字

お好みで変更してください。*** は再生中のタイトルに置換されますが、なくても構いません。


※だいじ※

ここで使ってるサンプルのBGMは、外崎さんが作曲したものです。
どうせならテストが楽しくなるように、お気に入りのを…てな感じで、思いきり無断借用です。
こういうことは絶対にやめましょう。(…苦笑)
お借りしている4曲は、いずれも N.Tonosaki's Personal Station で公開されています。


■追記:2002.5.17

9曲しか登録できない仕様を修正。(うっかりミス)

■追記:2003.8.17

スクリプトを最初から組み直し。Netscape6 も完全対応。ページ自体もまるで別物。
当時のページを保管


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)