如何为MediaSource Analyser Node接入本地文件？验证Python与JS FFT一致性

Absolutely! You can absolutely feed a local 48kHz WAV file into the Web Audio API's AnalyserNode instead of using microphone input—this is perfect for your side-by-side FFT comparison test. Let me walk you through exactly how to do this, and how to align the setup with your Python code for accurate, apples-to-apples comparisons.

Here's a complete, working implementation that lets you load your local WAV file, pipe it through an AnalyserNode, and capture the exact FFT data you need for testing:

Step 1: Basic HTML Setup #

First, add a file selector and a start button (browsers require user interaction to initialize audio contexts for security):

<input type="file" id="audioFile" accept=".wav">
<button id="startAnalysis">Start FFT Analysis</button>
<pre id="fftOutput"></pre>

Step 2: JavaScript Logic to Process the Audio #

This code handles file loading, audio decoding, and connecting the audio buffer directly to the AnalyserNode:

let audioContext;
let analyserNode;

// Initialize audio context on user click (browser security rule)
document.getElementById('startAnalysis').addEventListener('click', async () => {
  if (!audioContext) {
    // Match your WAV file's 48kHz sample rate to avoid resampling
    audioContext = new AudioContext({ sampleRate: 48000 });
    analyserNode = audioContext.createAnalyser();
    
    // Critical: Match these parameters to your Python FFT code
    analyserNode.fftSize = 2048; // Use the same FFT size as your Python code (must be power of 2)
    analyserNode.smoothingTimeConstant = 0; // Disable smoothing for raw, unfiltered FFT data
  }

  const file = document.getElementById('audioFile').files[0];
  if (!file) {
    alert('Please select a WAV file first!');
    return;
  }

  // Read the file as an ArrayBuffer
  const arrayBuffer = await file.arrayBuffer();
  // Decode the audio into an AudioBuffer (raw PCM data)
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

  // Create a source node to play back the decoded audio buffer
  const sourceNode = audioContext.createBufferSource();
  sourceNode.buffer = audioBuffer;
  
  // Connect the source directly to the AnalyserNode
  sourceNode.connect(analyserNode);
  // Optional: Connect to audio destination if you want to hear the file
  analyserNode.connect(audioContext.destination);

  // Start playing the audio
  sourceNode.start();

  // Capture FFT data once the audio finishes playing
  sourceNode.onended = () => {
    const fftData = new Float32Array(analyserNode.frequencyBinCount);
    analyserNode.getFloatFrequencyData(fftData);
    
    // Log the data (you can copy this to your Python script for comparison)
    document.getElementById('fftOutput').textContent = `Raw FFT Data (dB):\n${fftData.slice(0, 25).join(', ')}...`;
  };
});

To ensure your JS and Python outputs are directly comparable, keep these key points in mind:

• Match core FFT parameters: Make sure analyserNode.fftSize is identical to the FFT size used in your Python code (must be a power of 2 between 32 and 32768). Set smoothingTimeConstant to 0 to get unsmoothed, raw frequency data (matching typical Python FFT outputs).
• Convert data formats: The AnalyserNode returns values in decibels (dB), while your Python FFT will likely output linear amplitude values. Convert Python's amplitude data to dB using:

  import math
  db_values = [20 * math.log10(amp / 1.0) for amp in python_fft_amplitudes]
  

  (Use 1.0 as the reference for normalized audio data.)
• Avoid resampling: By setting AudioContext to 48kHz (matching your WAV file's rate), you ensure the audio isn't resampled before analysis—this keeps the input data identical to what your Python code will process.

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