「キッチンタイマー」アプリのiPhoneへの対応

先の項目で作った「キッチンタイマー」ですが、iPhoneで動かすと動きません。

←こんな感じです。
NaN：NaN：NaN
なんなんだーーー！と言いたくなります。

最初気づかなかったのですが分かりました。
ほら、タイマーのセットするところをよく見て下さい。00：00しかないのです。
プログラムしたときに「step="1"」として秒を出すようにしたはずですよね。
それが、どうもiPhoneでは対応していません。

良く調べたところHTML5に完全対応していないようです。

では仕方がないので、iPhone用にプログラムを変更して行ってみましょう。

timer.htmlの最初の方にある、時間を設定するところ

<input type="time" id="timer" name="timer" step="1" value="00:00:00">

これを、次のように書き換えます。

<input type="text" id="timer" name="timer" value="00:00:00">

step="1"は必要なくなるので消しました。
ただし、今度は時間を入力するときに自由に入力できてしまいます。必ず00:00:00の形式で入力しないといけません。
本来ならば、ここにエラー処理を入れたいところですね。今回は無視しておきますが。

さあ実行してみましょう！
iPhoneで動きましたね。

でも・・・まだおかしいです。気づきましたよね。音が鳴らないのです。

◎iPhoneで音を鳴らすにはひと工夫が必要！

調べた所、iPhoneではセキュリティの関係だか何だかで、iPhoneのWEBブラウザでは人的な操作をしたときだけ音が鳴らせるようになっているのだそうです。
分かりやすく言うと、ボタンをタップしたときにだけ音が鳴るということです。

今回のこの「キッチンタイマーアプリ」では、どうやったら鳴らせるか・・・と考えてみたら、一度だけボタンを押します。そうです［タイマー スタート］ボタンです。
そこに音を鳴らす仕組みを組み込んでみます。実験実験！！！

流れとしては、［タイマー スタート］ボタンを押したらまずスタートの音を鳴らします。それと同時にストップの時の音も読み込んでおきます。
きっとこれでうまくいくはず。よし、プログラムを書き換えてみましょう。
ちなみに、スタートの音はこれを自作しました。＞start.mp3

const music = new Audio("ring.mp3");

timer.htmlのこの部分を削除します。
次に、［タイマー スタート］ボタンを押したときに呼び出される関数を書き換えます。

const music = new Audio();
const start_sound= new Audio();

function timer_start(){
    start_btn.innerHTML = "ストップ";
    message.innerHTML = timer.value;
    timeLeft = time2sec(timer.value);
    t = setInterval("timer_doing()",1000);

    start_soud.preload = "auto";
    start_soud.src="start.mp3";
    start_soud.load();

    start_soud.currentTime = 0;
    start_soud.play();

    music.preload = "auto";
    music.src="ring.mp3";
    music.load();
}

さあ出来ました。iPhoneで動かしてみましょう。レッツスタート！

いやあ、バッチリ鳴りましたね。目出度し目出度し。

戻る