基于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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
定义select的边框颜色
Apr 28 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
秸秆管理实施方案
2014/03/15 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python