【发布时间】：2022-09-24 21:13:28
【问题描述】：
我为我正在处理的项目创建了一个音乐播放器组件，但我似乎无法让它播放我也传递给它的一系列歌曲。
当我刚刚将同一组件中的 mp3 文件传递给它时，它工作正常，但现在它不起作用，因为我将它传递给一个对象。我想当我收到道具时我可能会错误地解构它。
任何帮助表示赞赏！
import React from \'react\'
//Components
import MusicPlayer from \'../components/MusicPlayer\';
//Song Images
import Drake from \'../images/Drake.jpg\'
import Adelle from \'../images/adelle.png\'
import Elvis from \'../images/Elvis_hounddog.jpg\'
//Song files
import DrakeOneDance from \'../music/Drake_One_Dance.mp3\'
import AdelleHello from \'../music/Adele_Hello.mp3\'
import ElvisHoundDog from \'../music/Elvis.mp3\'
//Song array
const songs = [
{
artist: \'Drake\',
songName: \'One Dance\',
poster: Drake,
songFile: DrakeOneDance
},
{
artist: \'Adelle\',
songName: \'Hello\',
poster: Adelle,
songFile: AdelleHello
},
{
artist: \'Elvis\',
songName: \'Hound Dog\',
poster: Elvis,
songFile: ElvisHoundDog
},
]
function Music() {
return (
<div className=\'music-container\'>
<MusicPlayer songs={songs}/>
</div>
);
}
export default Musicimport React, { useState, useEffect, useRef } from \'react\'
// MUI ICONS
import { Slider } from \'@mui/material\';
import SkipPreviousIcon from \'@mui/icons-material/SkipPrevious\';
import SkipNextIcon from \'@mui/icons-material/SkipNext\';
import PlayArrowIcon from \'@mui/icons-material/PlayArrow\';
import PauseIcon from \'@mui/icons-material/Pause\';
import VolumeDownIcon from \'@mui/icons-material/VolumeDown\';
import VolumeUpIcon from \'@mui/icons-material/VolumeUp\';
import VolumeOffIcon from \'@mui/icons-material/VolumeOff\';
import VolumeMuteIcon from \'@mui/icons-material/VolumeMute\';
import IconButton from \'@mui/material/IconButton\'
// This is what I was initially passing it
//Music
// import Elvis from \'../music/Elvis.mp3\'
// import Fade from \'../music/Fade.mp3\'
// import Drake from \'../music/Drake_One_Dance.mp3\'
// const playList = [Drake, Elvis, Fade]
function MusicPlayer({songs}) {
//Song Files
const songFiles = songs.songFile;
//Hooks
const audioPlayer = useRef()
//State
const [index, setIndex] = useState(0);
const [currentSong] = useState(songFiles[index]);
const [isPlaying, setisPlaying] = useState(false);
const [volume, setVolume] = useState(30);
const [mute, setMute] = useState(false);
useEffect(() => {
if(audioPlayer) {
audioPlayer.current.volume = volume / 100;
}
}, [volume]);
function togglePlay() {
if(!isPlaying) {
audioPlayer.current.play()
} else {
audioPlayer.current.pause()
}
// setisPlaying(prev => !prev)
setisPlaying(isPlaying => !isPlaying)
}
function toggleSkipForward() {
if(index >= songFiles.length - 1) {
setIndex(0);
audioPlayer.current.src = songFiles[0];
audioPlayer.current.play();
} else {
setIndex(prev => prev + 1);
audioPlayer.current.src = songFiles[index + 1];
audioPlayer.current.play();
}
}
function toggleSkipBackward() {
if(index > 0) {
setIndex(prev => prev -1);
audioPlayer.current.src = songFiles[index -1];
audioPlayer.current.play();
}
}
function VolumeBtns() {
return mute
? <VolumeOffIcon sx={{color: \'lime\', \'&:hover\': {color: \'white\'}}} onClick={() => setMute(!mute)} />
: volume <= 20 ? <VolumeMuteIcon sx={{color: \'lime\', \'&:hover\': {color: \'white\'}}} onClick={() => setMute(!mute)} />
: volume <= 75 ? <VolumeDownIcon sx={{color: \'lime\', \'&:hover\': {color: \'white\'}}} onClick={() => setMute(!mute)} />
: <VolumeUpIcon sx={{color: \'lime\', \'&:hover\': {color: \'white\'}}} onClick={() => setMute(!mute)} />
}
return (
<div className=\'music-player-container\'>
<audio src={currentSong} ref={audioPlayer} muted={mute} />
<div className=\"controls\">
<div className=\"volume\">
<IconButton>
<VolumeBtns />
</IconButton>
<Slider min={0} max={100} value={volume} onChange={(e,v) => setVolume(v)}
defaultValue={50}
sx={{
width: 100,
color: \'success.main\',
margin: \'20px\',
}} />
</div>
<div className=\"control-panel\">
<IconButton onClick={toggleSkipBackward}>
<SkipPreviousIcon
sx={{
margin: \'10px\',
cursor: \'pointer\',
color: \'silver\', \'&:hover\': {color: \'blue\'}
}} />
</IconButton>
{/* Play/Pause */}
{!isPlaying
? <IconButton onClick={togglePlay}>
<PlayArrowIcon sx={{ margin: \'10px\', cursor: \'pointer\', color: \'silver\', \'&:hover\': {color: \'blue\'} }} />
</IconButton>
: <IconButton onClick={togglePlay}>
<PauseIcon sx={{ margin: \'10px\', cursor: \'pointer\', color: \'silver\', \'&:hover\': {color: \'blue\'} }} />
</IconButton>
}
{/* Play/Pause */}
<IconButton onClick={toggleSkipForward}>
<SkipNextIcon
sx={{
margin: \'10px\',
cursor: \'pointer\',
color: \'silver\', \'&:hover\': {color: \'blue\'}
}} />
</IconButton>
</div>
</div>
</div>
)
}
export default MusicPlayer标签： reactjs