js实现音频歌词同步
来源:互联网 发布:博士论文数据造假 编辑:程序博客网 时间:2024/06/05 09:30
前言
之前通过js实现音频、视频播放,此文是实现音频与歌词同步播放的实现,主要是用于学习实现思想,本文需要想要了解的知识点如下:
- 如何实现音频与歌词同步?
- 如何改变浏览器默认的滚动条样式?
实现
此文实现只专注于实现思想,没有去处理兼容性细节,请使用Chrome来查看,下面主要说说音频与歌词同步的实现思路:
- 歌词文件是.lrc格式的,改文件中的内容形式如下:
从上图中可以看出是由时间点+歌词内容组成,基本看到lrc文件就知道了大体的实现思路了
大体的思想思路是:
- 获取歌词文件
- 获取时间点数组
- 获取歌词内容数组
- 判断音频是否加载成功
- 成功就将p节点内容就是每一行歌词,将其appendChild到歌词容器元素中
- 监听timeupdate事件,根据当前时间点与歌词时间点做比较,设置当前歌词的样式,并设置scrollTop是歌词区域滚动
具体的实现效果如下:
此文中将歌词写死在代码中了,Js没办法主动获取本地文件,通过ajax的方式,又存在特定浏览器兼容问题,考虑到是以学习其思想为目的,没有搭建后台服务,如果你不想要将歌词写死在代码中,可有如下方法:
- 搭建后台服务,通过ajax来获取
- 通过jsonp形式来获取
- 通过input[type=”file”] + FileReader的形式来
至此,已通过js实现了音频、视频、音频与歌词同步,这些都是主要点,后面会启动一个稍微大的项目,目前将目标定位为网易云音乐(客户端样式web版)。
阅读全文
0 0
- js实现音频歌词同步
- Android关于音频歌词同步实现思路(一)
- flash实现歌词同步
- Android 实现歌词同步
- android 歌词同步实现
- Android 实现歌词同步
- Android 实现歌词同步
- HTML5实现歌词同步
- audio实现歌词同步
- 歌词同步的实现(lrc)
- html5 audio实现歌词同步
- 播放器带歌词同步JS特效
- 我的项目7 js 实现歌词同步(额,小小的效果)
- BaiDu Mp3歌词同步功能实现
- VB2005使用类实现LRC歌词同步
- 音乐播放器实现歌词同步
- Android 音乐播放器 实现歌词同步
- 音乐播放器实现歌词同步
- 从0到1,打造DevOps易用工具链(精挑细选27种)
- URL的井号
- 【jzoj5389】【NOIP2017提高A组模拟9.26】【解梦】
- Raft 一致性算法论文译文
- Matlab 读写yuv文件
- js实现音频歌词同步
- JSON的String字符串与Java的List列表对象的相互转换
- 求正则覆盖&判断保持依赖
- [译] Kotlin 中我讨厌什么
- hihocoder#1345 : 小h的朋友们(矩阵快速幂)
- JSP基础知识(JSTL)
- org.hibernate.exception.com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException
- Rotate List
- 接口----定义