开篇

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

在线Demo

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绘制所有完成。

在线Demo

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

Blog同步

简书同步

HTML5实现歌词同步的更多相关文章

  1. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  2. HTML5实践之歌词同步播放器

    歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...

  3. 用HTML5的Audio标签做一个歌词同步的效果

    HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中.这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手. 首先你需要向页面中插入 ...

  4. TextView实现歌词同步

    利用TextView实现歌词同步显示,这是一个简单的利用TextView实现滚动实时显示歌词的. 里面的内容都已经写上了详细的注释.里面播放音乐的时候歌词同步展示. 做媒体这块的朋友可以学习一下,练练 ...

  5. Jplayer歌词同步显示插件

    http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图 ...

  6. Android VLC播放器二次开发3——音乐播放(歌曲列表+歌词同步滚动)

    今天讲一下对VLC播放器音频播放功能进行二次开发,讲解如何改造音乐播放相关功能.最近一直在忙着优化视频解码部分代码,因为我的视频播放器需要在一台主频比较低的机器上跑(800M主频),所以视频解码能力受 ...

  7. AS3 歌词同步

    这里实例素材: 我们不一样.lrc 我们不一样.mp3 歌词同步其实就是靠lrc文本文件,打开它,可以看到时间点和对应的歌词. 打开lrc内容如下: [ti:我们不一样][ar:大壮][al:][by ...

  8. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

  9. 我的项目7 js 实现歌词同步(额,小小的效果)

    在项目中须要做一个播放器,还要实现歌词同步的效果,就跟如今搜狗音乐的歌词同步差点儿相同,在网上查了一些关于这方面的.整理了一下,在这里,其有用这种方法能够吗? <!DOCTYPE html> ...

随机推荐

  1. GStreamer基础教程02 - 基本概念

    摘要 在 Gstreamer基础教程01 - Hello World中,我们介绍了如何快速的通过一个字符串创建一个简单的pipeline.为了能够更好的控制pipline中的element,我们需要单 ...

  2. 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 ...

  3. 第三课 创建函数 - 从EXCEL读取 - 导出到EXCEL - 异常值 - Lambda函数 - 切片和骰子数据

    第 3 课   获取数据 - 我们的数据集将包含一个Excel文件,其中包含每天的客户数量.我们将学习如何对 excel 文件进​​行处理.准备数据 - 数据是有重复日期的不规则时间序列.我们将挑战数 ...

  4. 三.Windows I/O模型之事件选择(WSAEventSelect )模型

    1.事件选择模型:和异步选择模型类似的是,它也允许应用程序在一个或多个套接字上,接收以事件为基础的网络事件通知.对于异步选择模型采用的网络事件来说,它们均可原封不动地移植到事件选择模型.事件选择模型和 ...

  5. ubuntu下安装 nginx + php + memcached + mariadb

    一,apt-get 安装 1,安装nginx sudo apt-get install nginx 所有的配置文件都在/etc/nginx下,虚拟主机配置在/etc/nginx/sites-avail ...

  6. C# dataGridView1 添加数据 和清空数据

    #region MyRegion DataGridViewTextBoxColumn col = new DataGridViewTextBoxColumn(); DataGridViewTextBo ...

  7. 图片无损放大软件PhotoZoom分屏预览功能 ,简直好用!

    PhotoZoom是一款智能放大图片软件,很多用户在初次使用PhotoZoom,发现图片所处的区域上方有四个不同方式的预览选项.因为很多初学者使用时不明白这四个按钮有什么作用,所以小编接下来讲解一下P ...

  8. Zbrush 4R7中的镜像功能是怎么使用的?

    ZBrush一款3D图形绘制软件,功能十分强大,在雕刻建模的时候镜像工具是我们经常要用到的,它可以方便快捷雕刻对称的模型,那么ZBrush®中怎样镜像呢,本文小编将做详细介绍. ZBrush 3D镜像 ...

  9. Python中的多个装饰器装饰一个函数

    def wrapper1(func1): def inner1(): print('w1 ,before') func1() print('w1 after') return inner1 def w ...

  10. oracle 删除表空间及数据文件方法

    oracle 11g版本,创建数据库表空间,默认单个数据文件最大为32G,如果数据文件大于32G,可以增加数据文件. --删除空的表空间,但是不包含物理文件 drop tablespace table ...