音乐生成应用开发问题：点击生成按钮后音频全部同时播放，如何实现单音频依次播放？

Hey there! I see the issue you're running into—let's break down why all your notes are playing at once and fix it step by step.

Why Your Current Code Plays All Notes Simultaneously #

The problem boils down to how JavaScript handles audio playback:

• The play() method on an Audio object is asynchronous—it starts the audio but doesn't pause your code execution.
• Your for loop runs in a split second, creating 100 Audio instances and calling play() on every single one immediately. The browser receives all these play requests at nearly the same time, so all notes start together.
• Your inner for loop (set to run once) doesn't change this behavior—it just adds an unnecessary layer without any blocking logic.

Solution 1: Use Async/Await with Promises (Cleanest Approach) #

We can wrap each note's playback in a Promise that resolves when the audio finishes, then use async/await to wait for each note to end before playing the next.

// Your note paths (added file extensions for clarity)
const melody_notes = ['A3.mp3', 'A4.mp3', 'A5.mp3', 'A6.mp3', 'B3.mp3', 'B4.mp3', 'B5.mp3', 'B6.mp3', 'C3.mp3', 'C4.mp3', 'C5.mp3', 'C6.mp3', 'D3.mp3', 'D4.mp3', 'D5.mp3', 'D6.mp3', 'E3.mp3', 'E4.mp3', 'E5.mp3', 'E6.mp3', 'F3.mp3', 'F4.mp3', 'F5.mp3', 'F6.mp3', 'G3.mp3', 'G4.mp3', 'G5.mp3', 'G6.mp3'];

// Helper function to play a single note and return a Promise
function playNote(notePath) {
  return new Promise((resolve) => {
    const note = new Audio(notePath);
    // Resolve the promise when the audio finishes playing
    note.addEventListener('ended', resolve, { once: true });
    note.play();
  });
}

// Async function to generate sequential notes
async function generate() {
  for (let a = 0; a < 100; a++) {
    // Pick a random note
    const pick = Math.floor(Math.random() * melody_notes.length);
    // Wait for the current note to finish before moving to the next
    await playNote(melody_notes[pick]);
  }
}

How This Works: #

• playNote creates an Audio instance, listens for its ended event (which fires when playback finishes), and resolves the promise once that event triggers. The { once: true } option ensures the event listener is removed after it runs, preventing memory leaks.
• The generate function is marked async, so we can use await inside the loop. This pauses the loop until the current note's promise resolves—meaning the next note won't start until the previous one ends.

Solution 2: Recursive Playback (No Async/Await Needed) #

If you prefer not to use async/await, you can use a recursive function to play notes one after another:

const melody_notes = ['A3.mp3', 'A4.mp3', ...]; // Your full list here

function generate() {
  let noteCount = 0;
  const totalNotes = 100;

  function playNextNote() {
    // Stop if we've played all 100 notes
    if (noteCount >= totalNotes) return;

    // Pick and play a random note
    const pick = Math.floor(Math.random() * melody_notes.length);
    const note = new Audio(melody_notes[pick]);
    
    // When the note finishes, increment the count and play the next one
    note.addEventListener('ended', () => {
      noteCount++;
      playNextNote();
    }, { once: true });

    note.play();
  }

  // Start the first note
  playNextNote();
}

How This Works: #

• playNextNote checks if we've reached our 100-note limit. If not, it plays a random note.
• When the note finishes, the ended event triggers, incrementing our count and calling playNextNote again to start the next note.

Bonus: Preload Audio for Smoother Playback #

To avoid delays when playing notes for the first time (since browsers need to load audio files), you can preload all your notes upfront:

// Preload all audio files when the page loads
const melody_notes = ['A3.mp3', 'A4.mp3', ...];
const preloadedNotes = melody_notes.map(path => {
  const audio = new Audio(path);
  audio.load(); // Trigger preloading
  return audio;
});

// Update the playNote function to use preloaded instances
function playNote(noteIndex) {
  return new Promise((resolve) => {
    const note = preloadedNotes[noteIndex];
    note.currentTime = 0; // Reset playback to the start (in case it was played before)
    note.addEventListener('ended', resolve, { once: true });
    note.play();
  });
}

This ensures each audio file is loaded and ready to play instantly when you call play().

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