setIntervalで指定した時間に文字を表示して音を鳴らす方法

秒数を計算し表示させる

setIntervalで指定した時間に文字とHTMLのaudioタグで指定した音声ファイルを使って音を出す方法を紹介します
今回のコードではカウントダウンさせています

timer

//連想配列で指定したい秒数と表示したい文字を記述する
$(function () {
      var timer = {
        40: "残り40秒です",
        20: "残り20秒です",
        10: "残り10秒です"
      };

timer

          //60秒からカウントダウンをはじめる
          var sec = 60;

timer

var timer1;
        timer1 = setInterval(function () {
          //secをマイナス１秒させる
          sec -= 1;
          //　Mathでsec÷60（1分=60秒）して分を計算する
          //  floorで端数を切り捨てる
          var min = Math.floor(sec / 60);
          // Mathでsec÷60...余り（1分=60秒）して秒を計算する
          //  floorで端数を切り捨てる
          var rem = Math.floor(sec % 60);

          //　■ 秒数に0を付けたい時
          //  remが9以下の時:(rem > 9) ?
          //  9以下ならremを表示してそうじゃなければ'0'をつけて表示
          var i = (rem > 9) ? rem : '0' + rem;
          //HTMLで表示したい場所:$('.clock')に
          //min(分) + ":" + iで分と秒が表示される
          $('.clock').html(min + ":" + i);
          $('.timer').html(timer);

音声ファイルをplayさせる秒数を設定する

timer

 switch (sec) {
            case 40:
              $("#audio1").get(0).play();
              console.log($("#audio1").prop("volume"));
              break;
            case 20:
              $("#audio2").get(0).play();
              break;
            case 10:
              $("#audio3").get(0).play();
              break;
          }

タイマーを停止させる

clearIntervalでタイマーを停止させる
0秒以下の時タイマーが止まるように指定しました

timer

if (sec <= 0) {
            clearInterval(timer1);
          }
     //1000ミリ秒（1秒）ごとにこの動作を繰り返す
        }, 1000);
      });
    });