网页内JS创建标签页同键盘按键触发不同音效失效问题咨询

Alright, let's break down why this is happening first: your current setup is probably binding keyboard events to audio instances globally when the page loads, without checking which tab is active. So when you switch tabs, the keydown listener still points to the first audio instance you created for that key—hence the same sound plays every time.

Here's a straightforward, pure JavaScript fix that ensures each active tab uses its own sound mapping:

Step 1: Basic HTML Structure (for context) #

First, let's assume your tabbed interface looks something like this (adjust classes/IDs to match your setup):

<div class="tab-controls">
  <button class="tab-btn active" data-tab="piano">Piano</button>
  <button class="tab-btn" data-tab="drums">Drums</button>
  <button class="tab-btn" data-tab="guitar">Guitar</button>
</div>

<div class="tab-panels">
  <div class="tab-panel active" id="piano">
    <p>Press A/S/D for piano notes!</p>
  </div>
  <div class="tab-panel" id="drums">
    <p>Press A/S/D for drum hits!</p>
  </div>
  <div class="tab-panel" id="guitar">
    <p>Press A/S/D for guitar riffs!</p>
  </div>
</div>

Step 2: Core JavaScript Logic #

This code tracks the active tab, uses per-tab sound mappings, and dynamically plays the correct sound based on which tab is active:

// 1. Define sound mappings for each tab (customize paths to your audio files)
const tabSounds = {
  piano: {
    'a': 'audio/piano_a.mp3',
    's': 'audio/piano_s.mp3',
    'd': 'audio/piano_d.mp3'
  },
  drums: {
    'a': 'audio/drum_kick.mp3',
    's': 'audio/drum_snare.mp3',
    'd': 'audio/drum_hihat.mp3'
  },
  guitar: {
    'a': 'audio/guitar_do.mp3',
    's': 'audio/guitar_re.mp3',
    'd': 'audio/guitar_mi.mp3'
  }
};

// 2. Track the currently active tab (starts with piano)
let activeTabId = 'piano';

// 3. Handle tab switching
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Remove active state from all tabs
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabPanels.forEach(panel => panel.classList.remove('active'));
    
    // Set new active tab
    activeTabId = button.dataset.tab;
    button.classList.add('active');
    document.getElementById(activeTabId).classList.add('active');
  });
});

// 4. Cache audio instances to avoid reloading files repeatedly
const audioCache = {};

// 5. Handle keyboard input with dynamic sound selection
document.addEventListener('keydown', (event) => {
  const pressedKey = event.key.toLowerCase();
  // Get the sound path for the active tab and pressed key
  const soundPath = tabSounds[activeTabId][pressedKey];
  
  if (!soundPath) return; // Exit if no sound matches the key
  
  // Get cached audio or create a new instance
  let audio = audioCache[soundPath];
  if (!audio) {
    audio = new Audio(soundPath);
    audioCache[soundPath] = audio;
  }
  
  // Reset playback position so the sound starts fresh every time
  audio.currentTime = 0;
  // Play the sound (handle browser autoplay restrictions)
  audio.play().catch(error => {
    console.warn("Couldn't play sound: ", error);
    alert("Click anywhere on the page first to enable sound playback!");
  });
});

Key Fixes Explained: #

• Dynamic Sound Selection: Instead of binding keys to fixed audio instances upfront, we look up the sound path based on the current active tab every time a key is pressed.
• Audio Caching: We reuse audio instances to avoid reloading files, which makes playback faster and smoother.
• Playback Reset: Setting audio.currentTime = 0 ensures the sound starts from the beginning even if it was already playing.

Quick Notes: #

• Browser Autoplay Rules: Modern browsers block audio playback until the user interacts with the page (like clicking). The catch block handles this with a friendly alert.
• Customization: Adjust the tabSounds object to match your keys and audio file paths. You can add more tabs or keys easily.
• UI Styling: Add CSS to make the active tab visually distinct (e.g., highlight the button and show only the active panel).

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