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


Posted in Javascript onMay 07, 2020

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

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

正文

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

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

需求

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

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

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

实现

技术栈是 Vue + vant + better-scroll
开始调研的时候使用 vantPicker 来实现了一下,发现滚动歌词的时候没有动画,很难受改用了 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 来操作。

总结

到此这篇关于基于better-scroll 实现歌词联动功能的代码的文章就介绍到这了,更多相关better-scroll 实现歌词联动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
js活用事件触发对象动作
Aug 10 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
Vue双向绑定实现原理与方法详解
May 07 #Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 #Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 #Javascript
简单了解JavaScript弹窗实现代码
May 07 #Javascript
angular组件间传值测试的方法详解
May 07 #Javascript
Node.js API详解之 timer模块用法实例分析
May 07 #Javascript
JS面试题中深拷贝的实现讲解
May 07 #Javascript
You might like
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
JavaScript 变量命名规则
2009/09/23 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
keras.layer.input()用法说明
2020/06/16 Python
python实例化对象的具体方法
2020/06/17 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
装饰活动策划方案
2014/02/11 职场文书
党员违纪检讨书
2014/02/18 职场文书
教师节活动主持词
2014/04/02 职场文书
生日寄语大全
2014/04/08 职场文书
小学英语课后反思
2014/04/26 职场文书
大学生活动总结模板
2014/07/02 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
Python机器学习之基础概述
2021/05/19 Python
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers