front/src/components/AudioPlayer.tsx

import React, { useMemo, useEffect } from 'react';
import { blobFromAudioBuffer } from '../utils/utils';

interface AudioPlayerProps {
  audioBuffer: AudioBuffer;
  filename?: string; // Optional filename prop
}

export const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioBuffer, filename = 'podcast.wav' }) => {
  // Create a Blob URL from the audioBuffer.
  const blobUrl = useMemo(() => {
    const wavBlob = blobFromAudioBuffer(audioBuffer);
    return URL.createObjectURL(wavBlob);
  }, [audioBuffer]);


  // Clean up the object URL when the component unmounts or audioBuffer changes.
  useEffect(() => {
    return () => {
      URL.revokeObjectURL(blobUrl);
    };
  }, [blobUrl]);

  return (
    <div className="mt-4 flex items-center">

      <audio controls src={blobUrl}>

        Your browser does not support the audio element.

      </audio>



      <a

        className="btn btn-sm btn-primary ml-2"

        href={blobUrl} // Use the same blobUrl for download

        download={filename}

      >

        Download

      </a>

    </div>
  );
};