File size: 1,154 Bytes
8e0957b 50025c3 8e0957b c3f0f02 8e0957b c3f0f02 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 |
import React, { useMemo, useEffect } from 'react';
import { blobFromAudioBuffer } from '../utils/utils';
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 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);
URL.revokeObjectURL(downloadUrl);
};
}, [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>
);
};
|