需要帮助在我的音乐播放器组件中播放歌曲

Question

我为我正在进行的项目创建了一个音乐播放器组件，但我似乎无法让它播放我正在传递的歌曲阵列。

当我刚从同一个组件中传递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 Music

import 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

Answer 1

我很确定songs数组没有songFile属性

const songFiles = songs.map(song => song.songFile)