js实现音频歌词同步

前言

之前通过js实现音频、视频播放，此文是实现音频与歌词同步播放的实现，主要是用于学习实现思想，本文需要想要了解的知识点如下：

如何实现音频与歌词同步？
如何改变浏览器默认的滚动条样式？

实现

此文实现只专注于实现思想，没有去处理兼容性细节，请使用Chrome来查看，下面主要说说音频与歌词同步的实现思路：

歌词文件是.lrc格式的，改文件中的内容形式如下：

从上图中可以看出是由时间点+歌词内容组成，基本看到lrc文件就知道了大体的实现思路了

大体的思想思路是：

获取歌词文件
获取时间点数组
获取歌词内容数组
判断音频是否加载成功
成功就将p节点内容就是每一行歌词，将其appendChild到歌词容器元素中
监听timeupdate事件，根据当前时间点与歌词时间点做比较，设置当前歌词的样式，并设置scrollTop是歌词区域滚动

具体的实现效果如下：

此文中将歌词写死在代码中了，Js没办法主动获取本地文件，通过ajax的方式，又存在特定浏览器兼容问题，考虑到是以学习其思想为目的，没有搭建后台服务，如果你不想要将歌词写死在代码中，可有如下方法：

搭建后台服务，通过ajax来获取
通过jsonp形式来获取
通过input[type=”file”] + FileReader的形式来

至此，已通过js实现了音频、视频、音频与歌词同步，这些都是主要点，后面会启动一个稍微大的项目，目前将目标定位为网易云音乐（客户端样式web版）。

js实现音频歌词同步相关推荐

html+js的lrc歌词同步播放器
<html> <head> <title>lrc歌词同步播放器</title> <style> body, td { font-family ...
Android关于音频歌词同步实现思路（一）
最近项目需要用到音频和歌词同步的功能,网上有单一的小功能,比如说单独的读取lrc文件的歌词功能,有MediaPlayer和seekbar的使用.没有结合起来的方法,我已经实现,并且定位和时间点的定位比 ...
html js音乐歌词滚动,如何用html+js实现音乐歌词同步播放器
html> 随便听听 var playlist=[]; var bglist=[ "http://img04.taobaocdn.com/imgextra/i4/1655943686/ ...
js解析lrc 实现lrc歌词同步滚动效果
这两天想着做一个h5的网页播放器,实现歌词同步滚动但是上网找了很多资料,竟发现没有比较完善的代码供参考,但是无意间看到了百度的千千音乐有这样的效果,就想着一定能通过js实现经过两三天的努力,终于做 ...
HTML5实践之歌词同步播放器
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
php 歌词同步,HTML5实践之歌词同步播放器的示例代码分享
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
html简单歌词同步教程,HTML5实现歌词同步(示例代码)
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放.相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签 audio标签实现一个 ...
歌词同步滚动，比市面的大多数效果都好，在平滑滚动的前提下加上了鼠标滚轮滚动以及上下拖拽功能
歌词滚动核心原理解析歌词文件,转换成JSON 对象,java 代码放在最下面将歌词时间部分存到数组,字符部分放到 HTML 标签里面,通过Jquery 选中所有歌词 $li ,拿到一个类似于数组的 ...

js实现音频歌词同步

前言

实现

js实现音频歌词同步相关推荐

最新文章

热门文章