时间戳

首页 > 解决方案 > 在特定时间播放音频文件的 JavaScript 程序似乎不起作用

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

问题描述

我是 JavaScript 的新手，所以我只是从 Internet 上提取了一个脚本，并将其调整到在某个时间播放音频文件的位置（以及它的原始用途，即 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，尽管我知道这两者是完全不同的东西。

标签： javascripthtmlaudiotimemp3

解决方案

最初的目的是作为一个 HTML 时钟，精确到毫秒

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

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

这个间隔绝对不会每毫秒触发一次。

我的意图是，当达到某个时间时，它会创建一个包含 song.mp3 的新 Audio() 并播放它

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

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

推荐阅读