React + Vite 实现一个音乐网站（aplayer音乐播放器）

最新推荐文章于 2024-07-25 01:05:21 发布

转角已陌路

最新推荐文章于 2024-07-25 01:05:21 发布

阅读量1.2k

点赞数

分类专栏： es6 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44417818/article/details/122750631

版权

众所周知，音乐网站需要能播放音乐

1.页面搭建

在这里插入图片描述

我们需要搭建这样一个部分
那么秉承一分为二的原则，左边音乐列表，右边显示cd图片。理所应当我们得让cd运动起来。
components里面建立文件夹Music，文件夹内新建index.jsx和index.scss文件
目录结构如下
在这里插入图片描述

index.jsx

import {
    useCallback, useEffect, useState } from 'react'
import './index.scss'
import APlayer from 'APlayer';
import 'APlayer/dist/APlayer.min.css';

function music (){
   
	const [musicData,setMusicData]=useState([
        {
   
            id:0,
            url:'../assest/music/陈奕迅 - 你给我听好.mp3',
            name:'你给我听好',
            time:'04:10',
            artist:'陈奕迅',
            cover:'../image/singers/cyx.png'
        },
        {
   
            id:1,
            url:'../assest/music/陈奕迅 - 爱情转移.mp3',
            name:'爱情转移',
            time:'03:10',
            artist:'陈奕迅',
            cover:'../image/singers/cyx.png'
        },
        {
   
            id:2,
            url:'../assest/music/陈奕迅 - Shall We Talk.mp3',
            name:'Shall We Talk',
            time:'04:10',
            artist:'陈奕迅',
            cover:'../image/singers/cyx.png'
        },
        {
   
            id:3,
            url:'../assest/music/陈奕迅 - 不要说话.mp3',
            name:'不要说话',
            time:'04:10',
            artist:'陈奕迅',
            cover:'../image/singers/cyx.png'
        },
        {
   
            id:4,
            url:'../assest/music/陈奕迅 - 陀飞轮.mp3',
            name:' 陀飞轮',
            time:'04:00',
            artist:'陈奕迅',
            cover:'../image/singers/cyx.png'
        }
    ])
    const [checkIndex,setCheckIndex]=useState(0)

    const [audioPlayer,setAudioPlayer]=useState('')

	return(
        <div className='allPart'>
            <div className='playMusic'>