如何仅使用原生JavaScript且不借助第三方框架或库将MP3/WAV/M4A转换为AAC格式？

Great question! Since you already know your way around the Web Audio API, we can pair it with the browser's native MediaRecorder API to handle converting WAV, MP3, and M4A files to AAC—no external dependencies required. Let’s break this down with a concrete implementation starting with WAV to AAC (the most straightforward case), then cover how to adapt it for the other formats.

Key Background #

Most modern browsers support AAC encoding via MediaRecorder using the MIME type audio/mp4;codecs=mp4a.40.2 (AAC is typically wrapped in an M4A container, which is why we use this MIME type). The core flow is:

1. Read the input audio file
2. Decode it into an AudioBuffer with the Web Audio API
3. Pipe the decoded audio into a MediaRecorder configured for AAC
4. Capture the recorded AAC data and export it as a blob

WAV to AAC Implementation #

Here’s a complete, tested function along with a usage example:

// Convert WAV file to AAC blob
async function convertWavToAac(file) {
  // Step 1: Read the file as an ArrayBuffer
  const arrayBuffer = await file.arrayBuffer();

  // Step 2: Decode audio using Web Audio API
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

  // Step 3: Create a MediaStream to feed into MediaRecorder
  const destination = audioContext.createMediaStreamDestination();
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(destination);
  source.connect(audioContext.destination); // Optional: Play audio during conversion

  // Step 4: Configure MediaRecorder for AAC encoding
  const aacMimeType = 'audio/mp4;codecs=mp4a.40.2';
  if (!MediaRecorder.isTypeSupported(aacMimeType)) {
    throw new Error("Your browser doesn't support AAC encoding via MediaRecorder");
  }

  const recorder = new MediaRecorder(destination.stream, { mimeType: aacMimeType });
  const audioChunks = [];

  // Collect recorded data chunks
  recorder.addEventListener('dataavailable', (event) => {
    if (event.data.size > 0) audioChunks.push(event.data);
  });

  // Resolve promise when recording stops
  return new Promise((resolve, reject) => {
    recorder.addEventListener('stop', () => {
      const aacBlob = new Blob(audioChunks, { type: aacMimeType });
      resolve(aacBlob);
      audioContext.close(); // Clean up AudioContext resources
    });

    // Start recording and play the decoded audio to trigger capture
    recorder.start();
    source.start(0);

    // Stop recording once the audio finishes playing
    source.onended = () => recorder.stop();
  });
}

// Example: Use with a file input
document.getElementById('audio-upload').addEventListener('change', async (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile || !selectedFile.type.includes('audio/wav')) {
    alert('Please select a WAV audio file');
    return;
  }

  try {
    const aacBlob = await convertWavToAac(selectedFile);
    // Create a download link for the AAC file (saved as .m4a)
    const downloadUrl = URL.createObjectURL(aacBlob);
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    downloadLink.download = `${selectedFile.name.replace('.wav', '.m4a')}`;
    downloadLink.click();
    URL.revokeObjectURL(downloadUrl); // Clean up URL object
  } catch (error) {
    console.error('Conversion failed:', error.message);
  }
});

Adapting for MP3 and M4A #

The code above works almost identically for MP3 and M4A files—you just need to adjust the file type check:

• For MP3: Check selectedFile.type.includes('audio/mpeg')
• For M4A: Check selectedFile.type.includes('audio/mp4')

The Web Audio API can natively decode MP3 and M4A (AAC-encoded) files in all modern browsers, so the decoding step requires no changes.

Important Notes #

• Browser Compatibility: MediaRecorder with AAC support works in Chrome, Firefox, Edge, and Safari 14.1+. Always check support with MediaRecorder.isTypeSupported() before proceeding.
• Metadata Loss: This method doesn’t preserve audio metadata (like artist names or track titles). If you need to retain metadata, you’d have to manually parse it from the original file (using ArrayBuffer manipulation) and inject it into the AAC blob—this is more complex and requires handling specific file formats.
• Performance: Converting large audio files may cause temporary UI lag, as decoding and recording happen on the main thread. For larger files, consider using Web Workers (though integrating Web Audio API with Workers has limitations).

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