zjsにまた手を加えました.ファイルはhttp://github.com/takehiko/zjsより取得可能です.
今回の主要な修正箇所は以下のとおりです.
- 音を鳴らす処理を見直すことで,これまでのFirefox, Internet Explorer, Operaに加えて,SafariとGoogle Chromeでも鳴らせるようにしました.
- 音声ファイルのセット(chime[1-3].wav)を追加しました.
- URI経由で与えるオプションの種類を増やしました.
- コードの細部を修正しました.
wav処理
実は前のバージョンでも,SafariとGoogle Chromeで鳴っていたのですが,「音を鳴らすと,マウスクリックでブラウザをアクティブにしない限り,キー入力を受け付けなくなる」という不具合がありました*1.
JavaScriptでの音の再生方法が何通りかあるのを知り*2,良さそうなのをすべてコードに取り入れ,変数ringModeで場合分けしました.
- ringMode==0:音を鳴らしません.
- ringMode==1:前のバージョンと同じで,<div id="sound">と</div>の間に,音を鳴らすときに例えば「
- ringMode==2:初期設定時に,<div id="sound">と</div>の間に,「
- ringMode==3:初期設定時に,chime[1-3].wavの音を鳴らすためのAudioオブジェクトを作り,配列audioArrayに格納します.音を鳴らすときに例えば「audioArray[1].play();」を実行します.
Firefox, Internet Explorer, Opera, Safari, Google Chromeの(たぶん)最新版ですべてケースを試したところ,Internet ExplorerとGoogle Chromeでは,ringMode==3で失敗することが分かりました*3.前者はtypeof(Audio)が"undefined"であることから,Audioオブジェクトをサポートしていないのが原因です.後者は,new Audioはできるのですが,play()で鳴ってくれません.
といったことを考慮して,ブラウザ判別の関数を定義し,ringModeを設定するようにしました.強制指定もできます(後述).
wavファイル追加
音声ファイルは2種類作りました.
- ?d=hは,ホテルにある「呼び鈴」のような音を使用します.実際,呼び鈴 【TK-25】 1個 [シンビ ホテル フロント レストラン 呼び鈴 卓上ベル]を購入して録音し,ファイルを作りました.githubのzjsにも,src/hに入れています.
- ?d=sは,http://cncc.hp.infoseek.co.jp/を使用して作ったものです*4.githubのzjsには入れていません.
オプション追加
新設オプションは次のとおり.
- w=0:強制的にringMode=0とし,音を鳴らしません.「=」は省略可です.
- w=1:強制的にringMode=1とします.「=」は省略可です.
- w=2:強制的にringMode=2とします.「=」は省略可です.
- w=3:強制的にringMode=3とします.「=」は省略可です.
- nokey:キー入力を無効にします.停止時に,いくつかのボタンを押して出るメッセージも,変更します.
- key:キー入力を有効にします.デフォルトです.
- nomouse:時分の周辺でのマウスクリックを無効にします.デフォルトです.
- mouse:時分の周辺でマウスクリックすると,開始/停止/再開します.
- d=ディレクトリ名:chime[1-3].wavのあるディレクトリ名を変更します.仕様上,サブディレクトリ直下にあるものに限られます*5.「=」は省略不可です.
- b=ファイル名:chime[1-3].wavではなく,ファイル名[1-3].wavを音声ファイルとします.dオプションとbオプションは両方指定してもかまいません.「=」は省略不可です.
その他
実はiPhone/iPod touch/iPad対応の処理を埋め込んでいますが,動作確認はしていません.
それと,これまで,
document.getElementById("buttonstart").style.display = "inline";
と書いていたものは,昔むかしにchangeStyleという関数を定義していたのに気づき,
changeStyle("buttonstart", "display", "inline");
に書き換えました.なのですが,
document.getElementById("buttonstart").value = "開始";
を
changeStyle("buttonstart", "value", "開始");
にすると,どのブラウザでもボタンの名前が変更しなくなったので,修正を元に戻しました.
…こうやって,コードを抜き出してみると,うまくいかないのも分かりました.「document.getElementById("buttonstart").style.value = "開始";」ではダメですね.次回修正の際に,反映させます.
*1:本日の修正版でも,Ctrl+Rでリロードした直後は,キー入力がブラウザに通らないものがありました.これは,マウスクリックでアクティブにすれば,以降は大丈夫です.
*2:http://www.phon.ucl.ac.uk/home/mark/audio/play.htm, JavaScript でサウンドを再生する Audio オブジェクトの使い方 - WebOS Goodies
*3:FirefoxでringMode==2のとき,chime1.wavが鳴ってくれないという,謎のトラブルにも遭遇しました.
*4:文末の「す」が強く聞こえるので,Audacityで加工をしたのですが,納得できるものにはなっていません.
*5:URLのうち,最後の「/」以降が時間設定の対象となるため.この改善は今後の課題です.