在网站上一周的特定时间自动播放音乐文件的代码（如闹钟）

Posted 2023-02-25

【中文标题】在网站上一周的特定时间自动播放音乐文件的代码（如闹钟）

【英文标题】：Code to auto play a music file at a specific time of the week on website (like a alarm clock)

【发布时间】：2020-11-29 14:26:33

【问题描述】：

我正在寻找一种在一周中的特定时间自动播放音乐文件的方法。

例如每周一中午 12 点。

如果在工作日无法做到这一点，那么只有几个小时也可以，比如每天下午 12 点，但如果它可以在工作日工作，那就太好了。

从头到尾播放完文件后，它应该停止并等待下一个回合，例如下周一中午 12 点。

我尝试了this code，但它对我不起作用：

JS：

<script>
var d = new Date();
var m = d.getMinutes();
var h = d.getHours();
if (h == 17 && m == 00)
      var sound = document.getElementById(sound1);
      sound.Play();

</script>

html：

<embed src="notify.mp3" autostart="false"   id="sound1"
enablejavascript="true">

非常感谢您！

【问题讨论】：

如果您在 5:59.59 和 6:00:00（不包括在内）之间运行该代码，声音将会播放。但是，如果您在下午 6 点之前到达并等到之后，它将不会播放。您可能希望设置一个（n 间隔）计时器以每秒触发一次事件。在计时器的处理程序中，您可以检查当前时间/星期几，并在适当的时候播放文件。 setInterval 对于这种方法会派上用场。当然，在页面加载时，您可以计算出到中午还有多长时间，在计算的时间过去后使用setTimeout 触发单个事件。 MDN 有很好的 JS 帮助文档。

【参考方案1】：

你应该使用<audio> HTML 5 元素来播放一些歌曲：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

如果您想在正确的时间播放声音，您可能应该在页面加载时使用setTimeout，以便在下一个时间段播放它。

类似这样的东西（我还没有测试过）：

<audio id="notifyAudio" src="notify.mp3" />
<script>
    // Our audio element
    const audio = document.getElementById("notifyAudio");

    // Retrieve the number of milliseconds between now and
    // the next alarm time (next time hour is 17:00:00)
    function getTimeBeforeNextAlarm() 
        // Current date
        const date = new Date();

        // If the current hour is already past 17,
        // then the next alarm will be the next day
        if (date.getHours() >= 17) 
          // Increase day of the month by one
          // (It automatically handles jumping to next month)
          date.setDate(date.getDate() + 1);
        

        // Set the time to 17:00:00
        date.setHours(17);
        date.setMinutes(0);
        date.setMilliseconds(0);

        // Alarm time - Current time = Remaining time
        // (The Date is implicitly converted to a number of milliseconds)
        return date - Date.now();
    

    // Schedule the next alarm
    function scheduleAlarm() 
        window.setTimeout(() => 
            // Play the audio
            audio.play();
            // Schedule the next alarm (in this case, in 24h)
            scheduleAlarm();
        , getTimeBeforeNextAlarm());
    

    scheduleAlarm();
</script>

但请注意，大多数浏览器不允许您在没有用户交互的情况下播放声音，除非用户已经与您的网站进行了很多交互。更多细节在这里：https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide