H5文章内容跟读效果

最近根据产品需求，需要实现文章跟读，刚开始从网上找了一些实例，希望可以实现快速开发，但是大多数实例都是针对于歌词的，不能满足需求，最后参照了网上关于歌词文件时间抽取的例子，进行改进，其实遇到的主要问题就是文章内容跟歌词的结构不一样，文章有段落之分。

最后采取的方案是调整录音文本文件结构，朗读的每一句话都要进行段落标记，并且把时间戳转换为对应的ElementID，通过段落标记进行排版，根据ElementID对应的时间点与音频进度时间点进行比对，当音频进度时间点大于或者等于某一句话ElementID对应的时间点时，该句子被选中状态，并且调整每一句的ScrollTop值，实现实时滚动效果，具体效果图如下：



源码地址：https://github.com/mazhaohai/Scroll-Player