BGM再生用JavaScript：演奏中タイトル表示
BGM再生用JavaScriptの前回の修正で、曲演奏中にタイトルが出るオプションをこっそり追加したんですが、今度はそのタイトル表示をちょっと拡張してみました。
といっても、そんな大層なものでもなくて、おまけ程度のものです。
JavaScriptの練習を兼ねて、ということで。手抜きも多いのですが、勘弁して下さい。
前回では、<form>タグまたは<option>タグにshowtitle="1"を追加することで、曲演奏中にタイトルが出るようになりましたが、今回は、showtitle="optname:param1,param2,...;" のように書くことで、ちょっとだけ修飾できるようにしてみました。
| color | ： | タイトルの色を変更します。 color:(文字色),(背景色),(境界色);
の形で指定します。各色はCSSで使用可能な形式で指定します。 |
| blink | ： | タイトルを点滅表示させます。 blink:(表示時間),(非表示時間),(文字色),(背景色);
の形で指定します。'表示時間'・'非表示時間'はミリ秒単位の数値で指定します。値が小さいほど速く点滅しますが、処理は重くなります。 '文字色','背景色'は必ず指定して下さい（CSSの方と同じ場合でも、指定は必要です)。 各色はCSSで使用可能な形式で指定します。 |
| scroll | ： | タイトルをスクロール表示させます。 scroll:(文字数),(方向),(ウェイト);
の形で指定します。'文字数'には、スクロール表示させる横幅を文字数(半角換算)で指定します（タイトルの文字数がこれより少ない場合、残りは自動的にスペースで埋められます）。 タイトルが表示される場所の横幅に応じて不自然にならないように調整して下さい。 '方向'には、左スクロールの場合は 1, 右スクロールの場合は -1 を入れます。 'ウェイト'は一文字スクロールする事にかける待ち時間で、ミリ秒単位の数値で指定します。値が小さい程速く動きますが、処理は重くなります。 |
サンプルとしてこのサイトのサイドバーにも、いくつか設定してあります。 その部分だけ抜き出すと、
：
<form name="bgmSelectForm" class="bgmSelectForm" action="javascript:bgmChange()" optval="hideplayer" showtitle="scroll:40,1,500" >
：
<form name="bgmSelectForm2" class="bgmSelectForm" action="javascript:bgmChange()" showtitle="blink:1000,500,#662200,#FFCCEE;" >
：
<!-- 1--><option value="https://furyu.tea-nifty.com/music/loveyou2.mid" showtitle="blink:2000,500,yellow,darkblue,brown;" >星降る夜</option>
<!-- 2--><option value="https://furyu.tea-nifty.com/music/usagi2.mid" showtitle="scroll:32,-1,2000; blink:700,300,magenta,lightyellow,gold" >うさぎ</option>
：
<!-- 4--><option value="https://furyu.tea-nifty.com/music/greensleeves2.mid" showtitle="color:green,mintcream,olive;scroll:32,1,500" >Green Sleeves</option>
：
こんな感じです。
<form name="bgmSelectForm" class="bgmSelectForm" action="javascript:bgmChange()" optval="hideplayer" showtitle="scroll:40,1,500" >
：
<form name="bgmSelectForm2" class="bgmSelectForm" action="javascript:bgmChange()" showtitle="blink:1000,500,#662200,#FFCCEE;" >
：
<!-- 1--><option value="https://furyu.tea-nifty.com/music/loveyou2.mid" showtitle="blink:2000,500,yellow,darkblue,brown;" >星降る夜</option>
<!-- 2--><option value="https://furyu.tea-nifty.com/music/usagi2.mid" showtitle="scroll:32,-1,2000; blink:700,300,magenta,lightyellow,gold" >うさぎ</option>
：
<!-- 4--><option value="https://furyu.tea-nifty.com/music/greensleeves2.mid" showtitle="color:green,mintcream,olive;scroll:32,1,500" >Green Sleeves</option>
：
それと、設置するサイトが使用している文字コードによっては、スクロールする際に空白文字が化けるかも知れません（ココログ等のUTF-8を使用しているサイトでは問題無いと思いますが)。
その場合、設置用HTMLの、最後の方にある bgmChange() ; の前に、
widePaddingChar = ' ' ; // ''内は全角スペース
という行を挿入して下さい。
以下、余談というか覚書。
-
点滅とスクロールについては、JavaScriptでタイマを使って半ば無理やり実装したが、もっと単純な方法かCSSかで出来ないか？
- スクロールについては<marquee>タグが使えるか？→IE専用？→FirefoxでもOKみたいだけれど……
- [文字列].blink()とか[object].style.textDecoration='blink'（CSSのtext-decoration:blink)は、今度はIEでは不可みたい
-
オブジェクトの文字/背景色等が何色で表示されているか、どうやって(汎用的に)知ることが出来るのか？
- [object].style.colorで参照できるかと思ったが、親オブジェクトからの継承時や、<style type="text/css">タグで外部定義されている場合はNG。
- fgColor, bgColorはdocument専用のプロパティ。
