63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { Box, Typography, IconButton, Slider, useTheme } from '@mui/material';
|
|
import { PlayArrow, Pause, VolumeUp } from '@mui/icons-material';
|
|
import { useRef, useState } from 'react';
|
|
|
|
export default function AudioPlayer({ src, title }: { src: string; title: string }) {
|
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
|
const [playing, setPlaying] = useState(false);
|
|
const [volume, setVolume] = useState(100);
|
|
const theme = useTheme();
|
|
|
|
const togglePlay = () => {
|
|
const audio = audioRef.current;
|
|
if (!audio) return;
|
|
if (playing) {
|
|
audio.pause();
|
|
} else {
|
|
audio.play();
|
|
}
|
|
setPlaying(!playing);
|
|
};
|
|
|
|
const handleVolumeChange = (event: Event, newValue: number | number[]) => {
|
|
const audio = audioRef.current;
|
|
if (!audio) return;
|
|
const vol = typeof newValue === 'number' ? newValue : newValue[0];
|
|
setVolume(vol);
|
|
audio.volume = vol / 100;
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
bgcolor: theme.palette.background.paper,
|
|
p: 2,
|
|
borderRadius: 2,
|
|
boxShadow: 3,
|
|
width: '100%',
|
|
maxWidth: 400,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
<Typography variant="subtitle1" gutterBottom>{title}</Typography>
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<IconButton onClick={togglePlay}>
|
|
{playing ? <Pause /> : <PlayArrow />}
|
|
</IconButton>
|
|
<VolumeUp />
|
|
<Slider
|
|
value={volume}
|
|
onChange={handleVolumeChange}
|
|
aria-label="Volume"
|
|
sx={{ width: 100 }}
|
|
/>
|
|
</Box>
|
|
<audio ref={audioRef} src={src} onEnded={() => setPlaying(false)} />
|
|
</Box>
|
|
);
|
|
} |