当前位置: 首页 > Web前端 > CSS

音乐歌词同步实现指南

时间:2023-03-30 22:19:59 CSS

有位道友问过我这个问题,所以我把我的想法写在这里。首先我假设你至少了解了h5的audio标签的相关属性。让我们直接进入音频使用指南的主题。HTML事件属性oldLyrics一般来说,一个歌词文件是由timetag标签组成的,如截图所示下面以歌词为例,对歌词进行如下处理:lyric标签和内容的分离将时间转换为分钟新的歌词通过以下简单的正则化转换letpattern=/\[\d{2}:\d{2}.\d{2}\]/g;while(!pattern.test(lines[0])){lines=lines.slice(1);}我们可以得到如下新的歌词数组(看你们不耐烦的表情,我不关心这种呈现方式)分离出来之后,我们想要做什么其实很简单。将分离出的[时间,内容]与当前音乐播放时间进行比较,设置当前序号,根据序号高亮对应显示的歌词,调整查看区域顶部,给用户视觉滚动效果。无图无真相,来这里详细实现代码,关注我的网易云音乐实践,这里就不多写了,提供思路,仅供参考,如果有更优雅的实现方法,真心希望可以@我网易云音乐手机版(期待你的star)api源码(感谢Binaryify为网易云音乐接口不断更新,这也将是本项目不断扩展的坚实基础)源码地址工程预览(web端效果在chrome调试模式下效果更好Good)针对segmenfaultapp暂时无法有效预览的问题,建议手机其他浏览器粘贴http://118.89.226.181:8080电话体验广告结束