File size: 1,249 Bytes
8e0957b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import React, { useMemo, useEffect } from 'react';
import { audioBufferToWav, blobFromAudioBuffer } from '../utils/utils';
import { encode } from 'base64-arraybuffer';
interface AudioPlayerProps {
audioBuffer: AudioBuffer;
}
export const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioBuffer }) => {
// Create a Blob URL from the audioBuffer.
const blobUrl = useMemo(() => {
const wavBlob = blobFromAudioBuffer(audioBuffer);
return URL.createObjectURL(wavBlob);
}, [audioBuffer]);
const downloadUrl = useMemo(() => {
const wavArrayBuffer = audioBufferToWav(audioBuffer, { float32: false });
const base64 = encode(wavArrayBuffer);
return `data:audio/wav;base64,${base64}`;
}, [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={downloadUrl}
download={'podcast.wav'}
>
Download
</a>
</div>
);
};
|