音乐歌词同步实现指南

yy736044583 发布于2019-08-29 12:33 / 3078人阅读

摘要：有道友问了我这个问题，所以在这写了下思路首先，我默认你至少已经了解了的标签的相关属性，直入正题使用指南标签之事件属性歌词一般的说，文件由时间的标签组成，如截图所示现在以此歌词为例，对该歌词进行如下处理以行为单位拆分每一句歌词将每句歌词的时间

有道友问了我这个问题，所以在这写了下思路
首先，我默认你至少已经了解了h5的audio标签的相关属性，直入正题
audio使用指南
audio标签
audio之HTML 事件属性

old歌词

一般的说，lyric文件由时间的tag标签组成，如截图所示

现在以此歌词为例，对该歌词进行如下处理：

以行为单位拆分每一句歌词

将每句歌词的时间tag和内容分离

将时间转换为分钟

new 歌词

通过下面简单的正则转化

      let pattern = /[d{2}:d{2}.d{2}]/g;
      while (!pattern.test(lines[0])) {
        lines = lines.slice(1);
      }

我们可以得到如下新歌词数组（看着你们急不可耐的神情，我就不在乎这样的展示方式了）

分离出来后我们要做的其实就很简单了
将分离出来的[时间,内容]与当前的音乐播放时间对比，设置当前序号，根据序号将对应显示的歌词高亮，同时调整视图区top，给予用户视觉上的滚动效果。

没图没真相，来来来

具体实现代码，关注我的网易云音乐实践，这里我就不多写了，提供思路，仅供参考，如果有更加优雅的实现方式，非常希望你能@我

网易云音乐移动版（期待你的star）

api来源(感谢Binaryify不断更新的网易云音乐接口，这也将是这个项目不断拓展下去的坚实依托)

源码地址

项目预览（web端在chrome调试模式下效果更佳）

针对segmenfault类app暂时无法有效预览的问题，建议粘贴http://118.89.226.181:8080到手机其他浏览器体验

广告结束

GPU云服务器云服务器 html实现歌词同步歌词同步 js带歌词音乐播放器 html实现音乐

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111980.html

音乐歌词同步实现指南

摘要：有道友问了我这个问题，所以在这写了下思路首先，我默认你至少已经了解了的标签的相关属性，直入正题使用指南标签之事件属性歌词一般的说，文件由时间的标签组成，如截图所示现在以此歌词为例，对该歌词进行如下处理以行为单位拆分每一句歌词将每句歌词的时间有道友问了我这个问题，所以在这写了下思路首先，我默认你至少已经了解了h5的audio标签的相关属性，直入正题audio使用指南audio标签aud...

mmy123456 2019-08-21 11:40 评论0 收藏0
HTML5移动端音乐播放器（启蒙篇）

摘要：前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。有的歌词周杰伦算什么男人格式是时间点时间歌词创建映射首先以将歌词字符串分割成以时间点文字的数组，但由于这样分割之后最后一个元素是空的，所以用删除最后一个元素。这段时间公司一直在做一个PC的教育类单页应用，庞大复杂，涉及非常多H5的知识，音频就是其中的一部分。前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。在线地...

Lin_R 2019-08-20 11:58 评论0 收藏0
用 TS + Vue 重写 APlayer HTML5 音乐播放器

摘要：简介是一款简洁漂亮的音乐播放器在我第一次看到这款播放器颜值的时候让我眼前一亮，我非常崇拜那些能设计出好看界面的设计师但是在用过之后发现还是有不足的地方这是我曾经提过的用了一段时间，很喜欢简洁的，提一些其他可改进的建议我认为有必要提供动态管理简介 @DIYgod/APlayer 是一款简洁漂亮的 HTML5 音乐播放器 (〃ﾉωﾉ) 在我第一次看到这款播放器颜值的时候让我眼前一亮，我...

BingqiChen 2019-08-20 18:15 评论0 收藏0