function mixToOverlay(audioBuffer1, audioBuffer2) {

  const silenceDuration = 3; // 3 seconds of silence

  const audioContext = new (window.AudioContext || window.webkitAudioContext)();

​

  // Create a 3-second silent buffer

  const silentBuffer = audioContext.createBuffer(

    1, // Mono

    audioBuffer1.sampleRate * silenceDuration,

    audioBuffer1.sampleRate

  );

​

  // Get the channel data of the silent buffer

  const silentChannelData = silentBuffer.getChannelData(0);

​

  // Combine silent buffer, audioBuffer1, and another silent buffer

  const totalLength =

    silentChannelData.length + audioBuffer1.length + silentChannelData.length;

  const mergedChannelData = new Float32Array(totalLength).fill(0);

​

  mergedChannelData.set(silentChannelData, 0); // Copy silent buffer at the beginning

  mergedChannelData.set(

    audioBuffer1.getChannelData(0),

    silentChannelData.length

  ); // Copy audioBuffer1

  mergedChannelData.set(

    silentChannelData,

    silentChannelData.length + audioBuffer1.length

  ); // Copy silent buffer at the end

​

  // Create the overlayBuffer

  const overlayBuffer = audioContext.createBuffer(

    1, // Mono

    totalLength,

    audioBuffer1.sampleRate

  );

​

  // Set the merged audio data to the overlayBuffer

  overlayBuffer.getChannelData(0).set(mergedChannelData);

​

  // Mix the overlayBuffer with audioBuffer2

  const mixedLength = Math.min(overlayBuffer.length, audioBuffer2.length);

  const mixedChannelData = new Float32Array(mixedLength);

​

  for (let i = 0; i < mixedLength; i++) {

    mixedChannelData[i] =

      overlayBuffer.getChannelData(0)[i] + audioBuffer2.getChannelData(0)[i];

  }

​

  // Create the mixedBuffer

  const mixedBuffer = audioContext.createBuffer(

    1, // Mono

    mixedLength,

    audioBuffer2.sampleRate

  );

​

  // Set the mixed audio data to the mixedBuffer

  mixedBuffer.getChannelData(0).set(mixedChannelData);

​

  return mixedBuffer;

}