Qiitaにも記事を公開しています。よければ見てください！！

【JavaScript】音を鳴らすタイマーをJavaScriptで作成してみた。

JavaScript

こんにちは、kazuです。
今回は音で知らせるタイマーをJavaScriptで作成してみたので
それを解説していきます。

目次

どのようなアプリか？

以下の画像のようにBGMを選択して分と秒をまたは分秒のどちらか入力して
スタートをクリックするとタイマーが動き始めます
ストップをクリックすると一時停止します。
そしてタイマーが0になると選択したBGMが流れるプログラムになります
そしてBGMが流れた時のみタイマーを止めるボタンが表示されてクリックするとボタンが消えるプログラムを作成しました。
※見た目部分は適当ですが勘弁してください(笑)

タイマーが０になって音楽が流れた時に以下のボタンを表示されます

ディレクトリ構成

ディレクトリ
     ├─ alerm
     │    ├─ おやすみDay.mp3
     │    ├─ ぴよぴよサーキット.mp3
     │    └─ 海底の神殿.mp3
     │
     ├─ CountdownTimer.css
     ├─ CountdownTimer.html
     └─ CountdownTimer.js

実際にコードを見てみよう

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CountdownTimer</title>
    <script src="CountdownTimer.js"></script>
    <link rel="stylesheet" type="text/css" href="CountdownTimer.css">
  </head>
  <body>
    <div class="parent">
      <form name="MusicForm">
        <select name="music" class="select_music">
          <option value="おやすみDay">おやすみDay</option>
          <option value="ぴよぴよサーキット">ぴよぴよサーキット</option>
          <option value="海底の神殿">海底の神殿</option>
        </select>
      </form>
      <form name="timer" id="timerform">
        <input type="text" value="" class="min"><span>分</span>
        <input type="text" value="" class="sec"><span>秒</span><br>
        <input type="button" value="スタート" onclick="CountStart()" class="button">
        <input type="button" value="ストップ" onclick="CountStop()" class="button">
      </form>
    </div>
  </body>
</html>
var time; //タイマーを格納する変数（タイマーID）の宣言
var myAudio = new Audio();
//カウントダウン関数を1000ミリ秒毎に呼び出す関数
function CountStart() {
  ChangeButton(true);
  time=setInterval("CountDown()",1000);
}

//タイマー停止関数
function CountStop() {
  ChangeButton(false);
  clearInterval(time);
}

// ボタンの切り替え関数
function ChangeButton(buttonSwitch) {
  // スタートボタンのelement
  var startButton = document.timer.elements[2]
  // ストップボタンのelement
  var stopButton = document.timer.elements[3]
  // ボタンのフラグ
  var flag = buttonSwitch
  startButton.disabled = flag
  stopButton.disabled = !flag
}

//カウントダウン関数
function CountDown()
{
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;
  if( (min=="") && (sec=="") ) {
    alert("時刻を設定してください！");
    reset();
  } else {
    if (min=="") min=0;
    min=parseInt(min);
    
    if (sec=="") sec=0;
    sec=parseInt(sec);
    
    tmWrite(min*60+sec-1);
  }
}

// BGMを設定している関数
function MusiArray(){
  var selectMusic = document.MusicForm.music;
  var MusicNum = selectMusic.selectedIndex;
  var music0 = 'alarm/おやすみDay.mp3'
  var music1 = 'alarm/ぴよぴよサーキット.mp3'
  var music2 = 'alarm/海底の神殿.mp3'
　// BGMに配列に入れる
  var musicArray = [music0,music1,music2]
  return musicArray[MusicNum]
}

//残り時間を書き出す関数
function tmWrite(int) {
  int=parseInt(int);
  if (int<=0) {
    reset();
    // オーディオがなる
    audio(true)
    // オーディオストップボタンが作成される
    makeButton()
  } else {
    //残り分数はintを60で割って切り捨てる
    document.timer.elements[0].value=Math.floor(int/60);
    //残り秒数はintを60で割った余り
    document.timer.elements[1].value=int % 60;
  }
}

//オーディオストップボタン作成関数
function makeButton(){
  const timerForm = document.getElementById("timerform");
  const input = document.createElement("input");
  timerForm.appendChild(input);
  input.setAttribute('type','button')
  input.setAttribute('value','タイマーをとめる')
  input.setAttribute('id','stop_music')
  // 引数をfalseにしてオーディオが止まる
  input.setAttribute('onclick','audio(false)')
}

//オーディオ再生ストップ関数
function audio(flag){
  var alermMusic = MusiArray()
  myAudio.src = alermMusic;
  if(flag){
    myAudio.play()
  } else {
    myAudio.pause()
    myAudio.currentTime = 0;
    // オーディオストップボタンの削除
    document.getElementById('stop_music').remove();
  }
}

//フォームを初期状態に戻す
function reset() {
  document.timer.elements[0].value="0";
  document.timer.elements[1].value="0";
  document.timer.elements[2].disabled=false;
  clearInterval(time);
}  
.parent{
  height: 300px;
  width: 700px;
  margin:100px;
  background: #000000;
}

.select_music{
  margin:30px;
  height: 40px;
  width: 640px;
}

.min{
  margin:30px;
  height: 40px;
  width: 250px;
  
}
span{
  color: #fff;
}
.sec{
  margin:30px;
  height: 40px;
  width: 250px;
}

.button{
  margin-top:15px;
  margin-left:30px;
  height: 50px;
  width: 150px;
}

#stop_music{
  margin-top:15px;
  margin-left:120px;
  height: 50px;
  width: 150px;
}

※今回のBGMはDOVA-SYNDROME様からお借りしました：https://dova-s.jp/

最後に

いかがでしたでしょうか？
今回はBGMを選択するところが少しどうしようかなという感じでした。
もしかしたらほかにいい書き方があるかもしれませんが
今回はこれがBGMも少ないのでこれで問題ないでしょう。
最後までご覧いただきありがとうございました。

※ディレクトリ構成を追記しました

関連記事
【JavaScript】2022年までのカウントダウンタイマーを作ってみた

こんにちはkazuです。 本日はjavascriptで2022年までのカウントダウンタイマーを作ってみましたので、 そのコードを解説していきます。 アプリの説明 まずは、アプリの説明をしていきます。 といってもたいして説明する[…]

関連記事
【JavaScript】アラームとタイムセールを知らせるプログラムを作ってみた

こんにちはkazuです。 本日はjavascriptでアラームとタイムセールを知らせるプログラムを作ってみたので、 そのコードを解説していきます。 はじめに 今回はどのようなプログラムを作ったかといいますと、 特定の時間を変数に入[…]

関連記事
【JavaScript】文字列カウンターを作ってみた

こんにちは、kazuです。 本日は文字列カウンターを作ってみましたので、 それを記事にしていきます。 なぜこのプログラムを作ったか 今回このプログラムを作ったきっかけは私事ですがプロフィール書く機会が多くなりまして プロフィール作[…]

関連記事
【JavaScript】電卓アプリをJavaScriptで作ってみた

こんにちは、kazuです。 今回はJavaScriptで電卓アプリを作成しましたので、 記事にしていきます。 どのようなプログラムか 題名通りですが、電卓アプリです HTML上で以下のような画像が表示されて数字をクリックすると[…]