HTML5实现歌词同步
开篇
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放。相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签
audio标签
实现一个audio标签非常easy,相应的html代码例如以下:
<audio id="player"
src="music/我在人民广场吃炸鸡.mp3"
autoplay controls>
</audio>
上述代码不须要一行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样式太水了,能够看看以下其它的链接。
HTML5实现歌词同步的更多相关文章
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- HTML5实践之歌词同步播放器
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
- 用HTML5的Audio标签做一个歌词同步的效果
HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中.这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手. 首先你需要向页面中插入 ...
- TextView实现歌词同步
利用TextView实现歌词同步显示,这是一个简单的利用TextView实现滚动实时显示歌词的. 里面的内容都已经写上了详细的注释.里面播放音乐的时候歌词同步展示. 做媒体这块的朋友可以学习一下,练练 ...
- Jplayer歌词同步显示插件
http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图 ...
- Android VLC播放器二次开发3——音乐播放(歌曲列表+歌词同步滚动)
今天讲一下对VLC播放器音频播放功能进行二次开发,讲解如何改造音乐播放相关功能.最近一直在忙着优化视频解码部分代码,因为我的视频播放器需要在一台主频比较低的机器上跑(800M主频),所以视频解码能力受 ...
- AS3 歌词同步
这里实例素材: 我们不一样.lrc 我们不一样.mp3 歌词同步其实就是靠lrc文本文件,打开它,可以看到时间点和对应的歌词. 打开lrc内容如下: [ti:我们不一样][ar:大壮][al:][by ...
- 基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <textare ...
- 我的项目7 js 实现歌词同步(额,小小的效果)
在项目中须要做一个播放器,还要实现歌词同步的效果,就跟如今搜狗音乐的歌词同步差点儿相同,在网上查了一些关于这方面的.整理了一下,在这里,其有用这种方法能够吗? <!DOCTYPE html> ...
随机推荐
- GStreamer基础教程02 - 基本概念
摘要 在 Gstreamer基础教程01 - Hello World中,我们介绍了如何快速的通过一个字符串创建一个简单的pipeline.为了能够更好的控制pipline中的element,我们需要单 ...
- Irrlicht 1.8.4 + Win7 + VC2015 + x64 +OpenGL编译
1. 下载irrlicht1.8.4 https://nchc.dl.sourceforge.net/project/irrlicht/Irrlicht%20SDK/1.8/1.8.4/irrlich ...
- 第三课 创建函数 - 从EXCEL读取 - 导出到EXCEL - 异常值 - Lambda函数 - 切片和骰子数据
第 3 课 获取数据 - 我们的数据集将包含一个Excel文件,其中包含每天的客户数量.我们将学习如何对 excel 文件进行处理.准备数据 - 数据是有重复日期的不规则时间序列.我们将挑战数 ...
- 三.Windows I/O模型之事件选择(WSAEventSelect )模型
1.事件选择模型:和异步选择模型类似的是,它也允许应用程序在一个或多个套接字上,接收以事件为基础的网络事件通知.对于异步选择模型采用的网络事件来说,它们均可原封不动地移植到事件选择模型.事件选择模型和 ...
- ubuntu下安装 nginx + php + memcached + mariadb
一,apt-get 安装 1,安装nginx sudo apt-get install nginx 所有的配置文件都在/etc/nginx下,虚拟主机配置在/etc/nginx/sites-avail ...
- C# dataGridView1 添加数据 和清空数据
#region MyRegion DataGridViewTextBoxColumn col = new DataGridViewTextBoxColumn(); DataGridViewTextBo ...
- 图片无损放大软件PhotoZoom分屏预览功能 ,简直好用!
PhotoZoom是一款智能放大图片软件,很多用户在初次使用PhotoZoom,发现图片所处的区域上方有四个不同方式的预览选项.因为很多初学者使用时不明白这四个按钮有什么作用,所以小编接下来讲解一下P ...
- Zbrush 4R7中的镜像功能是怎么使用的?
ZBrush一款3D图形绘制软件,功能十分强大,在雕刻建模的时候镜像工具是我们经常要用到的,它可以方便快捷雕刻对称的模型,那么ZBrush®中怎样镜像呢,本文小编将做详细介绍. ZBrush 3D镜像 ...
- Python中的多个装饰器装饰一个函数
def wrapper1(func1): def inner1(): print('w1 ,before') func1() print('w1 after') return inner1 def w ...
- oracle 删除表空间及数据文件方法
oracle 11g版本,创建数据库表空间,默认单个数据文件最大为32G,如果数据文件大于32G,可以增加数据文件. --删除空的表空间,但是不包含物理文件 drop tablespace table ...