js 設定した時間とタイマーが同じになった際に効果音を鳴らしたい
Q&A
Closed
解決したいこと
現在jsでストップウォッチのプログラムを作成しているのですが、
設定した時間をストップウォッチが踏んだら(?)効果音を鳴らすというプログラムを作成しております。
効果音を鳴らすプログラムの書き方がわからず悩んでいます。
現座のコード
<div class="container">
<p class="display"><span id="timer">00:00:00</span></p>
<div>
<button id="start_stop" class="btn btn-lg btn-primary">START</button>
</div>
<!-- アラーム時間設定 -->
<input id="setHour" type="number" min="0" max="23" oninput="javascript: this.value = this.value.slice(0, 2)"
oninput="inputChange()">
<input id="setMinute" type="number" min="0" max="59" oninput="javascript: this.value = this.value.slice(0, 2)"
oninput="inputChange()">
<input id="setSecond" type="number" min="0" max="59" oninput="javascript: this.value = this.value.slice(0, 2)"
oninput="inputChange()">
<div class="display">
<p>
<span id="displayHour">00</span>
:
<span id="displayMinute">00</span>
:
<span id="displaySecond">00</span>
</p>
</div>
</div>
// 時間用、ゼロを追加する
var addZero = function (value) {
if (value < 10) {
value = '0' + value;
}
return value;
};
//スタート・ストップボタン機能
document.getElementById('start_stop').addEventListener('click', function () {
if (this.innerHTML === 'START') {
start = new Date();
salary_id = setInterval(salaryTimer, 1);
// STOP ボタンにする
this.innerHTML = 'STOP';
this.classList.remove('btn-primary');
this.classList.add('btn-danger');
} else {
clearInterval(salary_id);
// START ボタンにする
this.innerHTML = 'START';
this.classList.remove('btn-danger');
this.classList.add('btn-primary');
}
});
//画面表示処理
var salaryTimer = function () {
var now = new Date();
milli = now.getTime() - start.getTime(); //1ミリ秒時間計測
seconds = Math.floor(centi / HUNDRED_DIV); //1秒の計測(ミリ秒/1000)
minutes = Math.floor(seconds / TIMES_CON); //1分の計測(秒/60)
hours = Math.floor(minutes / TIMES_CON); //1時間の計測(分/60)
seconds = seconds - minutes * TIMES_CON; //59秒まで行ったら次は00秒にする(秒-分*60)ー>桁の繰り上げ
minutes = minutes - hours * TIMES_CON; //59分まで行ったら次は00分にする(分-時*60)ー>桁の繰り上げ
//経過時間のゼロ追加
hours = addZero(hours);
seconds = addZero(seconds);
minutes = addZero(minutes);
document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;
上記が現在時刻の表示とアラーム設定のコードになります。
例
ここで私が行いたいのが
設定した時間が、1時間2分3秒
時:分;秒
1:2:3
だった場合
document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;
上記コードの時刻が、1時間2分3秒になった際にアラームを鳴らしたいというものです。
アラームが鳴ったら上記コードの時刻が止まるのではなく、
「「アラームが一度なってもストップウォッチは稼働させたいです。」」
試したこと
<body>
<audio id="alarm" src="../static/audios/templeBell.mp3" preload="auto"></audio> <!-- 追加 -->
<div class="container">
//null判定(ゼロ代入)
var nullJudge = function(value){
if(value == null){
value = '0' + 0;
}
}
const alarm = document.getElementById("alarm");
//null判定(ゼロ追加)
getHour = nullJudge(getHour);
getMinute = nullJudge(getMinute);
getSecond = nullJudge(getSecond)
//アラーム条件
if(getHour == hours && getMinute == minutes && getSecond == seconds){
TEMPLE_BELL.play();
}
上記のコードで試してみたのですが、うまくいきませんでした。
最後まで読んでいただきありがとうございます。
教えていただけますと幸いです。
何卒よろしくお願いいたします。