最终呈现结果
传入的prop musicInfoList 数据
[{"id": "001","musicName": "永远都会在","musicArt": "旅行团乐队","musicSrc": "/src/assets/music/永远都会在-旅行团乐队.flac","musicLyricsSrc": "/src/assets/music/永远都会在-旅行团乐队.text"},{"id": "002","musicName": "日落大道","musicArt": " 梁博","musicSrc": "/src/assets/music/梁博-日落大道.flac","musicLyricsSrc": "/src/assets/music/梁博-日落大道.text"}]
react 音乐播放器实现逻辑源码
import React, { useEffect, useRef, useState } from 'react'import { Image, Slider } from 'antd'import {CustomerServiceOutlined,AudioOutlined,DoubleLeftOutlined,BackwardOutlined,PlayCircleFilled,PauseCircleFilled,ForwardOutlined,FunnelPlotFilled,} from '@ant-design/icons'import './index.less'import musicUrl from '@/assets/image/img.jpg'export default function MusicBox({ musicInfoList }) {// 音乐播放器对象const musicRef = useRef()// 音乐信息const [musicInfo, setMusicInfo] = useState([])// 音乐信息索引const [musicIndex, setMusicIndex] = useState(0)// 音乐地址const [musicSrc, setMusicSrc] = useState('')// 音乐名称const [musicName, setMusicName] = useState('')// 音乐创作者const [musicArt, setMusicArt] = useState('')// 音乐当前时间const [currentTime, setCurrentTime] = useState(0)// 音乐时长const [maxTime, setMaxTime] = useState('')// 播放器音量const [musicVolume, setMusicVolume] = useState('')// 音乐定时器const [musicTimer, setMusicTimer] = useState('')// 音乐是否在播放const [musicPlay, setMusicPlay] = useState(false)// 监听音乐列表是否加载完毕useEffect(() => {if (musicInfo.length === 0) return setMusicInfo([...musicInfoList])setMusicName(musicInfo[musicIndex].musicName)setMusicArt(musicInfo[musicIndex].musicArt)setMusicSrc(musicInfo[musicIndex].musicSrc)}, [musicInfo])// 监听播放的音乐索引useEffect(() => {if (musicInfo.length == 0) returnconst { musicName, musicArt, musicSrc } = musicInfo[musicIndex]setMusicName(musicName)setMusicArt(musicArt)setMusicSrc(musicSrc)setTimeout(playMusic, 500)}, [musicIndex])// 歌曲时间格式化const songTimeFilter = (val) => {const dt = new Date(val * 1000)// 分秒const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')return `${mm}:${ss}`}// 控制音乐播放const playMusic = () => {if (musicRef.current.paused) {if (!musicVolume) {musicRef.current.volume = 0.1setMusicVolume(0.1)}musicRef.current.play()watchMusicInfo()setMusicPlay(true)} else {musicRef.current.pause()setMusicPlay(false)clearInterval(musicTimer)}}// 监听音乐播放信息const watchMusicInfo = () => {clearInterval(musicTimer)setMaxTime(musicRef.current.duration)// 设置定时器，每 0.5s 更新一下歌曲进度const theTimer = setInterval(() => {setMusicTimer(theTimer)// 如果音乐暂停了，结束定时器if (musicRef.current.paused) {clearInterval(musicTimer)setMusicPlay(false)}// 如果音乐播放结束了，结束定时器if (musicRef.current.ended) {clearInterval(musicTimer)setMusicPlay(false)changePlayMusic(1)}setCurrentTime(musicRef.current.currentTime)}, 500)}// 通过进度条更改歌曲播放进度const changeMusicTime = (value) => {clearInterval(musicTimer)musicRef.current.currentTime = valueif (musicRef.current.paused) musicRef.current.play()setMusicPlay(true)watchMusicInfo()}// 设置音乐播放器音量const setVolume = (val) => {if (!musicVolume) {musicRef.current.volume = 0.1setMusicVolume(0.1)return}if (!val) returnmusicRef.current.volume = val}// 调整音量const changePlayerVolume = (value) => {if (value == 0) return (musicRef.current.volume = 0)setMusicVolume(value / 10)setVolume(value / 10)}// 格式化 Tooltip 的内容const formatter = (value) => songTimeFilter(value)// 切换歌曲的播放const changePlayMusic = (num) => {const index = musicIndex + numif (index < 0) return setMusicIndex(musicInfo.length - 1)if (index >= musicInfo.length) return setMusicIndex(0)setMusicIndex(index)}return (<div className="musicBox">{/* 音乐播放器 */}<audio ref={musicRef} type="audio/flac" src={musicSrc}></audio>{/* 左侧歌曲图片 */}<div className="musicImage"><Image width={120} src={musicUrl} /></div>{/* 中部歌曲信息 */}<div className="musicInfo"><div className="musicDesc"><CustomerServiceOutlinedstyle={{ color: '#ac8edc', paddingRight: '10px' }}/>{musicName}</div><div className="musicDesc"><AudioOutlined style={{ color: '#ac8edc', paddingRight: '10px' }} />{musicArt}</div>{/* 歌曲进度条 */}<div className="progressBar"><Slidertooltip={{ formatter }}value={currentTime}max={maxTime}onChange={(value) => setCurrentTime(value)}onAfterChange={changeMusicTime}/><div className="musicTime">{songTimeFilter(currentTime)} / {songTimeFilter(maxTime)}</div></div>{/* 操作按钮 */}<div className="operationBar"><BackwardOutlinedstyle={{ fontSize: '28px' }}onClick={() => changePlayMusic(-1)}/>{musicPlay ? (<PauseCircleFilledstyle={{ fontSize: '22px' }}onClick={playMusic}/>) : (<PlayCircleFilledstyle={{ fontSize: '22px' }}onClick={playMusic}/>)}<ForwardOutlinedstyle={{ fontSize: '28px' }}onClick={() => changePlayMusic(1)}/><FunnelPlotFilled style={{ fontSize: '22px' }} rotate={90} /><div className="volume"><Slider defaultValue={1} max={10} onChange={changePlayerVolume} /></div></div></div>{/* 右侧箭头按钮 */}<div><DoubleLeftOutlined /></div></div>)}
样式部分
.musicBox {display: flex;align-items: center;width: 360px;height: 130px;background-color: #fcf1f0;border-radius: 80px;}.musicImage {width: 120px;height: 120px;border-radius: 50%;display: flex;align-items: center;justify-content: center;overflow: hidden;margin-top: 10px;margin-bottom: 10px;margin-left: 10px;animation: fadenum 60s infinite;@keyframes fadenum {100% {transform: rotate(360deg);}}}.musicInfo {width: 195px;margin-right: 10px;.musicDesc {margin-top: 5px;margin-bottom: 5px;color: #65567e;font-size: 14px;font-weight: bold;}.progressBar {width: 193px;margin-top: 10px;.ant-slider {margin: 0;margin-left: 10px;}.musicTime {font-size: 13px;display: flex;justify-content: flex-end;padding-top: 4px;}}.operationBar {display: flex;justify-content: space-between;align-items: center;.volume {width: 80px;}}}
