【ポモドーロタイマーを作ろうVanillaJS編⑥】～効果音とchromeタブへの表示追加～
今回も前回に引き続き使いやすさを改善するために
以下2つの機能を実装していきます。
①各ターン終了後に効果音を鳴らし、終了を知らせる
②chromeタブにカウントダウンを表示させる
※画面を見ていなくても確認できるようにするため
参考までに前回の記事はこちらです
naomi-homma.hatenablog.com
では早速実装していきます。
Audioオブジェクトで効果音を再生させる
Audioオブジェクトの使い方としては次のようになります。
①Audioインスタンスの生成
const audio = new Audio();
②Audioインスタンスのsrcプロパティに音源のパスを代入
audio.src = "../assets/hatoclock.mp3#t=0,3.5";
③play()メソッドで呼び出す（再生される）
audio.play();
今回はターン終了後に自動的に効果音が再生されるようにしたいので
グローバルでAudioインスタンスを生成し
countDown関数のif文の中でsrc指定しaudio.play();させています。
ちなみに今回は、
作業終了後の効果音：鳩時計
休憩終了後の効果音：学校のチャイム
にしてみました。
学校のチャイムがなるとドキドキしてしまいます....
なぜだろう....笑
コードはこのように書きました。
//グローバルで宣言
const audio = new Audio();
//countdown関数のif文内でsrc指定と呼び出しを行う
function countDown(time) {
.....
if (remainigTime >= 0) {
timeoutId = setTimeout(() => {
countDown(time);
}, 100);
} else if (remainigTime < 0 ) {
clearTimeout(timeoutId);
startTime = Date.now();
elapsedTime = 0;
if (count === cycleCount+1 && state === "work") {
//audioに音源を指定し、再生
audio.src = "../assets/hatoclock.mp3#t=0,3.5";
audio.play();
state = "longBreak";
displayState(state);
countDown(longBreakTime);
}
chromeタブにカウントダウンを表示させる
続いてchromeタブの編集です。
ページを開いていなくてもタブの部分で
経過時間が確認できるようにしていきます。
イメージはこちらです
実装自体は難しいことはなく
countDown関数の描画処理の部分に
次の一行を追加することで実現しました。
document.title = `${restMin}:${restSec} Pomodoro Timer`;
全体はこのような感じです。
function countDown(time) {
const remainigTime = (time * 60 *1000) - elapsedTime - (Date.now() - startTime);
const restMin = String(Math.floor((remainigTime / 1000 / 60) % 60)).padStart(2, '0');
const restSec = String(Math.floor((remainigTime / 1000) % 60)).padStart(2, '0');
timer.textContent = `${restMin}:${restSec}`;
//chromeタブ描画
document.title = `${restMin}:${restSec} Pomodoro Timer`;
ただ、ひとつ気になるのはメイン画面とchromeタブの
カウントが少しづれていること。
chromeタブの方がやや遅れています。
機能としてはそこまで大きな影響はないのですが
すっきりしない部分ではありますね。
これは解決できるのでしょうか.....
時間があるときに調べてみようと思います。
今回は以上になります！
↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック
