一首歌在反应音频播放器中结束后，我想播放下一首歌曲。我已经获得了指向数组的所有歌曲链接，但不确定如何实现 func

Posted 2023-02-19

【中文标题】一首歌在反应音频播放器中结束后，我想播放下一首歌曲。我已经获得了指向数组的所有歌曲链接，但不确定如何实现 func

【英文标题】：After a song ends in react audio player I want to play the next song. I've gotten all the song links to an array but not sure how to implement a func

【发布时间】：2022-01-16 02:42:12

【问题描述】：

组件的样子：

import  useEffect, useState  from 'react';
import  useDispatch, useSelector  from 'react-redux';

import  deleteSong, getSongs, updateSong  from '../../store/song';

import ReactAudioPlayer from 'react-audio-player';
import  useHistory  from 'react-router';
import SongForm from '../AddSongForm';
import EditSongForm from '../EditSongForm';
import SpecificSong from '../SpecificSong';
import './SongList.css'

const SongList = () => 
    const dispatch = useDispatch();

    useEffect(() => 
        dispatch(getSongs());
    , [dispatch]);

    const [addShowForm, setAddShowForm] = useState(false);
    const [currentlyPlayingSong, setCurrentlyPlayingSong] = useState('')

    const history = useHistory()

    const songsObj = useSelector((state) => state.songState.entries);
    const songs = Object.values(songsObj)


    const allsonglinks = []
    songs.map(song => 
        allsonglinks.push(song.songLink)
    )
    const playnext = (links) => 
        let nowplaying = links[0]
        links.shift()
        return nowplaying
    


    const user = useSelector((state) => state.session.user);
    const CurrentUserId = user?.id

    const remove = (e) => 
        dispatch(deleteSong(e.target.id));
    


    const addFormCheck = (e) => 
        if (addShowForm) setAddShowForm(false)
        if (!addShowForm) setAddShowForm(true)
    
    // const editFormCheck = (e) => 
    //     if (editShowForm) setEditShowForm(false)
    //     if (!editShowForm) setEditShowForm(true)
    // 


    return (
        <div>
            <h1 className='listtitle'>Hear what’s trending for free in the SoundFi community
            </h1>
            /* <button onClick=addFormCheck>add a song</button> */
            CurrentUserId &&
                <div className='hiddenmessage'>
                    <p className='addsongmessage'>Or upload your own
                        <SongForm setAddShowForm=setAddShowForm />
                    </p>
                </div>
            
            <ol className='songlist'>
                songs.map(( id, songName, songLink, userId, albumImage ) => (
                    <div className='singlesong'>
                        <SpecificSong id=id songName=songName songLink=songLink userId=userId albumImage=albumImage />
                    </div>
                ))
            </ol>
            <div>
                playall songs
                <ReactAudioPlayer
                    className='playallaudioplayer'
                    src=allsonglinks[0]
                    controls
                    key=allsonglinks[0]
                    onEnded=playnext(allsonglinks)
                />
            </div>
        </div >
    );
;
export default SongList;

“播放所有歌曲”是我正在尝试使用的，我基本上只是想把网站上的所有歌曲都拿走，然后在歌曲结束后一个接一个地播放。我尝试编写一个函数（playnext），但它不能正常工作。我不确定是否需要更多地关注状态或创建新组件。

【参考方案1】：

我认为您应该能够通过保持当前播放歌曲的状态来实现这一点。

// After populating allsonglinks, initialise a state with 0th index of your allsongLink
const [currentlyPlayingSong, setCurrentlyPlayingSong] = useState(allsonglinks[0]);

const playnext = (links) => 
        let nowplaying = links[0]
        links.shift()
        setCurrentlyPlayingSong(links[0]);
    

// .... In your render, update the src to point to the currentPlayingSong 

return (
        <div>
            <h1 className='listtitle'>Hear what’s trending for free in the SoundFi community
            </h1>
            /* <button onClick=addFormCheck>add a song</button> */
            CurrentUserId &&
                <div className='hiddenmessage'>
                    <p className='addsongmessage'>Or upload your own
                        <SongForm setAddShowForm=setAddShowForm />
                    </p>
                </div>
            
            <ol className='songlist'>
                songs.map(( id, songName, songLink, userId, albumImage ) => (
                    <div className='singlesong'>
                        <SpecificSong id=id songName=songName songLink=songLink userId=userId albumImage=albumImage />
                    </div>
                ))
            </ol>
            <div>
                playall songs
                <ReactAudioPlayer
                    className='playallaudioplayer'
                    src=currentlyPlayingSong
                    controls
                    key=currentlyPlayingSong
                    onEnded=playnext(allsonglinks)
                />
            </div>
        </div >
    );