基于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 相关文章推荐
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
React优化子组件render的使用
May 12 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获取从html表单传递数组的方法
2015/03/20 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
客户端静态页面玩分页
2006/06/26 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
django中使用vue.js的要点总结
2019/07/07 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python机器学习之决策树算法
2017/12/22 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
网络工程专业毕业生推荐信
2013/10/28 职场文书
项目建议书格式
2014/03/12 职场文书
出纳岗位职责
2015/01/31 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
闪闪红星观后感
2015/06/08 职场文书
导游词之任弼时故居
2020/01/07 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android