わさっきhb

大学（教育研究）とか ，親馬鹿とか，和歌山とか，とか，とか．

SafariとGoogle Chromeにも対応

zjs

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＞の間に，「」ほかを書き込んでおき，音を鳴らすときに例えば「document.getElementById("sound1").Play();」を実行します．
  • 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種類作りました．

オプション追加

新設オプションは次のとおり．

  • 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のうち，最後の「/」以降が時間設定の対象となるため．この改善は今後の課題です．