Web上で動くタイマーを作る④終了時に音楽を鳴らす

こんばんは！

今回は音楽の鳴らし方についてです。

第1回、第2回、第3回を見ていない方は、そちらから見ていただければ幸いです。

Web上で動くタイマーを作る①setIntervalを使う

Web上で動くタイマーを作る②スライダーを使用する

Web上で動くタイマーを作る③ボタンと処理

また、4回までで完成するプログラムはこちらで動かすことができるので、確認してみてください。

audioタグを使う

HTML5のaudioタグを使えば簡単に記述することができます。

src属性でファイルを指定、loop属性でループ再生します。

audioタグの間はaudioタグがサポートされていない環境で表示するメッセージを記述します。

<audio src="alert.mp3" loop id="audio">現環境では終了時にアラームが鳴りません</audio>

1	<audio src="alert.mp3" loop id="audio">現環境では終了時にアラームが鳴りません</audio>

プログラムに追加する

前回のプログラムに追加します。

playaudioメソッドとstopaudioメソッドを追加し、startメソッドとstopメソッドの中から呼び出しています。

<html>
    <head>
    </head>
  <body>
      <div id="bargroup">
<div class="time">時：<span id="hour_value">0</span><br><input id="hour" type = "range" min = "0" max = "99" step = "1" value = "0"style="width: 200px;height:auto"><br></div>
<div class="time">分：<span id="minute_value">0</span><br><input id="minute" type="range" min="0" max="59" step="1"  value="0" style="width: 200px;height:auto"><br>  </div>
<div class="time">秒：<span id="second_value">30</span><br><input id="second" type="range" min="0" max="59" step="1" value="30"  style="width: 200px;height:auto"><br> </div></div>
 
    
    <h1 id="varvar"><div  id="largehour" class="time_display"style="display: inline-block; _display: inline;"><span id="hour_display">00</span></div>:
    <div id="largeminute"class="time_display"style="display: inline-block; _display: inline;"><span id="minute_display">00</span></div>:
        <div id="largesecond" class="time_display"style="display: inline-block; _display: inline;"><span id="second_display">30</span></div></h1><br>
    
    <input type="button" id="start_button" value="start" style="background-color:aliceblue;text-decoration-color: aqua" onclick="start()">
<input type="button" id="stop_button" value="stop" style="background-color:aliceblue;text-decoration-color: aqua" onclick="stop()" disabled>
    <input type="button" id="reset_button" value="reset" style="background-color:aliceblue;text-decoration-color: aqua" onclick="reset()" disabled><br>

    <script>
  var time = document.getElementsByClassName('time');
  var time_display=document.getElementsByClassName("time_display");
  function rangeValue(time, target, target2) {
    return function(){
        if(time.value >= 10){
                 target.innerHTML = time.value;
                    target2.innerHTML = time.value;
           }else{
               target.innerHTML = "0"+time.value;
                    target2.innerHTML = "0"+time.value;
           }
    }
  }
  for(var i = 0; i<time.length;i++){
      bar=time[i].getElementsByTagName("input")[0];
      target=time[i].getElementsByTagName("span")[0];
      target2=time_display[i].getElementsByTagName("span")[0];
      bar.addEventListener("input",rangeValue(bar,target,target2));
  }
        
        function timeAll(){
            var hour_all = document.getElementById("hour").value;
            var minute_all = document.getElementById("minute").value;
                var second_all = document.getElementById("second").value;
            var all = Number(hour_all*3600)+Number(minute_all*60)+Number(second_all);
            return all;
        }
        
        var ontheway = false;
        var onthewayallsec = 0;
        
        function start(){
            document.getElementById("bargroup").style.visibility ="hidden";
            document.getElementById("start_button").disabled="disabled";
            document.getElementById("reset_button").disabled="disabled";
            document.getElementById("stop_button").disabled=""
            if(ontheway == false){
                          var allsec = timeAll(); 
               }else{
                   var allsec = onthewayallsec;
               }
            ontheway = false;
            var dt = new Date();
            var endDt = new Date(dt.getTime() + allsec * 1000);
            hour = Math.floor(allsec/3600);
            if(hour < 10){
            largehour.innerHTML="0"+hour;
               }else{
               largehour.innerHTML=hour;
               }
            hour_remainder =Math.floor(allsec%3600);
            minute = Math.floor(hour_remainder/60);
            if(minute < 10){
            largeminute.innerHTML="0"+minute;
               }else{
               largeminute.innerHTML=minute;
               }
            sec=Math.floor(hour_remainder%60);
      if(sec < 10){
            largesecond.innerHTML="0"+sec;
               }else{
               largesecond.innerHTML=sec;
               }
  var count_down = setInterval(function(){
    allsec = allsec-0.1;
          dt = new Date();
            hour = Math.floor(allsec/3600);
            if(hour < 10){
            largehour.innerHTML="0"+hour;
               }else{
               largehour.innerHTML=hour;
               }
            hour_remainder =Math.floor(allsec%3600);
            minute = Math.floor(hour_remainder/60);
            if(minute < 10){
            largeminute.innerHTML="0"+minute;
               }else{
               largeminute.innerHTML=minute;
               }
            sec=Math.floor(hour_remainder%60);
      if(sec < 10){
            largesecond.innerHTML="0"+sec;
               }else{
               largesecond.innerHTML=sec;
               }
    if(dt.getTime() >= endDt.getTime()){
      clearInterval(count_down);
        playaudio();
        largeminute.innerHTML=minute;
        largesecond.innerHTML="00";
          largeminute.innerHTML="00";
          largehour.innerHTML="00";
    }
      if(ontheway == true){
         clearInterval(count_down);
         onthewayallsec = allsec;
         }
  }, 100);
        }
        
        function stop(){
            stopaudio();
            ontheway = true;
            document.getElementById("start_button").disabled="";
            document.getElementById("reset_button").disabled="";
            document.getElementById("stop_button").disabled="disabled"
        }
        
        function reset(){
            location.reload();
        }
        //音楽を鳴らす
        function playaudio(){
            document.getElementById('audio').play();
        }
　　　　　//音楽を止める
        function stopaudio(){
            document.getElementById('audio').pause();
        }
           </script>
      <audio src="alert.mp3" loop id="audio">現環境では終了時にアラームが鳴りません</audio>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<html>

<head>

</head>

<body>

<h1 id="varvar"><div id="largehour" class="time_display"style="display: inline-block; _display: inline;"><span id="hour_display">00</span></div>:

<div id="largeminute"class="time_display"style="display: inline-block; _display: inline;"><span id="minute_display">00</span></div>:

var time = document.getElementsByClassName('time');

var time_display=document.getElementsByClassName("time_display");

function rangeValue(time, target, target2) {

return function(){

if(time.value >= 10){

target.innerHTML = time.value;

target2.innerHTML = time.value;

}else{

target.innerHTML = "0"+time.value;

target2.innerHTML = "0"+time.value;

}

for(var i = 0; i<time.length;i++){

bar=time[i].getElementsByTagName("input")[0];

target=time[i].getElementsByTagName("span")[0];

target2=time_display[i].getElementsByTagName("span")[0];

bar.addEventListener("input",rangeValue(bar,target,target2));

}

function timeAll(){

var hour_all = document.getElementById("hour").value;

var minute_all = document.getElementById("minute").value;

var second_all = document.getElementById("second").value;

var all = Number(hour_all*3600)+Number(minute_all*60)+Number(second_all);

return all;

}

var ontheway = false;

var onthewayallsec = 0;

function start(){

document.getElementById("bargroup").style.visibility ="hidden";

document.getElementById("start_button").disabled="disabled";

document.getElementById("reset_button").disabled="disabled";

document.getElementById("stop_button").disabled=""

if(ontheway == false){

var allsec = timeAll();

}else{

var allsec = onthewayallsec;

}

ontheway = false;

var dt = new Date();

var endDt = new Date(dt.getTime() + allsec * 1000);

hour = Math.floor(allsec/3600);

if(hour < 10){

largehour.innerHTML="0"+hour;

}else{

largehour.innerHTML=hour;

}

hour_remainder =Math.floor(allsec%3600);

minute = Math.floor(hour_remainder/60);

if(minute < 10){

largeminute.innerHTML="0"+minute;

}else{

largeminute.innerHTML=minute;

}

sec=Math.floor(hour_remainder%60);

if(sec < 10){

largesecond.innerHTML="0"+sec;

}else{

largesecond.innerHTML=sec;

}

var count_down = setInterval(function(){

allsec = allsec-0.1;

dt = new Date();

hour = Math.floor(allsec/3600);

if(hour < 10){

largehour.innerHTML="0"+hour;

}else{

largehour.innerHTML=hour;

}

hour_remainder =Math.floor(allsec%3600);

minute = Math.floor(hour_remainder/60);

if(minute < 10){

largeminute.innerHTML="0"+minute;

}else{

largeminute.innerHTML=minute;

}

sec=Math.floor(hour_remainder%60);

if(sec < 10){

largesecond.innerHTML="0"+sec;

}else{

largesecond.innerHTML=sec;

}

if(dt.getTime() >= endDt.getTime()){

clearInterval(count_down);

playaudio();

largeminute.innerHTML=minute;

largesecond.innerHTML="00";

largeminute.innerHTML="00";

largehour.innerHTML="00";

}

if(ontheway == true){

clearInterval(count_down);

onthewayallsec = allsec;

}

}, 100);

}

function stop(){

stopaudio();

ontheway = true;

document.getElementById("start_button").disabled="";

document.getElementById("reset_button").disabled="";

document.getElementById("stop_button").disabled="disabled"

}

function reset(){

location.reload();

}

//音楽を鳴らす

function playaudio(){

document.getElementById('audio').play();

}

　　　　　//音楽を止める

function stopaudio(){

document.getElementById('audio').pause();

}

</script>

<audio src="alert.mp3" loop id="audio">現環境では終了時にアラームが鳴りません</audio>

</body>

</html>

※audioタグ内のsrc属性から呼び出している"alert.mp3"は適宜修正して実行してください。

これで完成です、お疲れ様でした。

終わりに

今回のコードよりもっといい機能やいいデザインが思いついたら、どんどん付け足して独自のタイマーを作っていただければと思います。

第1回から最後までお読みいただきありがとうございました。

少しでも皆様のお役に立てたなら幸いです。

【無料】ゲームをやるだけで暗号資産のマイニングができる！RollerCoinを紹介

Web上で動くタイマーを作る④終了時に音楽を鳴らす

audioタグを使う

プログラムに追加する

終わりに