わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

SafariとGoogle Chromeにも対応

zjsにまた手を加えました.ファイルはhttp://github.com/takehiko/zjsより取得可能です.
今回の主要な修正箇所は以下のとおりです.

  • 音を鳴らす処理を見直すことで,これまでのFirefox, Internet Explorer, Operaに加えて,SafariGoogle Chromeでも鳴らせるようにしました.
  • 音声ファイルのセット(chime[1-3].wav)を追加しました.
  • URI経由で与えるオプションの種類を増やしました.
  • コードの細部を修正しました.

wav処理

実は前のバージョンでも,SafariGoogle 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 ExplorerGoogle 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のうち,最後の「/」以降が時間設定の対象となるため.この改善は今後の課題です.