小程序中逐字歌词的实现

180 阅读1分钟

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

精准逐字

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

淡入过渡

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

主题色

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

实践案例与代码参考

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