React 音乐播放器

本文使用React利用Html 的audio组件制作一个简单的音乐播放器；

本文代码参考博文：https://blog.csdn.net/sinat_39626276/article/details/81034385 有兴趣的可以去这个博主那里看代码；

贴代码先是 jsx部分：

import React from 'react';
import styles from './Index.module.scss';
import videoPlay from '../img/videoPlay.png'
import videoPause from '../img/videoPause.png'class Audio extends React.Component {constructor(props) {super(props);this.state = {isDrag: false,//是否拖动isPlay: false,//是否播放isGet: false,//获取时长duration: '', //时间长度currentTime: '00:00',//当前时间}}audio = React.createRef();//播放音频 playRecord = () => {if (!this.state.isPlay) {this.setState({isPlay: true,isGet: true,duration: this.timeParse(this.audio.current.duration)}, () => {this.audio.current.play();})} else {this.setState({isPlay: false}, () => {this.audio.current.pause();})}时间监听函数 updatethis.audio.current.ontimeupdate = () => {if (this.state.isPlay) {let percent = this.audio.current.currentTime / this.audio.current.duration * 100;this.inner.style.width = percent + '%'this.setState({currentTime: this.timeParse(this.audio.current.currentTime)})if (percent === 100) {this.setState({isPlay: false}, () => {setTimeout(() => {this.inner.style.width = '0%'this.setState({currentTime: '00:00'})}, 0.5)})}}}}//拖动 点击事件move = (e) => {if (e.target.id !== 'line')return;const { offsetX } = e.nativeEvent;const { offsetWidth } = e.target;const percent = offsetX / offsetWidth;this.inner.style.width = percent * 100 + '%';this.audio.current.currentTime = percent * this.audio.current.duration;this.setState({currentTime: this.timeParse(this.audio.current.currentTime)})}//点击事件clcikLine = (e) => {this.move(e)}//拖动事件handleMouseMove = (e) => {if (this.state.isDrag) {this.move(e)}}//鼠标抬起handleMouseUp = () => {this.setState({isDrag: false})}//鼠标放下handleMouseDown = () => {this.setState({isDrag: true})}// 时间一位数时加0pad = (val) => {const sVal = Math.floor(val); // 舍弃毫秒if (sVal < 10) return `0${sVal}`;return Number.isNaN(sVal) ? '00' : sVal.toString();}// 时间格式化为xx:xxtimeParse = (sec) => {const min = Math.floor(sec / 60);const secVal = sec - min * 60;return `${this.pad(min)}:${this.pad(secVal)}`;}render() {const { isGet, duration, currentTime } = this.state;return (<div className={styles.play}><div className={styles.line} ><div className={styles.lineWrap} id={'line'} onMouseMove={this.handleMouseMove} onMouseUp={this.handleMouseUp} onMouseLeave={this.handleMouseUp} onClick={this.clcikLine} ref={line => { this.line = line; }}><span className={styles.lineInner} ref={inner => { this.inner = inner; }} ><span className={styles.lineDot} onMouseDown={this.handleMouseDown} /></span></div><div className={styles.text1}>{currentTime}</div>{isGet ?<div className={styles.text2}>{duration}</div> : ''}</div><div className={styles.palyButton} onClick={this.playRecord} ><img src={this.state.isPlay ? videoPause : videoPlay} className={styles.icon} /></div><audioref={this.audio}id={'audio'}src={this.props.src}></audio></div>)}
}
export default Audio;

这里优化了之前博主拖动的代码，但由于我刚转前端CSS还是搞不定，拖动不丝滑，具体原因就是获取div组件的问题，有空继续优化css，然后事件效果。

以下是CSS代码，改了之前博主的写的很凌乱。。

.play {width: 100%;height: 30%;padding: 0 40px;margin-top: 10px;display: flex;.palyButton {width: 30px;height: 30px;background-color: white;cursor: pointer;background-repeat: no-repeat;padding-left: 20px;flex: 1;position: relative;.icon {bottom: 10px;position: absolute;}}.line {flex: 8;width: 95%;height: 4px;position: relative;.text1 {position: absolute;top: 10px;left: 0px;}.text2 {position: absolute;top: 10px;right: 0px;}.lineWrap {width: 100%;height: 100%;background-color: #C4C4C4;display: inline-block;cursor: pointer;.lineInner {width: 0%;height: 5px;display: inline-block;background-image: linear-gradient(to right, #4B94FF, #4B93FF, #79DDFC);position: relative;bottom: 11px;pointer-events: none;.lineDot {pointer-events: all;position: absolute;top: -6px;right: -10px;width: 20px;height: 20px;display: inline-block;background-image: url('../img/Ellipse45.png');background-repeat: no-repeat;}}}}
}

总的来说完成了效果，但是很不丝滑，拖动效果需要重新根据css写，目前还是没有搞定多个DIV嵌套下事件触发及获取位置的方法，原博主的计算方式没太看懂，大体是通过计算整个屏幕的，总之太烦了，想要获取上上一级父物体的相对位置写法目前还没，有大神指导下么。

最后效果图如下，需要的可以直接拿去用。目前有三个问题：css写的乱，拖动事件不丝滑，还有就是在componentDidMount 生命周期拿不到audio具体的数组会报空和NaN，不知道为啥，所以一开始没有拿到audio的时间，有兴趣的小伙伴可以改下。

React 音乐播放器相关推荐

react + antd 实现一个音乐播放器
最终呈现结果传入的prop musicInfoList 数据 [{"id": "001","musicName": "永远 ...
React Native (一) react-native-video实现音乐播放器和进度条的功能
React Native (一) react-native-video实现音乐播放器和进度条的功能功能: 1.卡片滑动切歌 2.显示进度条效果图: 第三方组件: 1.react-native-vi ...
基于React开发一个音乐播放器
同时支持 Mac 与 Windows 系统. 下载地址掘金链接项目使用 electron 作为外壳,webpack 作为打包工具,核心技术包括 React + Redux + React-rout ...
React + Vite 实现一个音乐网站（aplayer音乐播放器）
众所周知,音乐网站需要能播放音乐 1.页面搭建我们需要搭建这样一个部分那么秉承一分为二的原则,左边音乐列表,右边显示cd图片.理所应当我们得让cd运动起来. components里面建立文件夹Mu ...
用React做一个音乐播放器
介绍任何正在学习 React 并想使用 React 构建项目的人.有各种博客和文章可以为开发人员指导此类项目.我确实浏览过这些文章,但其中总是缺少一种项目.缺少的项目是音乐播放器和视频播放器.这两个 ...
.net vue漂亮登录界面_基于 electron-vue 开发的音乐播放器「实践」
作者:XiaoTuGou 转发链接:https://github.com/SmallRuralDog 前言基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐. 技术栈electron ...
3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验
: 一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS.Android.HTML5开发经验,对NativeApp.HybridApp.WebApp开发有着独到的见解 ...
从零开发一个定制版音乐播放器，女朋友不就有了吗？
极客江南: 一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS.Android.HTML5开发经验,对NativeApp.HybridApp.WebApp开发有着独 ...
个人Web音乐播放器实践
个人Web音乐播放器实践小结 React + Redux web音乐播放器实践技术栈及相关组件遇到的问题及解决方法 redux 数据管理自定义滚动条组件 react-scrollbar 首页歌单 ...

React 音乐播放器

React 音乐播放器相关推荐

最新文章

热门文章