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> ...
随机推荐
- POJ3255 Roadblocks 严格次短路
题目大意:求图的严格次短路. 方法1: SPFA,同时求单源最短路径和单源次短路径.站在节点u上放松与其向量的v的次短路径时时,先尝试由u的最短路径放松,再尝试由u的次短路径放松(该两步并非非此即彼) ...
- Android+Jquery Mobile学习系列(1)-开发环境
开发环境是老生常谈的问题了,网上有很多关于Android环境安装的文章,我这里也就简单说明一下,不做过多分析. 想了解详细的安装说明,可以参见[百度经验] Java环境安装直接跳过,说一下Androi ...
- netcore发布到centos 验证码Zkweb.system.drawing不显示及乱码的问题
netcore发布到centos 使用的是Zkweb.system.drawing生成验证码,发布后可能会出现不显示及乱码的情况 1.验证码图片不显示(通过日志会发现生成图片时代码已经异常) Zkwe ...
- 大数据学习之路------借助HDP SANDBOX开始学习
一开始... 一开始知道大数据这个概念的时候,只是感觉很高大上,引起了我的兴趣.当时也不知道,这个东西是做什么的,有什么用,当然现在看来也是很模糊的样子,但是的确比一开始强了不少. 所以学习的过程可能 ...
- NOIP2014 day2 t2 寻找道路
寻找道路 NOIP2014 day2 t2 描述 在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到 终点的路径,该路径满足以下条件: 1.路径上的所有点的出边所指向的 ...
- 豆瓣项目(用react+webpack)
用豆瓣电影api的项目 电影列表组件渲染 步骤: 1. 发送Ajax请求 1.1 在组件的componentWillMount这个生命周期钩子中发送请求 1.2 发送ajax XMLHttpReque ...
- hdu 2489 dfs枚举组合情况+最小生成树
大家都说,搜索是算法的基础.今天最这题就有体会了.在n个顶点里选择m个顶点,求最小生成树.用到了深搜的回溯.所有情况都能枚举. #include<iostream> #include< ...
- css round corner div and transition
看stackoverflow上的圆角标签挺好看,自己动手试了下,用的属性是border-radius(即边框圆角半径,用px):加上transition effect,代码如下: <!DOCTY ...
- asp、asp.net、ado、ado.net各自区别和联系?
asp.net与ado.net 的区别? asp.net是微软公司的.Net技术框架下的B/S(网页方向)框架技术.ado.net则是由asp.net编程语言编写的数据访问层的总括..说白了就是:as ...
- 使用vs2017创建项目并添加到git中
参考 https://blog.csdn.net/qq373591361/article/details/71194651 https://blog.csdn.net/boonya/article/d ...