手撕一个音乐字幕滚动播放器效果

为了巩固HTML、JS、CSS的知识，本人实践了一个音乐字幕滚动播放器的demo，和大家分享，效果如下：

开发编辑器：vs code

开发思路：

1、先写HTML和CSS将需要的样式全部实现。实现目标样式的方案有很多，但哪种方案更好呢，这就需要我们多多思考，这里我们可以先实现再优化，但切忌先优化再开发～

2、解决了样式问题，下面核心就是数据，接下来在JS中将字符串格式的数据转换为好操作的对象数组；就像浏览器通过网络获取到HTML字符串后，启动页面渲染的第一步parseHTML那样，将html字符串parse为DOM树和CSSOM树，便于开发者后续对样式进行操作；

3、有了标准的数据格式，剩下的就是在JS中写核心函数，一定先把所有需要用的基础函数完成，并测试好，这样有利于减轻和简便（只需要调用）后面的开发。

比如

parseLrc()数据格式转换；

findIndex()将音乐播放的时间和歌词的index对应，

offset()计算设置ul的偏移保证高亮歌词在container的中间等后文将详细说明。

下面我们一起开始动手叭！

一、书写HTML

一个小技巧：在vscode中，想要生成20个填充随机单词的li标签，可以使用lorem

效果如下：

是不是非常高效，让我们更专注于样式的调整

接下来我们书写样式

以上样式实现的效果如下:

到这里，有几个问题想和大家交流：

1、这里的歌词滚动我们使用margin还是transform:translateY()实现，有什么区别?

2、li.active使用font-size是否可以，为什么使用transform:scale（1.2）？

3、transition放在li.active中是否可以，会有什么问题？

以上问题，本人也在理论学习和实践中得到了相对合理的答案！

1、第一个问题：需要从浏览器渲染原理入手，这里简略描述

浏览器的渲染流程大致如下图

当我们使用margin会更改元素位置，因此需要渲染主线程重新计算样式完成后续渲染工作，这个过程也叫reflow。因此当频繁更改margin时，页面会进行reflow性能也就会有所下降；

与reflow相对应的是repaint，例如transform仅对paint（绘制）进行更改，而这一步骤主要在合成线程中完成，不导致render tree更改，因此性能得以保障！

以上就是第一个问题的考虑

2、针对于第二个问题，其实与第一个问题使用到的原理相同。

font-size会改变字体大小，会对元素几何属性产生影响，因此浏览器会reflow；而scale是缩放，元素定位未受影响，因此浏览器仅需对页面进行repaint。

3、第三个问题则是一个小细节，.active是我们要动态添加给li的类选择器，因此如果将transition加到.active中会导致，轮播到的歌词放大的时候会有渐变效果而取消缩放则无渐变效果。

二、数据处理与基本方法的实现

数据一定程度上决定展示和可操作性，因此将数据处理好是非常基础而重要的工作。

首先我们要将如下字符串解析成【时间-歌词】的数据结构：

观察发现由于以上字符串的每一行都是用【时间+歌词+换行】组成，因此我们可以对应设计一个数据结构——对象数组，格式如下：

[

{

time: number,

words: string

},

...

]

在js中实现parseLrc方法将字符串转换为对象数组，这里时间也需要通过parseTime方法进行处理，因此一气呵成：

转换后数据更便于我们后续的操作（Tips：每实现一个方法都需要测试一下）

接下来我们考虑如何将数据和播放器的播放时间绑定呢？见如下findIndex方法：

这个方法使用播放器当前播放时间，计算对应数组下标，从而实现歌词的对应！

三、页面逻辑处理

以上基本的方法已经实现，下面我们实现页面展示的JS方法

首先创建歌词元素：

创建后计算歌词滚动偏移，保证高亮歌词在容器中央：

最后添加对audio的事件监听：

到这里本文就结束啦，总结一下涉及到的内容：

1、路由器渲染流程，以及reflow、repaint的区别及思考

2、先将所有需要用到的样式考虑到，多种实现方案情况下，实现一种再考虑优化

3、数据处理至关重要，优先先实现基础方法，方法实现后要进行测试，避免遗留问题点！

通过实现以上简单的字幕滚动播放器效果，本人更加深入了解了浏览器渲染流程、开发页面的思路以及数据处理的重要性！

感谢各位伙伴阅读，文中如有不足还望交流指正！

特别鸣谢【渡一教育】提供的实践教学资源！也欢迎大家到b站关注渡一前端大师课！