如何用JavaScript实现类似Python Pydub的音频定时重复导出功能？

Absolutely doable! You can replicate your Pydub workflow directly in JavaScript using the Web Audio API, which lets you manipulate audio with millisecond precision. Here’s how to load your MP3 sample, stitch it according to your time points, and export the final 1-minute audio file to your desktop:

Step 1: Load the MP3 Sample #

First, we need to fetch and decode the MP3 file into an AudioBuffer—this is the raw audio data we’ll work with. You can load it from a URL or a user-uploaded local file:

async function loadAudioSource(source) {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  let arrayBuffer;

  // Handle local file upload
  if (source instanceof File) {
    arrayBuffer = await source.arrayBuffer();
  } 
  // Handle remote URL
  else {
    const response = await fetch(source);
    arrayBuffer = await response.arrayBuffer();
  }

  return await audioContext.decodeAudioData(arrayBuffer);
}

Step 2: Stitch the Audio at Your Time Points #

Next, we’ll create a new 1-minute audio buffer and copy the sample into each position defined by your millisecond time point array. We’ll ensure we don’t exceed the 60-second target:

async function stitchAudioSample(sampleBuffer, timePointsMs) {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const sampleRate = sampleBuffer.sampleRate;
  const targetDurationMs = 60000; // 1 minute
  const targetSampleLength = Math.floor(targetDurationMs * sampleRate / 1000);

  // Create empty output buffer
  const outputBuffer = audioContext.createBuffer(
    sampleBuffer.numberOfChannels,
    targetSampleLength,
    sampleRate
  );

  // Copy sample to each specified time point
  for (const timeMs of timePointsMs) {
    const startSamplePos = Math.floor(timeMs * sampleRate / 1000);
    const endSamplePos = startSamplePos + sampleBuffer.length;

    // Stop if we'd exceed the 1-minute mark
    if (endSamplePos > targetSampleLength) break;

    // Copy data across all audio channels
    for (let channel = 0; channel < sampleBuffer.numberOfChannels; channel++) {
      const outputChannelData = outputBuffer.getChannelData(channel);
      const sampleChannelData = sampleBuffer.getChannelData(channel);
      outputChannelData.set(sampleChannelData, startSamplePos);
    }
  }

  return outputBuffer;
}

Step 3: Export the Final MP3 to Desktop #

We’ll use the MediaRecorder API to convert our processed audio buffer into a downloadable MP3 file. This works in most modern browsers:

async function exportToMP3(audioBuffer, filename = "stitched_1min_audio.mp3") {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  
  // Connect buffer to a media stream destination
  const sourceNode = audioContext.createBufferSource();
  sourceNode.buffer = audioBuffer;
  const streamDestination = audioContext.createMediaStreamDestination();
  sourceNode.connect(streamDestination);

  // Set up MediaRecorder for MP3 output
  const mediaRecorder = new MediaRecorder(streamDestination.stream, { 
    mimeType: 'audio/mpeg' 
  });

  const audioChunks = [];
  mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
  mediaRecorder.onstop = () => {
    // Create download link
    const audioBlob = new Blob(audioChunks, { type: 'audio/mpeg' });
    const downloadUrl = URL.createObjectURL(audioBlob);
    const downloadLink = document.createElement('a');
    
    downloadLink.href = downloadUrl;
    downloadLink.download = filename;
    downloadLink.click();

    // Clean up
    URL.revokeObjectURL(downloadUrl);
    audioContext.close();
  };

  // Start recording and playback
  sourceNode.start();
  mediaRecorder.start();

  // Stop recording once the full buffer plays
  setTimeout(() => {
    mediaRecorder.stop();
    sourceNode.stop();
  }, audioBuffer.duration * 1000);
}

Putting It All Together #

Here’s how to run the full workflow, either with a remote URL or a local file upload:

For Remote MP3 Sample:

async function runWorkflowWithURL() {
  const sampleUrl = "https://example.com/your-2sec-sample.mp3"; // Replace with your URL
  const timePoints = [0, 2000, 4000, 6000, 8000, ...]; // Your millisecond time points
  
  const sampleBuffer = await loadAudioSource(sampleUrl);
  const stitchedBuffer = await stitchAudioSample(sampleBuffer, timePoints);
  await exportToMP3(stitchedBuffer);
}

// Run when the page loads
document.addEventListener('DOMContentLoaded', runWorkflowWithURL);

For Local File Upload:

Add this HTML to your page:

<input type="file" id="audioUpload" accept="audio/mp3">
<button onclick="runWorkflowWithUpload()">Process & Download</button>

Then add this function:

async function runWorkflowWithUpload() {
  const fileInput = document.getElementById('audioUpload');
  const sampleFile = fileInput.files[0];
  
  if (!sampleFile) {
    alert("Please select an MP3 file first!");
    return;
  }

  const timePoints = [0, 2000, 4000, 6000, 8000, ...]; // Your time points
  
  const sampleBuffer = await loadAudioSource(sampleFile);
  const stitchedBuffer = await stitchAudioSample(sampleBuffer, timePoints);
  await exportToMP3(stitchedBuffer);
}

Key Notes #

• Browser Compatibility: MediaRecorder with MP3 support works in Chrome, Edge, Firefox, and Safari 14.1+.
• Time Point Validation: Make sure your time points don’t cause the sample to exceed the 1-minute mark—our code automatically stops copying if that happens.
• Precision: The Web Audio API operates at sample-level precision, so your millisecond time points will be accurately translated.

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