【分享】JavaScript播放MP3歌词同步显示

猿敲月下码 2010-12-09 01:52:12

加精

昨天看到有朋友在论坛上发帖问JavaScript如何播放MP3歌词同步显示

兴趣使然,下午捣鼓了下.现在做好了分享给大家.

原理很简单,就是通过播放器的时间跟歌词里面的时间进行比较,如果相同就显示歌词.

然后就是怎样存放歌词了.我的思路就是把每句话push到数组里面去,然后通过数组索引来获取歌词

播放器组件我用media player,因此网页只能用IE浏览器打开

下面是效果图:

画面有点搓,只能一句句显示,还没有精细到字扫描.目前还没什么思路... 不过将就下啦.

下载地址

...全文

4976 188 打赏收藏转发到动态举报

写回复

用AI写文章

188 条回复

切换为时间正序

请发表友善的回复…

发表回复

豌豆 2011-11-25

打赏
举报

谢楼主

IT_Elite0 2011-11-09

打赏
举报

不喜欢看书可以吧。不看书能不能做得好咯？

wang_tianbao 2011-11-09

打赏
举报

看看，参考参考……

sssschenyi 2011-10-31

打赏
举报

只看楼主的思路和原理，改天自已再写一个。

ttuy150 2011-10-31

打赏
举报

非常不错

hongfeng01 2011-10-10

打赏
举报

收藏学习了吖

曹西 2011-09-27

打赏
举报

今天看了很多牛人啊，顶顶

hellotoluck 2011-06-13

打赏
举报

不错的产品啊

「已注销」 2011-05-19

打赏
举报

想看但是下载不了我新来的怎么得分啊

zhaofucai0830 2011-05-19

打赏
举报

想学习学习，请问lz能抽空发一份吗？超顶!!!
Email:zhaofucai2010@163.com

Martin先生 2011-05-18

打赏
举报

怎么下不了啊

JKelfin 2011-01-13

打赏
举报

现在的HTML5中可以有video和audio这两个媒体控件(在chrome上是工作的)，你可以试试哦.
http://home.open-open.com/space-668-do-blog-id-1015.html
这个里面有些播放器做的很不错(建议使用chrome去用)。

zxj2634 2011-01-11

打赏
举报

[Quote=引用 152 楼 thc1987 的回复:]

引用 150 楼 wangtiantian23 的回复:
已经下载不了了！怎么办！

9楼的连接可以下载,或者留下邮箱吧
[/Quote]

我也要个sirzxj@126.com

zhengxiaoliu 2011-01-11

打赏
举报

您访问的资源不存在

jingchunlong 2011-01-10

打赏
举报

[Quote=引用 112 楼 thc1987 的回复:]

引用 110 楼 lizhanlang 的回复:
LZ你那LRC歌词文件好像都没有用到吧。。
这样要弄另一首歌那都得从新改写js文件。。
LZ是否想过直接读取LRC文件呢？
这东西不错，完全可以再改进，再弄得更好的，LZ加油咯。。

恩lrc文件没用到,我现在有个新版本了.把歌词处理放在了服务器端.直接操作lrc文件了.
过些时间再拿出来分享.这几天比较忙,没什么时间.
[/Quote]
感觉不用lrc也可以,大概这格式通用吧
楼主隐藏播放器,是因为没有处理播放器的事件吧
源代码没看,拙见

jingchunlong 2011-01-10