html5音乐和歌词同步,HTML5实现歌词同步

开篇

HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签。

audio标签

实现一个audio标签非常简单，对应的html代码如下：

src="music/我在人民广场吃炸鸡.mp3"

autoplay controls>

上述代码不需要一行js脚本就能实现音乐播放。其中有三个常用的属性，分别为：音频源文件，是否自动播放以及是否显示播放器控件。由于没有任何ui的展现，audio标签在chrome的默认风格如下图:

可以看出，一个基本的播放器还包括了显示当前时间，播放，暂停，快进快退等功能。这些功能都决定了如何很好的实现歌词同步(后续介绍)。

既然这么容易就就能播放音乐，那作为一项前端的技术，audio标签在各个浏览器中的兼容性又是怎样的呢？

Browser Compatibility

可以看出，各大浏览器对audio标签基本功能都支持，只是在细微的特性上表现不一，但是这些基本的功能已经足已做出一个好的播放器。

歌词

一般标准的lyric文件是由[时间]内容的tag标签组成，如下图：

为了更精确的展现每个字在每句歌词中的时间，又出现了特殊的歌词形式，如下：

这种歌词的格式的最好例子就是QRC歌词文件(如QQ音乐播放器)：

为了描述简单，本文仅以最简单的lyric格式作为说明，讲解如何分离歌词进行歌词同步。如下，为一首歌曲的歌词文件:

现对该歌词文件作一下处理：

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

2.将没句歌词的时间tag和内容分离

3.将时间转换为分钟

转换过程较为简单，只需一个简单的正则匹配，过程如下：

分离出来的[时间,内容]可以与audio当前的播放时间进行对比，若需要显示对应的歌词则将该行高亮，同时每次更新对应DOM节点的top则可在视觉上达到滚动效果。

制作歌词ui。

1.定义一个现实歌词的区域，添加audio控件

2.添加背景图片，制作标题边框

3.添加歌词

到此，歌词同步以及ui绘制全部完毕。

html5音乐和歌词同步,HTML5实现歌词同步相关推荐

html5音乐播放时间监测,html5 video如何实现实时监测当前播放时间（代码）
这篇文章给大家介绍的内容是关于html5 video如何实现实时监测当前播放时间(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html:Your browser does ...
实现html5音乐的自动播放,html5中audio实现播放列表和自动播放
var count = 43; //一共多少MP3文件 var index = '18.mp3'; // 初始化播放那个文件 window.onload = function(){ var audio ...
Vue2：网易云播放音乐并实现同步一次显示一行歌词
目录一.项目数据API接口地址二.实现播放页面效果三.实现思路四.实现思路代码 1.发送ajax请求获取歌词 2. 处理歌词格式 3.判定该显示哪句歌词 4.代码部分五.整个页面完整代码一 ...
微信小程序播放音乐并同步一次显示一行歌词
主要是对于歌词部分的描述 gitee项目仓库地址 https://gitee.com/manster1231/master-cloud-music(点个star哦!) 1.总体思路先在加载页面时异步 ...
仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
html在线音频播放器实训总结,HTML5音乐列表播放器SMusic开发总结
前段时间写过一篇介绍简单音乐播放器效果开发的博文<为你的博客添加简单的CSS3音乐播放器>,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML ...
html5在线音乐列表播放器,HTML5列表音乐播放器SMusic
插件描述:一款基于HTML5.Css3的列表式音乐播放器,包含列表,音量,进度,时间,歌词展示以及模式等功能,不依赖任何库 SMusic使用方法这是一款基于HTML5以及CSS3的列表式音乐播放器, ...
简洁的 HTML5 音乐播放器
mePlayer 一款简洁的HTML5音乐播放器.内置两套主题,可在运行时一键切换, 点我在线预览默认主题有歌词时滚动显示歌词,无歌词时显示模拟频谱动画播放中鼠标悬停在界面上滑动滚轮可调节音量, ...

html5音乐和歌词同步,HTML5实现歌词同步

html5音乐和歌词同步,HTML5实现歌词同步相关推荐

最新文章

热门文章