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

Posted 2023-02-25

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

【英文标题】：JavaScript program that plays an audio file at a certain time, doesn't seem to work

【发布时间】：2020-12-19 07:10:12

【问题描述】：

我是 javascript 的新手，所以我只是从互联网上提取了一个脚本，并将其调整为在特定时间播放音频文件的位置（连同其最初的用途，即 html 时钟精确到毫秒），这样我就可以将节拍下降到上午 00:00：

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);

我的意图是，当达到某个时间时，它会创建一个具有song.mp3 的new Audio() 并与boolean hasPlayed 一起播放，以防止时钟重复发送歌曲。

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

【参考方案1】：

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

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

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

这个间隔肯定不会每毫秒触发一次。

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

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

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

【讨论】：

>您需要尽早创建 new Audio()，例如在您首先加载页面时。这样，浏览器就有时间缓冲音频。这是行得通的。非常感谢，2021 年更美好。

【参考方案2】：

随着您的编码，时间在流逝。我刚刚修复了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();

【讨论】：

第 39 行，字符 23：语法错误。