基于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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
js 异步处理进度条
Apr 01 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
js new Date()实例测试
Oct 31 Javascript
JavaScript对象原型链原理解析
Jan 22 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会员权限控制实现原理分析
2011/05/29 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js 代码优化点滴记录
2012/02/19 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
使用python实现knn算法
2017/12/20 Python
python实现局域网内实时通信代码
2019/12/22 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
广告学专业毕业生自荐信
2013/09/24 职场文书
中专毕业生求职简历的自我评价
2013/10/21 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
授权委托书范文
2014/07/31 职场文书
元旦标语大全
2014/10/09 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书