新手改写的JavaScript定时音频播放脚本无法正常运行求助

Hey there! Let's break down why your script isn't working right and fix it step by step.

The Core Issue: hasPlayed Scope #

Your biggest problem is where you declared the hasPlayed variable. Right now, it's inside the updateClock() function—this means every single time the function runs (which is every 1ms), hasPlayed gets reset to false. So your check to prevent repeated playback does nothing at all.

Other Small (But Important) Issues #

• Using a string ("updateClock()") in setInterval is outdated and can cause unexpected behavior; use the function reference directly.
• A 1ms interval is overkill—browsers have a minimum timer resolution (usually ~4ms), and this will just waste CPU resources. 10ms is more than enough for millisecond precision.
• Modern browsers block automatic audio playback unless the user has interacted with the page first (like clicking anywhere). We'll need to handle this to avoid silent failures.
• Creating a new Audio instance every time the trigger condition hits is inefficient; better to create it once upfront.

Fixed Code #

Here's the revised script with all these fixes applied:

// Move hasPlayed outside the function so it persists across calls
let hasPlayed = false;
// Pre-create the audio instance once for efficiency
const song = new Audio('song.mp3');

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

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

  // Check our trigger condition
  if (!hasPlayed && min === 57 && sec === 13 && milli >= 700) {
    hasPlayed = true;
    // Try to play the audio, handle browser autoplay restrictions
    song.play().catch(err => {
      alert("Please click anywhere on the page first to enable audio playback!");
    });
  } 
  // Reset hasPlayed only when we're outside the trigger window
  else if (min !== 57 || sec !== 13 || milli < 700) {
    hasPlayed = false;
  }
}

function initClock() {
  updateClock();
  // Use function reference instead of string, set to 10ms interval
  window.setInterval(updateClock, 10);
  
  // Add a click handler to unlock audio playback in browsers
  document.addEventListener('click', () => {
    song.play().catch(() => {}); // Silent catch since we just need to unlock
  });
}

Key Changes Explained #

1. Moved hasPlayed and song to global scope: This keeps their values between function calls, so hasPlayed stays true until we explicitly reset it, and we don't recreate the audio object every time.
2. Improved the reset condition: Instead of setting hasPlayed to false every time the condition isn't met, we only reset it when we're definitely outside the 57:13.700+ window—this prevents accidental resets if the timer runs mid-trigger.
3. Added autoplay error handling: The play() method returns a promise, so we catch errors to tell the user to interact with the page if needed.
4. Added a page click handler: This unlocks audio playback permissions in browsers that require user interaction.
5. Cleaned up the pad method: Used a while loop instead of a for loop for readability, and updated variable declarations to let/const (modern JS best practice).

Quick Notes #

• Make sure song.mp3 is in the same directory as your HTML file, or use the correct relative/absolute path.
• Test this by setting your system time close to 57:13 (any hour) to see if the audio triggers correctly.

内容的提问来源于stack exchange，提问作者Matcha