如何使用JavaScript AudioContext生成钢琴、长笛等乐器类声音？

Great question! The sine wave your playTone function uses is the simplest audio waveform, but real instruments like pianos or flutes have unique, complex timbres (the "color" of the sound) made up of multiple harmonics, attack/decay envelopes, and subtle variations. Here's how you can replicate those sounds with Web Audio API:

Your current basic tone generator:

function playTone(freq, duration, delay= 0) { 
  const osc = ctx.createOscillator(); 
  osc.type = "sine"; 
  osc.frequency.value = freq; 
  const gain = ctx.createGain(); 
  gain.gain.setValueAtTime(0.2, ctx.currentTime + delay); 
  osc.connect(gain).connect(ctx.destination); 
  osc.start(ctx.currentTime + delay); 
  osc.stop(ctx.currentTime + delay + duration); 
}

1. Add Harmonics with Additive Synthesis (Simple Instrument Emulation) #

Most instruments don't produce a pure sine wave—they mix multiple frequencies (harmonics) at different volumes. For example:

• A flute is close to a sine wave but has soft higher harmonics.
• A piano has a rich mix of harmonics that decay at different rates.

You can mimic this by stacking multiple oscillators with different frequencies and gains. Here's a modified function for a "piano-like" tone:

function playPianoTone(freq, duration, delay = 0) {
  const baseGain = 0.15;
  
  // Create 4 harmonics (base frequency + 2nd, 3rd, 4th overtones)
  for (let i = 1; i <= 4; i++) {
    const osc = ctx.createOscillator();
    osc.type = i === 1 ? "triangle" : "sine"; // Base uses triangle for warmer tone
    osc.frequency.value = freq * i;
    
    const gain = ctx.createGain();
    // Lower gain for higher harmonics
    gain.gain.setValueAtTime(baseGain / i, ctx.currentTime + delay);
    
    // Add a quick attack/decay to mimic piano's hammer strike
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + duration);
    
    osc.connect(gain).connect(ctx.destination);
    osc.start(ctx.currentTime + delay);
    osc.stop(ctx.currentTime + delay + duration);
  }
}

For a flute, you'd use mostly sine waves with very subtle higher harmonics and a slower attack:

function playFluteTone(freq, duration, delay = 0) {
  const osc = ctx.createOscillator();
  osc.type = "sine";
  osc.frequency.value = freq;
  
  const gain = ctx.createGain();
  // Slow attack to mimic blowing into a flute
  gain.gain.setValueAtTime(0, ctx.currentTime + delay);
  gain.gain.linearRampToValueAtTime(0.2, ctx.currentTime + delay + 0.1);
  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + duration);
  
  // Add a soft 2nd harmonic
  const osc2 = ctx.createOscillator();
  osc2.type = "sine";
  osc2.frequency.value = freq * 2;
  const gain2 = ctx.createGain();
  gain2.gain.setValueAtTime(0.05, ctx.currentTime + delay + 0.05);
  gain2.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + duration);
  
  osc.connect(gain).connect(ctx.destination);
  osc2.connect(gain2).connect(ctx.destination);
  
  osc.start(ctx.currentTime + delay);
  osc2.start(ctx.currentTime + delay);
  osc.stop(ctx.currentTime + delay + duration);
  osc2.stop(ctx.currentTime + delay + duration);
}

2. Sample-Based Synthesis (Most Realistic) #

For the most authentic sounds, use audio samples—recordings of actual instruments playing specific notes. You load these samples into Web Audio's AudioBufferSourceNode and play them at the correct pitch.

Here's a basic example of loading a piano sample and playing it:

async function loadPianoSample(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  return await ctx.decodeAudioData(arrayBuffer);
}

async function playSampledPiano(noteFreq, sampleBuffer, delay = 0) {
  const source = ctx.createBufferSource();
  source.buffer = sampleBuffer;
  
  // Adjust playback rate to match the desired note frequency
  // Assuming the sample is recorded at A4 (440Hz)
  const sampleBaseFreq = 440;
  source.playbackRate.value = noteFreq / sampleBaseFreq;
  
  const gain = ctx.createGain();
  gain.gain.setValueAtTime(0.3, ctx.currentTime + delay);
  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + 2);
  
  source.connect(gain).connect(ctx.destination);
  source.start(ctx.currentTime + delay);
}

// Usage:
// const pianoA4Buffer = await loadPianoSample("path/to/piano-a4.wav");
// playSampledPiano(440, pianoA4Buffer);

You'll need a library of instrument samples (one per note, or use pitch-shifting for fewer samples) for full coverage.

3. Use Web Audio Libraries (Simpler Development) #

If you don't want to build everything from scratch, use libraries that handle instrument synthesis out of the box:

• Tone.js: A powerful library for audio synthesis with built-in instrument presets (piano, flute, synth, etc.)
• Howler.js: Great for sample-based audio playback with easy pitch adjustment

Example with Tone.js for a piano sound:

// First include Tone.js in your project
// <script src="https://cdn.jsdelivr.net/npm/tone@14.8.49/build/Tone.min.js"></script>

async function playToneJsPiano(freq, duration) {
  await Tone.start();
  const piano = new Tone.Sampler({
    urls: {
      "C4": "C4.mp3",
      "D4": "D4.mp3",
      // Add more notes as needed
    },
    release: 1,
    baseUrl: "path/to/piano-samples/"
  }).toDestination();
  
  piano.triggerAttackRelease(Tone.Frequency(freq).toNote(), duration);
}

This takes care of envelope shaping, sample loading, and pitch adjustment automatically.

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