二手交易网站开发的,学会网站 建设,苏州网站建设logo,知名企业vi设计最近在做音乐播放器页面, 积累了很多有趣的经验, 今天先分享播放进度条的开发过程.
效果
话不多说#xff0c;先看效果 支持点击修改进度#xff0c;拖拽修改进度#xff0c;当然大家肯定都知道ui库里面有现成的#xff0c;为何要自己造一个
首先著名的ui库中确实都要这…最近在做音乐播放器页面, 积累了很多有趣的经验, 今天先分享播放进度条的开发过程.
效果
话不多说先看效果 支持点击修改进度拖拽修改进度当然大家肯定都知道ui库里面有现成的为何要自己造一个
首先著名的ui库中确实都要这样的滑动输入条比如antd-mobile中的slider
官网https://mobile.ant.design/zh/components/slider/
效果很多 比我自己造的肯定功能丰富的多但是亲自试过之后发现效果不太友好下面可以看看使用antd-mobile中的slider效果如下
对比
这是antd-mobile的效果 代码如下
其实把value属性去掉这个组件就会丝滑很多但是音乐播放器需要随着音频播放更改进度条这是必须要的功能不能去掉。
div className{styles.process}div className{styles.processTime}{currentTime ? formatTime(currentTime) : 00:00}/divSliderclassName{styles.songSlider}defaultValue{0}onAfterChange{changeProgressValue}value{currentTime duration ? currentTime / duration * 100 : 0}icon{div className{styles.sliderDot} /}/{/* MusicSliderclassName{styles.songSlider}defaultValue{currentTime duration ? currentTime / duration * 100 : 0}onAfterChange{change}value{currentTime duration ? currentTime / duration * 100 : 0}/ */}div className{styles.processTime}{duration ? formatTime(duration) : 00:00}/div
/divchangeProgressValue事件就是修改音频的currentTime
除此之外我也试用了其他的依赖库比如react-slider
https://github.com/zillow/react-slider
但是效果依旧不好就是因为有这种两三点的滑动所以导致逻辑复杂滑动效果就不太丝滑 所以我就觉得自己造一个slider组件
点击修改进度
点击事件比较简单就需要给这个区域绑定点击事件 灰色区域是父元素红色元素是子元素红色元素的宽度就是歌曲当前播放进度比分比 * 父元素宽度
首先需要理清楚几个坐标如何确定点击这里是音频进度所占比分比
点击当前点的坐标点击的时候能够拿到父元素的宽度通过getBoundingClientRect().width也能拿到
父元素左边距离最左边的距离也能拿到getBoundingClientRect().left也就是下面这段距离。 所以最终的点击函数如下
// 点击事件const barClick (e: React.MouseEvent) {// ts-ignoreconst rect mmProgress.current.getBoundingClientRect()const activeWidthVal Math.min(rect.width, Math.max(0, e.clientX - rect.left))// ts-ignoreconst progress Math.floor(activeWidthVal / mmProgress.current.clientWidth * 100)setActiveWidth(progress)if (onAfterChange) {onAfterChange(progress)}}拖拽修改进度
在电脑上需要监听的是鼠标的mouseup和mouseMove事件
在移动端需要监听的是touchend和touchmove事件
鼠标移动/触屏移动需要更新进度条的百分比
鼠标弹起/触屏结束需要更新歌曲的进度
开始事件能够直接绑定在进度小圆点上
开始时需要获取到开始的坐标并且存起来方便移动事件计算
mouseDown
// 触摸开始事件const barDown (e: React.TouchEvent) {startX.current e.touches[0].pageX// ts-ignoreleftVal.current mmProgressInner.current.clientWidthisDrag.current true}
// 鼠标开始移动const barDown1 (e: React.MouseEvent) {startX.current e.clientX// ts-ignoreleftVal.current mmProgressInner.current.clientWidthisDrag.current true}// tsx
div className{styles.sliderDot}onMouseDown{barDown1}onTouchStart{barDown}/div由于我直接绑定在了tsx元素上为了防止ts报错我就写了两个函数因为两者的类型不同
类型错误如下 mouseMove
鼠标移动需要及时更新进度条的样式也就是红色条的宽度
所以需要计算当前点击的坐标和上面函数保持的开始移动坐标
然后就是计算百分比更新样式
// 鼠标/触摸移动事件const barMove (e: React.TouchEvent React.MouseEvent) {if (isDrag.current) {const endX e.clientX || e.touches[0].pageXconst dist endX - startX.current// ts-ignoreconst activeWidthVal Math.min(mmProgress.current.clientWidth, Math.max(0, leftVal.current dist))// ts-ignoreconst progress Math.floor(activeWidthVal / mmProgress.current.clientWidth * 100)setActiveWidth(progress)dynamicState.current progress}}mouseUp
鼠标抬起这个函数需要说一下首先需要判断一下是否已经在鼠标抬起时完成了鼠标放下事件mouseDown
为什么呢防止这两种情况 这两种情况也会触发mouseMove和mouseUp事件但是这两种情况都不可以修改进度
所以需要一个变量来判断是否是在小圆点处发生了mouseDown事件 // 鼠标/触摸释放事件const barUp () {// 避免打开Playing组件时触发if (isDrag.current onAfterChange) {// ts-ignoreonAfterChange(dynamicState.current)}}销毁事件
到这里已经接近尾声了但是注意挂载了事件需要销毁
useMount(() {bindEvents()
})useUnmount(() {unbindEvents()})// 添加绑定事件const bindEvents () {// ts-ignoremmProgress.current.addEventListener(mousemove, barMove)// ts-ignoremmProgress.current.addEventListener(mouseup, barUp)// ts-ignoremmProgress.current.addEventListener(touchmove, barMove)// ts-ignoremmProgress.current.addEventListener(touchend, barUp)}// 移除绑定事件const unbindEvents () {if (mmProgress.current) {// ts-ignoremmProgress.current.removeEventListener(mousemove, barMove)// ts-ignoremmProgress.current.removeEventListener(mouseup, barUp)// ts-ignoremmProgress.current.removeEventListener(touchmove, barMove)// ts-ignoremmProgress.current.removeEventListener(touchend, barUp)}}最后全部代码如下 import classNames from classnames
import { useEffect, useRef, useState } from react
import styles from ./index.module.scss
import { useMount, useUnmount } from ahooks;export default function MusicSlider(props: any) {const { className, defaultValue, onAfterChange, value } propsconst [activeWidth, setActiveWidth] useState(defaultValue)const dynamicState useRef(0)const startX useRef(0) // 记录最开始点击的x坐标const leftVal useRef(0) // 记录当前已经移动的距离const isDrag useRef(false) // 是否可以拖拽const mmProgress useRef(null)const mmProgressInner useRef(null)useMount(() {bindEvents()})useEffect(() {const progress Math.floor(value)// ts-ignoresetActiveWidth(progress)}, [value])useUnmount(() {unbindEvents()})// 添加绑定事件const bindEvents () {// ts-ignoremmProgress.current.addEventListener(mousemove, barMove)// ts-ignoremmProgress.current.addEventListener(mouseup, barUp)// ts-ignoremmProgress.current.addEventListener(touchmove, barMove)// ts-ignoremmProgress.current.addEventListener(touchend, barUp)}// 移除绑定事件const unbindEvents () {if (mmProgress.current) {// ts-ignoremmProgress.current.removeEventListener(mousemove, barMove)// ts-ignoremmProgress.current.removeEventListener(mouseup, barUp)// ts-ignoremmProgress.current.removeEventListener(touchmove, barMove)// ts-ignoremmProgress.current.removeEventListener(touchend, barUp)}}// 点击事件const barClick (e: React.MouseEvent) {// ts-ignoreconst rect mmProgress.current.getBoundingClientRect()const activeWidthVal Math.min(rect.width, Math.max(0, e.clientX - rect.left))// ts-ignoreconst progress Math.floor(activeWidthVal / mmProgress.current.clientWidth * 100)setActiveWidth(progress)if (onAfterChange) {onAfterChange(progress)}}// 触摸开始事件const barDown (e: React.TouchEvent) {startX.current e.touches[0].pageX// ts-ignoreleftVal.current mmProgressInner.current.clientWidthisDrag.current true}
// 鼠标开始移动const barDown1 (e: React.MouseEvent) {startX.current e.clientX// ts-ignoreleftVal.current mmProgressInner.current.clientWidthisDrag.current true}// 鼠标/触摸移动事件const barMove (e: React.TouchEvent React.MouseEvent) {if (isDrag.current) {const endX e.clientX || e.touches[0].pageXconst dist endX - startX.current// ts-ignoreconst activeWidthVal Math.min(mmProgress.current.clientWidth, Math.max(0, leftVal.current dist))// ts-ignoreconst progress Math.floor(activeWidthVal / mmProgress.current.clientWidth * 100)setActiveWidth(progress)dynamicState.current progress}}// 鼠标/触摸释放事件const barUp () {// 避免打开Playing组件时触发if (isDrag.current onAfterChange) {// ts-ignoreonAfterChange(dynamicState.current)}}return (div className{classNames(className, styles.progress)} ref{mmProgress} onClick{barClick}div className{styles.bar}/divdiv className{styles.outer}/divdiv className{styles.inner} ref{mmProgressInner} style{{width: ${activeWidth}%}}div className{styles.sliderDot}onMouseDown{barDown1}onTouchStart{barDown}/div/div/div)
}
