2023年7月11日发(作者：)

基于VUE和JS⼿写的移动端H5⾃定义⾳乐播放器（直线进度条和圆形滚动进度条）1. 先上效果图，可以嵌合在H5移动端页⾯，可拖拽点击颜⾊进度条的⼩⽩⾊圆圈快进~下⾯就是圆形的进度条哦~(请尊重劳动成果，转载请注出处~)P.S（在这⾥说下圆形进度条的效果，⼀开始也是⽤canvas，但是发现canvas不⽀持淘宝适配⽅案，于是想着⾃⼰写⼀个，思路是控制圆边的显⽰。后来忽然看到园友-- 的⼀篇⽂章思路⼀下⼦彻底就打通了。⽤度数逐步增加来控制圆边的显⽰⽐控制周长来得好。在此感谢）

2. HTML代码部分

3. SCSS部分 P.S（这⾥的icon⽤的是scss特点，可以直接在HTML⾥⾯⽤img标签，只是我习惯这样写，因为后期判断切换⽅便。关于deg度数的兼容性可以⾃⾏百度泳-wekbit-之类的解决）.circleProgress_wrapper{ width: px2rem(80); height: px2rem(80); margin: px2rem(50) auto; position: relative; border:1px solid #ddd;}.wrapper{ width: px2rem(40); height: px2rem(80); position: absolute; top:0; overflow: hidden;}.right{ right:0;}.left{ left:0;}.circleProgress{ width: px2rem(70); height: px2rem(70); border:px2rem(5) solid transparent; border-radius: 50%; position: absolute; top:0;}.rightcircle{ border-top:px2rem(5) solid #1296db; border-right:px2rem(5) solid #1296db; right:0; transform: rotate(-135deg); display: none;}.leftcircle{ border-bottom:px2rem(5) solid #1296db; border-left:px2rem(5) solid #1296db; left:0; transform: rotate(-135deg); display: none;}.bar { width: 100%; height: px2rem(30); line-height: px2rem(30); .progressbar { width: 100%; height: px2rem(10); background-color: #999999; margin-top: px2rem(10); border-radius: px2rem(30); position: relative; } .greenbar { width: 0%; height: px2rem(10); border-radius: px2rem(30); position: absolute; top: 0; left: 0; background-color: #1296db; .yuan { display: inline-block; padding: px2rem(10); background-color: #ffffff; border-radius: 50%; position: absolute; top: px2rem(-5); right: px2rem(-20); } }}.time-text { display: inline-block; width: 50%; padding: 0 px2rem(30); box-sizing: border-box;}.right-time { text-align: right;}.audio-btn { width: 100%; text-align: center;}.icon { @include size(80, 80); display: inline-block; margin-right: px2rem(20); vertical-align: middle; $icon-list: right2 left play stop; @each $icon in $icon-list { &.icon-#{$icon} { @include background-cover("icon-#{$icon}.png"); } }}

4. JS部分export default { name: 'music-view', components: { }, props: { type: '', }, data () { return { cTime: '00:00', // 已播放时间 dTime: '00:00', // 总播放时间 play: false, // 播放暂停按钮 audioHttp: '/?down/3', // ⾳频链接 } }, mounted () { const music = this.$ // ⾳频所在对象 const musicBar = this.$ // 颜⾊进度条所在对象 const musicWidth = this.$Width // 底部进度条总宽 const rightCircle = this.$ // 圆形滚动进度条右边 const leftCircle = this.$ // 圆形滚动进度条左边 // 获得⾳频加载完成可播放时的处理 ntListener('canplay', () => { const musicTime = on // 获得⾳频时长 const branch = (musicTime / 60) // 计算⾳频分钟 const second = (musicTime % 60) // 计算⾳频秒 if (branch < 10 && second < 10) { // 四种情况判断⾳频总时间 = `0${branch}:0${second}` } else if (branch < 10) { = `0${branch}:${second}` } else if (second < 10) { = `${branch}:0${second}` } else { = `${branch}:${second}` } }) // 获得⾳频正在播放时的处理 ntListener('timeupdate', () => { const musicTime = on // 获得⾳频时长 const circleTime = musicTime / 360 // 计算总时长占据360度每⼀度的⽐例 const stopTime = tTime // 获得已播放的⾳频时长 const rightDeg = -135 + (stopTime / circleTime) // 计算出当前旋转度数 if (rightDeg < 45) { // 如果当前度数⼩于45就证明在右边 y = 'block' // 显⽰右边圆 orm = `rotate(${rightDeg}deg)` // 赋值给CSS右边圆旋转度数 y = 'none' // 隐藏左边园（预防切歌的时候右边已清除） } else if (rightDeg === 45 || rightDeg > 45) { // 如果当前度数等于或⼤于45就证明在左边 y = 'block' // 显⽰右边圆（预防直接点击快进的时候右边⽆显⽰） y = 'block' // 显⽰左边圆 orm = 'rotate(45deg)' // 固定右边旋转度数 const leftDeg = -135 + ((stopTime - (musicTime / 2)) / circleTime) // 计算出当前左边旋转度数 orm = `rotate(${leftDeg}deg)` // 赋值给CSS右边圆旋转度数 } = `${(stopTime / musicTime) * 100}%` // 计算进度条所在⽐例宽度 const branch = (stopTime / 60) // 计算已播放的⾳频分钟 const second = (stopTime % 60) // 计算已播放的⾳频秒 if (branch < 10 && second < 10) { // 四种情况判断显⽰⾳频以播放时间 = `0${branch}:0${second}` } else if (branch < 10) { = `0${branch}:${second}` } else if (second < 10) { = `${branch}:0${second}` } else { = `${branch}:${second}` } })// 监听颜⾊进度条是否触摸拖动 ntListener('touchmove', (event) => { const events = Touches[0].pageX // 获得触摸拖动的距离 = `${(events / musicWidth) * 100}%` // 计算进度条所在⽐例宽度 () // 触摸拖动时停⽌播放 }) // 监听颜⾊进度条是否触摸拖动结束 ntListener('touchend', () => { const touwidth = (Width / musicWidth) // 计算进度条所在⽐例 tTime = on * touwidth // 通过所在⽐例赋值给⾳频应在的播放时间 () // 根据播放时间开始播放 = true // 更改播放暂停按钮为播放 }) // 这⾥顺便写的，适⽤于PC端。⿏标事件 // ntListener('drag', (e) => { // const events = // = `${(events / musicWidth) * 100}%` // }) // ntListener('dragend', (e) => { // const events = // = `${(events / musicWidth) * 100}%` // sic() // }) }, computed: { }, methods: { // 点击进度条事件 playMusic (e) { const music = this.$ // ⾳频所在对象 const barWidth = / this.$Width // 计算点击位置相对⽗元素总宽的⽐例 this.$ = `${barWidth * 100}%` // 进度条应所在的⽐例总宽 tTime = on * barWidth // 计算点击时应播放所在的时间 () // 播放⾳频 = true // 更改播放暂停按钮为播放 }, // 点击播放暂停按钮时间 audioState () { = ! // 更改播放暂停按钮状态 const music = this.$ // ⾳频所在对象 if () { () // 播放⾳乐 } else { () // 暂停⾳乐 } }, // 切换歌曲按钮 switchAudio (value) { if (value === 'top') { ttp = '/mp3/2018-04-19/3' } else if (value === 'bottom') { ttp = '/mp3/2018-04-20/3' } = false // 播放按钮为暂停 this.$ = 0 // 清空颜⾊进度条 this.$y = 'none' // 清空圆形颜⾊进度条 this.$y = 'none' // 清空圆形颜⾊进度条 }, },}