小程序中逐字歌词的实现

小程序在 skyline 模式下仅支持 mask-image 方式实现文字渐变，所以本文以 mask-image 方案为例，其他方案实现逻辑也大致相同

精准逐字

在有逐字格式的歌词文件时，可以实现精确的时间对应，这种方案效果最佳

淡入过渡

在仅有标注的 lyc 歌词文件时，仅有整句歌词的时间，可以采用淡入的效果提升体验

主题色

高亮配合主题色可以更加有沉浸感

实践案例与代码参考

• xiaoplayer 开源小程序音乐播放器，使用小爱音箱播放本地/NAS音乐