基于React+Ant Design实现的仿网易云音乐官网网站

    const changeMusic = (tag) => {
        dispatch(changeCurrentIndexAndSongAction(tag))
    }

    const handleMusicEnded = () => {
        if(sequence === 2){ //单曲循环
            audioRef.current.current = 0
            audioRef.current.play()
        }else{
            dispatch(changeCurrentIndexAndSongAction(1))
        }
    }

export const changeCurrentIndexAndSongAction = (tag) => {
    return (dispatch, getState) => {
        const playList = getState().getIn(["player", "playList"])
        const sequence = getState().getIn(["player", "sequence"])
        let currentSongIndex = getState().getIn(["player", "currentSongIndex"])

        switch (sequence) {
            case 1: // 随机播放
                let randomIndex = Math.floor(Math.random() * playList.length)
                while (randomIndex === currentSongIndex) {
                    randomIndex = Math.floor(Math.random() * playList.length)
                }
                currentSongIndex = randomIndex
                break;
            default: //循序播放
                currentSongIndex = currentSongIndex + tag
                if (currentSongIndex >= playList.length) {
                    currentSongIndex = 0
                }
                if (currentSongIndex < 0) {
                    currentSongIndex = playList.length - 1
                }
        }

        const currentSong = playList[currentSongIndex]
        dispatch(changeCurrentSongAction(currentSong))
        dispatch(changeCurrentSongIndexAction(currentSongIndex))

        dispatch(getLyricAction(currentSong.id))
    }
}

    // 滑动条拖动时发生的回调
    const slideChange = useCallback((value) => {
        setIsChanging(true)

        // 随着拖动，当前时间发生更改
        const currentTime = value / 100 * duration / 1000
        setCurrentTime(currentTime * 1000)
        setProgess(value)
    }, [duration])

    // 滑动条结束拖动时发生的回调
    const slideAfterChange = useCallback((value) => {
        const currentTime = value / 100 * duration / 1000
        audioRef.current.currentTime = currentTime
        setCurrentTime(currentTime * 1000)
        setIsChanging(false)

        if(!isPlaying){
            playMusic()
        }
    }, [duration, isPlaying, playMusic])

    const timeUpdate = (e) => {
        const currentTime = e.target.currentTime
        if (!isChanging) {
            setCurrentTime(currentTime * 1000)
            setProgess(currentTime * 1000 / duration * 100)
        }

        // 获取当前歌词
        let index = 0
        for (let i=0; i<lyricList.length; i++){
            let lyricItem = lyricList[i]
            if(lyricItem.time > currentTime * 1000){
                index = i - 1
                break
            }
        }
        // console.log();
        if (currentLyricIndex !== index) {
            dispatch(changeCurrentLyricIndexAction(index))
            let content = lyricList[index] && lyricList[index].content
            message.open({
                key: "lyric",
                content: content,
                duration: 0,
                className: "lyric-class"
            })
        }
    }

git clone https://gitee.com/junjiangLi/ljmusic.git

yarn

yarn start