html简单歌词同步教程,HTML5实现歌词同步(示例代码)

开篇

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

audio标签

实现一个audio标签非常easy，相应的html代码例如以下：

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

autoplay controls>

上述代码不须要一行js脚本就能实现音乐播放。当中有三个经常使用的属性，分别为：音频源文件，是否自己主动播放以及是否显示播放器控件。

因为没有不论什么ui的展现，audio标签在chrome的默认风格例如以下图:

能够看出，一个主要的播放器还包含了显示当前时间。播放，暂停，快进快退等功能。这些功能都决定了怎样非常好的实现歌词同步(兴许介绍)。

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

Browser Compatibility

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

歌词

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

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

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

为了描写叙述简单，本文仅以最简单的lyric格式作为说明。解说怎样分离歌词进行歌词同步。

例如以下，为一首歌曲的歌词文件:

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

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

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

3.将时间转换为分钟

转换过程较为简单，仅仅需一个简单的正则匹配，步骤例如以下：

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

制作歌词ui。

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

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

3.加入歌词

到此。歌词同步以及ui绘制所有完成。

PS:CSDN的markdown样式太水了,能够看看以下其它的链接。

html简单歌词同步教程,HTML5实现歌词同步(示例代码)相关推荐

百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧
本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家HTML5源码和解释,也给大家做个参考.对HTML5感兴趣的小伙伴可以一起跟随小编过来看看吧本文介绍了Html5百叶 ...
html常规的布局模版,html5/css3常规布局(示例代码)
简介这篇文章主要介绍了html5/css3常规布局(示例代码)以及相关的经验技巧,文章约2644字,浏览量165,点赞数6,值得推荐! content="initial-scale=1.0, ...
GIS开源库GEOS库学习教程(一)：编译及示例代码
1.介绍 GEOS库是一个集合形状的拓扑关系操作实用库,简单得说,就是判断两个几何形状之间关系和对两个几何形状进行操作以形成新的几何形状的库.GEOS是仿照JTS库做的,是JTS的C++实现.下面 ...
html5播放器的示例代码
本次的分享是一个基于HTML5标签实现的一个自定义视频播放器.其中实现了播放暂停.进度拖拽.音量控制及全屏等功能. 效果预览核心思路我相信一定会有些没有接触过制作自定义播放器的童鞋对于标签的认识 ...
uni-app读取html缓存,uni-app同步缓存值设置读取删除(示例代码)
A页面去login页面 msg : [ \'uniapp行业峰会频频亮相开发者反响热烈\', \'DCloud完成B2轮融资,uni-app震撼发布\', \'36氪热文榜推荐.CSDN公号推荐 D ...
简单的java单位换算_单位换算示例代码
package api.jisuapi.unitconvert; import java.net.URLEncoder; import api.util.HttpUtil; import net.sf ...
百度语音合成 html5,百度语音合成AI(示例代码)
注意:不要使用Dw编辑PHP代码,会因为编码问题出错!! require_once 'AipSpeech.php'; // 你的 APPID AK SK const APP_ID = '112*** ...
html5音乐和歌词同步,HTML5实现歌词同步
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签. audio标签实现一 ...
android 歌词同步换行,HTML5音乐播放器同步显示歌词
歌词文件的格式实现之前,当然得了解一下歌词文件的格式了.常规歌词文件的格式基本是一句一行,每行由两部分组成,前面是中括号括起来的时间轴,后面紧跟歌词,像下面这样:[ti:记兰生襄铃] [ar:HIT ...

html简单歌词同步教程,HTML5实现歌词同步(示例代码)

html简单歌词同步教程,HTML5实现歌词同步(示例代码)相关推荐

最新文章

热门文章