react + antd 实现一个音乐播放器

最终呈现结果

传入的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;}}
}

react + antd 实现一个音乐播放器相关推荐

用React做一个音乐播放器
介绍任何正在学习 React 并想使用 React 构建项目的人.有各种博客和文章可以为开发人员指导此类项目.我确实浏览过这些文章,但其中总是缺少一种项目.缺少的项目是音乐播放器和视频播放器.这两个 ...
基于React开发一个音乐播放器
同时支持 Mac 与 Windows 系统. 下载地址掘金链接项目使用 electron 作为外壳,webpack 作为打包工具,核心技术包括 React + Redux + React-rout ...
听音乐不过瘾？自制一个音乐播放器！| 原力计划
作者 | 灰小猿责编 | 夕颜出品 | CSDN博客最近在学习C#的GUI编程时想着自制一个播放器,说干就干. 其实C#除了在游戏开发上具有显著优势以外,在winform交互页面设计和web网站 ...
用vue简单写一个音乐播放器
简单地写一个功能比较全的音乐播放器前言因为音乐播放器是一个很可能在项目遇到的东西,早写总比晚写好.趁没事先写个. 思路一个音乐播放器该有的东西: 封面,歌名,专辑,作者控制器(上一首,下一首, ...
如何使用uni-app做一个音乐播放器
如何使用uni-app做一个音乐播放器 uni-app提供给我们非常棒的API,可以做出很好看的自定义样式的音乐播放器好的编译器可以让我们的项目事半功倍,HBuilderX可以很方便的创建uni-a ...
写一个音乐播放器的微信小程序
要创建一个音乐播放器的微信小程序,您需要熟悉微信小程序的开发环境和语言(如 JavaScript 和 WXML/WXSS). 具体来说,您需要做以下几件事: 设计音乐播放器的用户界面,并使用 WXML ...
html5开发一个音乐播放器,HTML5开发学习（1）：使用aduio标签打造音乐播放器
关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待.本文为该系列(html5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注. ...
教你用树莓派Python打造一个音乐播放器
买了个树莓派3B+,装好系统后灰落了好厚一层都不知道要干嘛...最近突发奇想:用树莓派做一个音乐播放器,每天6:30-7:20自动播放英语听力,强迫自己练习英语,也治治自己的懒床习惯,平时也可以用来听 ...
使用小程序制作一个音乐播放器
此文主要通过小程序制作一个音乐播放器,实现轮播.搜索.播放.快进.暂停.上一曲.下一曲等功能. 一.创建小程序二.设计页面三.接口渲染一.创建小程序访问微信公众平台,点击账号注册. 选择小程序 ...

react + antd 实现一个音乐播放器

最终呈现结果

传入的prop musicInfoList 数据

react 音乐播放器实现逻辑源码

样式部分

react + antd 实现一个音乐播放器相关推荐

最新文章

热门文章