如何修改代码实现点击指定链接先播放声音再跳转？附现有代码

Got it, let's get your code working properly—right now, the link's default navigation happens immediately, cutting off the audio, and there's a small issue with how you're looping through the links. Here's the step-by-step fix:

Key Issues in Your Current Code #

• Default link behavior isn't blocked: When you click the link, the browser tries to navigate right away, which interrupts the audio before it can play through.
• Incorrect loop for HTMLCollection: for (var i in links) will iterate over extra properties (like length) of the collection, not just the actual link elements.
• No wait for audio completion: We need to trigger navigation only after the audio finishes playing, not at the same time as starting it.

Modified HTML (First, fix the incomplete audio tag) #

Your audio tag was cut off—make sure to close it and add a fallback for unsupported browsers, plus preload to speed up playback:

<a href="https://example.com/page1" class="swoosh">Link 1</a>
<a href="https://example.com/page2">Link 2</a>
<a href="https://example.com/page3" class="swoosh">Link 3</a>

<audio id="a-on-click" preload="auto">
  <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
  <!-- Fallback for browsers that don't support audio -->
  Your browser does not support the audio element.
</audio>

The preload="auto" attribute ensures the audio is cached and ready to play quickly when the link is clicked.

Modified JavaScript #

// Get all swoosh links and the audio element
const links = document.querySelectorAll('.swoosh');
const audio = document.getElementById('a-on-click');

// Reusable click handler function
const clickHandler = function(e) {
  // Stop the link from navigating immediately
  e.preventDefault();
  
  // Store the target URL to use after audio plays
  const targetUrl = this.href;

  // Play the audio, then navigate once it finishes
  audio.play()
    .then(() => {
      // Listen for when the audio ends, then navigate
      audio.addEventListener('ended', function navigate() {
        window.location.href = targetUrl;
        // Clean up the listener so it doesn't interfere with future clicks
        audio.removeEventListener('ended', navigate);
      }, { once: true }); // { once: true } ensures this listener runs only once
    })
    .catch(error => {
      // If audio fails to play (e.g., autoplay restrictions), navigate anyway
      console.error('Audio play failed:', error);
      window.location.href = targetUrl;
    });
};

// Attach the handler to each swoosh link
links.forEach(link => {
  link.addEventListener('click', clickHandler);
});

What This Does #

1. querySelectorAll instead of getElementsByClassName: Returns a static NodeList that works safely with forEach, avoiding the extra property issues of HTMLCollection.
2. e.preventDefault(): Blocks the link's default jump behavior so the audio can play first.
3. Promise-based audio play: Handles modern browser autoplay restrictions (browsers often block audio unless the user has interacted with the page first).
4. ended event listener: Triggers navigation only after the audio finishes playing, with automatic cleanup of the listener.
5. Error handling: If the audio can't play (network issue, autoplay block), the link still navigates so users don't get stuck.

Bonus: Fix Autoplay Restrictions #

Some browsers block audio playback until the user interacts with the page. Add this snippet to unlock audio on the first user click:

// Unlock audio on first user interaction (bypasses autoplay restrictions)
document.addEventListener('click', function unlockAudio() {
  audio.play().catch(() => {}); // Try to play, ignore errors to avoid console noise
  document.removeEventListener('click', unlockAudio);
}, { once: true });

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