« 久しぶりの運動(?) | トップページ | 気がつけば皐月 »

2006/04/30

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>
   :
こんな感じです。

それと、設置するサイトが使用している文字コードによっては、スクロールする際に空白文字が化けるかも知れません(ココログ等のUTF-8を使用しているサイトでは問題無いと思いますが)。

その場合、設置用HTMLの、最後の方にある bgmChange() ; の前に、

widePaddingChar = ' ' ; // ''内は全角スペース
という行を挿入して下さい。


以下、余談というか覚書。

  1. 点滅とスクロールについては、JavaScriptでタイマを使って半ば無理やり実装したが、もっと単純な方法かCSSかで出来ないか?
    • スクロールについては<marquee>タグが使えるか?→IE専用?→FirefoxでもOKみたいだけれど……
    • [文字列].blink()とか[object].style.textDecoration='blink'(CSSのtext-decoration:blink)は、今度はIEでは不可みたい

  2.  
  3. オブジェクトの文字/背景色等が何色で表示されているか、どうやって(汎用的に)知ることが出来るのか?
    • [object].style.colorで参照できるかと思ったが、親オブジェクトからの継承時や、<style type="text/css">タグで外部定義されている場合はNG。
    • fgColor, bgColorはdocument専用のプロパティ。

  4.  

« 久しぶりの運動(?) | トップページ | 気がつけば皐月 »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

音楽」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

風柳さん、こんばんは☆

今、実際に風柳さんのBGMで見てみましたよ!!
すごーい、すごーい♪
しかも、いろんなパターンがあって面白いですヽ(・∀・)ノ 

今日はもう遅いので、設定いじりは出来ないけど、今度ぜひぜひ使わせて頂きたいと思います(^^)v

風柳さん、本当にありがとう(^^)/~~~ 

風柳さんへ

早速、この設置用HTMLにこの記事を使用させて頂きました♪
とっても楽しいので、風柳さんのデザインのまま使用しました。
風柳さん、楽しいモノを作成して頂きありがとうございますヽ(・∀・)ノ 

忘れないうちにメモ。
『JavaScriptでCSSを弄る際のメモ』
http://bmky.net/diary/log/1342.html

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: BGM再生用JavaScript:演奏中タイトル表示:

« 久しぶりの運動(?) | トップページ | 気がつけば皐月 »

戻るリンク追加

カレンダー

2020年3月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ