华山资源网

基于better-scroll 实现歌词联动功能的代码
网络编程 2024/12/23 佚名
3 1

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

正文

前段时间公司要做个歌词标记功能，标记副歌、前奏、无效内容等等。找了找没有找到类似的实现，只能自己实现一把。

功能已经上线了，这里记录一下用到的相关内容。

需求

  • 可以拖动进度条修改播放进度
  • 可以拖动歌词来修改播放进度
  • 播放时滚动歌词
  • 标记功能

测试地址：https://www.lilnong.top/stati ...

基于better-scroll 实现歌词联动功能的代码

实现

技术栈是 Vue + vant + better-scroll。
开始调研的时候使用 vant 的 Picker 来实现了一下，发现滚动歌词的时候没有动画，很难受改用了 better-scroll。

better-scroll

better-scroll 文档

betterScrollList = new BScroll(wrapper,{
 probeType: 2, // 因为默认是不会调用 scroll 回调的，所以需要设置
 swipeTime: 300
})
betterScrollList.on('scroll', ()=>{
 //暂停歌曲
 //获取当前用户拖动的歌词，计算规则如下
  // 当前y / 最大y * 歌词行数
  // 当前y就是滚动的了多少
  // 最大y可以理解为高度
  // 上面计算出来就是进度比例。然后换算到行数就ok
})
betterScrollList.on('scrollEnd', ()=>{
 // 这里是校准到拖动歌词的位置
 // 播放歌曲
})

probeType

值 描述 0 不派发 1 会非实时（屏幕滑动超过一定时间后）派发scroll 事件 2 会在屏幕滑动的过程中实时的派发 scroll 事件 3 不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件

解析歌词

这里我是基于lyric-parser 这个库实现的。

因为我在网上找了几个库他们都使用的这个，所以我也就没找我们公司内部的解析代码。

lrc 歌词规则： [分:秒.毫秒]歌词。

基于better-scroll 实现歌词联动功能的代码

联动

修改播放进度

这里我是直接改的 currentTime 来实现。

监听播放进度

这里我是监听 timeupdate 回调，然后获取 currentTime，再去遍历歌词中对应时间的歌词，触发滚动效果。

修改音量

安卓是好的。ios 不行，然后被砍了。
这里是通过 volume 来操作。

总结

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com