JavaScript 在特定时间播放音频文件的程序似乎不起作用

Question

我是 JavaScript 的新手，所以我刚刚从互联网上提取了一个脚本并将其调整到在特定时间播放音频文件的位置（连同其作为 HTML 时钟下降到毫秒），这样我就可以将节拍下降到 00:00 AM:

Number.prototype.pad = function(n) {
  for (var r = this.toString(); r.length < n; r = 0 + r);
  return r;
};

function updateClock() {
  var now = new Date();
  //start my code
  var hasPlayed = false;
  //end my code
  var milli = now.getMilliseconds(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hou = now.getHours(),
    mo = now.getMonth(),
    dy = now.getDate(),
    yr = now.getFullYear();
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
  for (var i = 0; i < tags.length; i++)
    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];

  //start my code
  if (hasPlayed == false && min == 57 && sec == 13 && milli >= 700) {
    hasPlayed = true;
    var song = new Audio('song.mp3');
    song.play();
  } else {
    hasPlayed = false;
  }
  //end my code
    
}

function initClock() {
  updateClock();
  window.setInterval("updateClock()", 1);
}

我的意图是，当到达某个时间时，它会创建一个 new Audio()，其中包含 song.mp3 并播放它，并使用 boolean hasPlayed 来防止时钟反复发送垃圾邮件。

我觉得我已经掌握了基本的想法，但是执行起来却很乏味。我觉得我正在将 Java 逻辑应用于 JavaScript，尽管我知道这两者是完全不同的东西。

Answer 1

随着您的编码，时间在流逝。我刚刚修复了 setInterval。这在放置函数而不是放置字符串时运行。

Number.prototype.pad = function(n) {
  for (var r = this.toString(); r.length < n; r = 0 + r);
  return r;
};

function updateClock() {
  var now = new Date();
  //start my code
  var hasPlayed = false;
  //end my code
  var milli = now.getMilliseconds(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hou = now.getHours(),
    mo = now.getMonth(),
    dy = now.getDate(),
    yr = now.getFullYear();
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
    console.log(corr)
  for (var i = 0; i < tags.length; i++)
    //document.getElementById(tags[i]).firstChild.nodeValue = corr[i];

  //start my code
  if (hasPlayed == false && min == 57 && sec == 13 && milli >= 700) {
    hasPlayed = true;
    var song = new Audio('song.mp3');
    song.play();
  } else {
    hasPlayed = false;
  }
  //end my code
    
}

function initClock() {
  updateClock();
  window.setInterval(() => updateClock(), 1);
}

initClock();

Answer 2

with its original purpose as an HTML clock down to the millisecond

好吧，无论如何那是不可能的。没有人拥有更新频率为 1,000 Hz 的屏幕。 60 赫兹是典型值。您应该改用 requestAnimationFrame()。

window.setInterval("updateClock()", 1);

这个间隔绝对不会每毫秒都触发

My intention was that when a certain time was reached, it would create a new Audio() that had song.mp3 and would play it

您需要尽早创建 new Audio()，例如在您首先加载页面时。这样，浏览器就有时间缓冲音频。

如果您的音频剪辑相对较短（不到一两分钟），并且您想要获得更好的时间，则可以使用网络音频 API 和一个 AudioBufferSourceNode。这将允许您提前获取音频数据（通过 Fetch API 或任何您喜欢的方式），然后将其解码为内存中的 PCM，并将其排入队列以在特定时间开始。这里的缺点是文件必须完全加载才能执行此操作，因为整个解码音频在使用之前都位于内存中。

JavaScript 在特定时间播放音频文件的程序似乎不起作用

JavaScript program that plays an audio file at a certain time, doesn't seem to work

html

javascript

audio

time

mp3