javascript - 为什么Javascript警报音频会不断重放？

Question

JavaScript倒数计时器:
当计时器达到零时，我想播放录音。我已经开始播放音频，但是在开始播放后几秒钟，相同的音频会再次以原始音频播放，并且永不停止。
这是我的代码:

//Javascript Countdown Timer.
//set the amount of time click
//start timer and the clock will
//count down until it reaches zero 
var message = "Complete.";

var parselimit = 0;
var st = 0;
var limit, curhour, curmin, cursec;

function set_limit(strtstop) {
  //prevent multiple settimeouts
  if (st) {
    clearTimeout(st);
  }

  if (document.getElementById("pause").value == 1) {
    limit = document.getElementById("show_timer").innerHTML;
  } else {
    limit = document.getElementById("hours").value + ":" + document.getElementById("min").value + ":" + document.getElementById("sec").value;
  }
  parselimit = limit.split(":");
  // take the minutes x 60 add it to the seconds;
  parselimit = parselimit[0] * 3600 + parselimit[1] * 60 + parselimit[2] * 1;
  //exit if timer wasn't set. //
  if (parselimit <= 0) {
    return;
  }

  if (strtstop == 1) {
    clearTimeout(st);
  } else {
    st = setTimeout("begintimer()", 1000);
  }
}

function begintimer() {
  if (parselimit == 1) {
    //ding ding ding

    ///////////////////////////////////ISSUE STATEMENT//////
    var audio = new Audio('alarmbuzzer.mp3');
    audio.play();
    alert("starting audio");

    /////////////////////////Audio Playing///////////////////
  } else {
    parselimit -= 1;
    curhour = Math.floor(parselimit / 3600);
    //alert(parselimit)
    /* greater than an hour divide by
       60 but subtract the hours. */
    if (parselimit > 3600) {
      //first convert hours back into seconds
      curmin = curhour * 3600;
      //subtract that from total to get minutes left.
      curmin = parselimit - curmin;
      curmin = Math.floor(curmin / 60);
      //alert(curmin);
    } else {
      curmin = Math.floor(parselimit / 60);
    }
    cursec = parselimit % 60;

  }
  curmin += "";
  if (curmin.length == 1 || curmin == 9) {
    curmin = "0" + curmin;
  }
  cursec += "";
  //alert(cursec);
  if (cursec.length == 1 || cursec == 9) {
    cursec = "0" + cursec;
  }
  curtime = curhour + ":" + curmin + ":" + cursec;

  //alert(document.getElementById("show_timer").innerHTML);
  document.getElementById("show_timer").innerHTML = curtime;
  st = setTimeout("begintimer()", 1000);
}

function add_time_clock(x, frmelm) {
  var ter = document.getElementById(frmelm).value;
  /* add time */
  if (x == 1) {
    ter = eval(ter) + 1;
    //if greater than 60 go to zero. i'm maxing out the hours at 60 too.
    if (ter >= 60) {
      ter = '00';
    }
  } else {
    /* subtract time */
    ter = eval(ter) - 1;
    //if greater than 60 go to zero. i'm maxing out the hours at 60 too.
    if (ter <= 0) {
      ter = '00';
    }
  }
  ter = "" + ter;
  if (ter.length == 1) {
    ter = "0" + ter;
  }
  document.getElementById(frmelm).value = ter;
}

function rset_tmr() {
  document.getElementById('show_timer').innerHTML = "00:00:00";
  document.getElementById('pause').value = 0;
}

function show_hide(div) {
  if (document.getElementById(div).style.display == 'none') {
    document.getElementById(div).style.display = '';
  } else {
    document.getElementById(div).style.display = 'none';
  }
}

<div id="set_timer" style="">
  <input id="pause" type="hidden" value="0" />
  <br />
  <table border="3" bordercolor="#0047B2" cellspacing="12">
    <tbody>
      <tr>
        <td align="center" colspan="8" height="40">
          <b><span id="show_timer">00:30:00</span></b>
        </td>
      </tr>
      <tr>
        <td>
          Hrs</td>
        <td>
          Min</td>
        <td>
          Sec</td>
      </tr>
      <tr>
        <td>
          <input id="hours" maxlength="10" size="4" type="text" value="00" />:</td>
        <td>
          <input id="min" maxlength="10" size="4" type="text" value="30" />:</td>
        <td>
          <input id="sec" maxlength="10" size="2" type="text" value="00" />
        </td>
      </tr>
      <tr>
        <td>
          [<a href="javascript:add_time_clock('1','hours')" data-cke-saved-href="javascript:add_time_clock('1','hours')">+</a>] [<a href="javascript:add_time_clock('2','hours')">-</a>]</td>
        <td>
          [<a href="javascript:add_time_clock('1','min')">+</a>] [<a href="javascript:add_time_clock('2','min')">-</a>]</td>
        <td>
          <a href="javascript:add_time_clock('1','sec')">+</a>  <a href="javascript:add_time_clock('2','sec')">-</a>]</td>
      </tr>
      <tr>
        <td align="center" colspan="3">
          <input onclick="set_limit()" type="button" value="Start" />
          <input onclick="set_limit('1'),document.getElementById('pause').value=1" type="button" value="Pause" />
          <input onclick="rset_tmr()" type="button" value="Reset" />
        </td>
      </tr>
    </tbody>
  </table>
  <br />
</div>

Answer 1

原因是您重复setTimeout的代码不在else的begintimer子句之外。因此，即使倒数计时已经结束，您也可以执行另一个setTimeout，当它触发时，您仍然在结尾处，因此它将再次启动音频，然后继续。移动代码以将计时器重复到else子句中:

function begintimer(){
    if (parselimit==1) {
        //ding ding ding

        ///////////////////////////////////ISSUE STATEMENT//////
        var audio = new Audio('alarmbuzzer.mp3');
        audio.play();

        /////////////////////////Audio Playing///////////////////
    } else{ 
        parselimit-=1;
        curhour=Math.floor(parselimit/3600);
        //alert(parselimit)
        /* greater than an hour divide by
           60 but subtract the hours. */
        if(parselimit > 3600) {
            //first convert hours back into seconds
            curmin = curhour * 3600;
            //subtract that from total to get minutes left.
            curmin = parselimit - curmin;
            curmin = Math.floor(curmin/60);
            //alert(curmin);
        } else {
            curmin = Math.floor(parselimit/60);
        }
        cursec=parselimit%60;
        curmin += "";
        if(curmin.length == 1 || curmin==9) {
            curmin = "0" + curmin;
        }
        cursec += "";
        //alert(cursec);
        if(cursec.length == 1 || cursec==9) {
            cursec = "0" + cursec;
        }
        curtime = curhour + ":" + curmin + ":" + cursec;

        //alert(document.getElementById("show_timer").innerHTML);
        document.getElementById("show_timer").innerHTML = curtime;
        st=setTimeout("begintimer()",1000);

    }
}

这是完整的代码:

//Javascript Countdown Timer.
//set the amount of time click
//start timer and the clock will
//count down until it reaches zero 
var message = "Complete.";

var parselimit = 0;
var st = 0;
var limit, curhour, curmin, cursec;

function set_limit(strtstop) {
  //prevent multiple settimeouts
  if (st) {
    clearTimeout(st);
  }

  if (document.getElementById("pause").value == 1) {
    limit = document.getElementById("show_timer").innerHTML;
  } else {
    limit = document.getElementById("hours").value + ":" + document.getElementById("min").value + ":" + document.getElementById("sec").value;
  }
  parselimit = limit.split(":");
  // take the minutes x 60 add it to the seconds;
  parselimit = parselimit[0] * 3600 + parselimit[1] * 60 + parselimit[2] * 1;
  //exit if timer wasn't set. //
  if (parselimit <= 0) {
    return;
  }

  if (strtstop == 1) {
    clearTimeout(st);
  } else {
    st = setTimeout("begintimer()", 1000);
  }
}

function begintimer() {
  if (parselimit == 1) {
    //ding ding ding

    ///////////////////////////////////ISSUE STATEMENT//////
    var audio = new Audio('alarmbuzzer.mp3');
    audio.play();
    alert("Starting audio");

    /////////////////////////Audio Playing///////////////////
  } else {
    parselimit -= 1;
    curhour = Math.floor(parselimit / 3600);
    //alert(parselimit)
    /* greater than an hour divide by
       60 but subtract the hours. */
    if (parselimit > 3600) {
      //first convert hours back into seconds
      curmin = curhour * 3600;
      //subtract that from total to get minutes left.
      curmin = parselimit - curmin;
      curmin = Math.floor(curmin / 60);
      //alert(curmin);
    } else {
      curmin = Math.floor(parselimit / 60);
    }
    cursec = parselimit % 60;
    curmin += "";
    if (curmin.length == 1 || curmin == 9) {
      curmin = "0" + curmin;
    }
    cursec += "";
    //alert(cursec);
    if (cursec.length == 1 || cursec == 9) {
      cursec = "0" + cursec;
    }
    curtime = curhour + ":" + curmin + ":" + cursec;

    //alert(document.getElementById("show_timer").innerHTML);
    document.getElementById("show_timer").innerHTML = curtime;
    st = setTimeout("begintimer()", 1000);

  }
}


function add_time_clock(x, frmelm) {
  var ter = document.getElementById(frmelm).value;
  /* add time */
  if (x == 1) {
    ter = eval(ter) + 1;
    //if greater than 60 go to zero. i'm maxing out the hours at 60 too.
    if (ter >= 60) {
      ter = '00';
    }
  } else {
    /* subtract time */
    ter = eval(ter) - 1;
    //if greater than 60 go to zero. i'm maxing out the hours at 60 too.
    if (ter <= 0) {
      ter = '00';
    }
  }
  ter = "" + ter;
  if (ter.length == 1) {
    ter = "0" + ter;
  }
  document.getElementById(frmelm).value = ter;
}

function rset_tmr() {
  document.getElementById('show_timer').innerHTML = "00:00:00";
  document.getElementById('pause').value = 0;
}

function show_hide(div) {
  if (document.getElementById(div).style.display == 'none') {
    document.getElementById(div).style.display = '';
  } else {
    document.getElementById(div).style.display = 'none';
  }
}

<div id="set_timer" style="">
  <input id="pause" type="hidden" value="0" />
  <br />
  <table border="3" bordercolor="#0047B2" cellspacing="12">
    <tbody>
      <tr>
        <td align="center" colspan="8" height="40">
          <b><span id="show_timer">00:30:00</span></b>
        </td>
      </tr>
      <tr>
        <td>
          Hrs</td>
        <td>
          Min</td>
        <td>
          Sec</td>
      </tr>
      <tr>
        <td>
          <input id="hours" maxlength="10" size="4" type="text" value="00" />:</td>
        <td>
          <input id="min" maxlength="10" size="4" type="text" value="30" />:</td>
        <td>
          <input id="sec" maxlength="10" size="2" type="text" value="00" />
        </td>
      </tr>
      <tr>
        <td>
          [<a href="javascript:add_time_clock('1','hours')" data-cke-saved-href="javascript:add_time_clock('1','hours')">+</a>] [<a href="javascript:add_time_clock('2','hours')">-</a>]</td>
        <td>
          [<a href="javascript:add_time_clock('1','min')">+</a>] [<a href="javascript:add_time_clock('2','min')">-</a>]</td>
        <td>
          <a href="javascript:add_time_clock('1','sec')">+</a>  <a href="javascript:add_time_clock('2','sec')">-</a>]</td>
      </tr>
      <tr>
        <td align="center" colspan="3">
          <input onclick="set_limit()" type="button" value="Start" />
          <input onclick="set_limit('1'),document.getElementById('pause').value=1" type="button" value="Pause" />
          <input onclick="rset_tmr()" type="button" value="Reset" />
        </td>
      </tr>
    </tbody>
  </table>
  <br />
</div>