如何实现点击特定链接时播放指定音频？

Got it, let's get this working for you! Implementing click-triggered audio is straightforward—here's a simple, clean way to do it without relying on mouseover events:

Step 1: Update Your HTML #

First, we'll add identifiers to your links and audio element so we can easily target them with JavaScript:

<a href="#" class="audio-trigger">Link 1</a>
<a href="#" class="audio-trigger">Link 2</a>
<a href="#" class="audio-trigger">Link 3</a>

<audio id="click-audio">
  <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

• We added a class="audio-trigger" to each link we want to trigger the audio.
• We gave the <audio> tag an id="click-audio" so we can reference it directly in our code.

Step 2: Add the JavaScript Logic #

Next, we'll write a small script to listen for clicks on those links and play the audio:

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

// Add a click event listener to each link
triggerLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    // Prevent the default link behavior (since href is #)
    e.preventDefault();
    
    // Reset the audio to the start so clicking again plays it fresh
    audio.currentTime = 0;
    
    // Play the audio, and handle any potential errors
    audio.play().catch(error => {
      console.error('Could not play audio:', error);
    });
  });
});

Key Details: #

• Prevent Default: e.preventDefault() stops the link from jumping to the top of the page (since your href is #).
• Restart Audio: audio.currentTime = 0 ensures that every click plays the audio from the beginning, even if it was already playing.
• Error Handling: The .catch() block helps debug issues if the audio fails to load or play (like browser permissions—though click events are generally allowed by browsers for audio playback).

This setup is lightweight, works across all modern browsers, and exactly does what you need: play audio when a user clicks any of your specified links.

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