前段时间公司想做一个歌词标记功能，标记副歌、前奏、无效内容等，搜索了没找到类似的实现，于是必须自己实施。功能已经上线，这里记录下使用过的相关内容。需求可以拖动进度条修改播放进度可以拖动歌词修改播放进度播放时滚动歌词标记功能测试地址：https://www.lilnong.top/stati...实现技术栈是Vue+vant+better-scroll。刚开始研究的时候，我是用vant的Picker来实现的。发现滚动歌词的时候没有动画，心里不爽，改成better-scroll。better-scrollbetter-scrolldocumentationbetterScrollList=newBScroll(wrapper,{probeType:2,//因为默认不调用滚动回调，所以需要设置swipeTime:300})betterScrollList.on('scroll',()=>{//暂停歌曲//获取当前用户拖动的歌词，计算规则如下//当前y/最大y*歌词行数//当前y为滚动多少//最大y可以理解为height//上面计算出来就是进度比。然后转换成行数就ok了})betterScrollList.on('scrollEnd',()=>{//这里是位置其中歌词校准为可拖动//播放歌曲})probeType参数的作用是分发滚动规则。默认值为0。我使用2是因为我认为这对我来说已经足够了（如果你觉得不够可以转到3）。值说明0不派发1非实时派发scroll事件（在屏幕滑动一定时间后）2在屏幕滚动过程中实时派发scroll事件3不仅在屏幕滚动过程中，而且在动量滚动动画运行实时派发滚动事件解析歌词这里我是基于库lyric-parser实现的。因为在网上找了几个库都是用的，所以没找到我们公司内部的解析代码。lrc歌词规则：[分:秒.毫秒]歌词。联动修改播放进度这里我直接改currentTime来实现。监听播放进度这里我监听timeupdate回调，然后获取currentTime，然后遍历歌词中时间对应的歌词触发滚动效果。修改volumeandroid就可以了。ios不行，然后就被砍掉了。这里是按体积操作的。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。
