js播放音乐显示每句歌词

//本文以薛之谦的演员为例,文中的266097259.lrc为演员的歌词,本人为初学者,如有不好的地方,请指出

//HTML文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">    </script></head><body><audio id="player" src="yanyuan.mp3" controls="controls"></audio><div id="div"></div><script src="main.js"></script></body></html>

//JS文件

(function () {    var player=document.querySelector("#player");    var div=document.querySelector("#div");    var lrc=null;    function playing(lrcString) {        var lrcObject = {};        var lines = lrcString.split("\n");        var p = /\[(\d{2}):(\d{2})\.\d{2}\](.+)/;        for (var i = 0; i < lines.length; i++) {             var t=p.exec(lines[i]);             if(t) {                 var min = parseInt(t[1]);                 var sec = parseInt(t[2]);                 var c=t[3];                 var time = min * 60 + sec;                 lrcObject[time] = c;         }        }        return lrcObject;    }

    $.get("266097259.lrc").done(function (data) {        lrc = playing(data);    });

    setInterval(function () {    if (lrc) {        var content = lrc[Math.floor(player.currentTime)];            if (content) {

                  div.innerHTML = content;            }        }    }, 1000);})();
时间: 2024-08-11 07:49:16

js播放音乐显示每句歌词的相关文章

手机影音第十五天,利用service实现后台播放音乐,在通知栏显示当前音乐信息等

代码已经托管到码云上,有兴趣的小伙伴可以下载看看 https://git.oschina.net/joy_yuan/MobilePlayer 先来一张目前的音乐播放器的效果图,当播放时,手机的状态通知栏也会有音乐信息显示. 这里可以看到有歌名.演唱者,还有歌曲的总时间,当前播放时间,当前播放进度,音乐暂停.下一首,上一首,音乐循环模式(单曲循环,顺序播放.循环播放)功能的实现.下一步就是把中间空白的部分填充歌词,然后做成根据进度显示歌词. 由于这次的内容有点多,是写了一天半的代码,讲的没那么细,

C# WPF 低仿网易云音乐(PC)歌词控件

原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music.163.com/api/song/media?id=歌曲ID 填写歌曲的id即可获取到json格式的数据(歌曲ID获取的方法是:点击分享按钮>其他分享>复制链接,就可以在链接中看到了): {"songStatus":0,"lyricVersion":10,

C#winfrom播放器动态加载歌词

上周我们进行了结业项目答辩,是播放器项目.有一个关于播放器变唱歌边加载歌词的方法特别有意思,像酷狗那样子歌词和歌曲同步滚播的样子. 这里的工具是Visual Studio 2013,使用语言是C#和.net技术. 首先我们使用File.Exists(@"文件路径")判断lrc歌词文件是否存在,如果存在的话读取lrc文件. 这里可以用正则表达式,也可以用一个二维数组或两个数组.本文是用的二维数组. lrc文件也是文本文件,一句歌词就是一行文本.简单点理解就像数据库中的DataReader

音乐平台项目的几个问题总结(头像裁剪以及跨页面播放音乐)

关于头像裁剪 1.上传图片的裁剪,并没有采用后端裁剪,而采用前端裁剪,基于cropbox进行了修改 编码使用一个隐藏的input框存放 存放到数据库 2.本来想在后端解析base64编码重新生成文件,后来发现并没有必要,如果图片不是很大直接保存字符串到数据库就行了,这样还可以少一些http请求,不过缺点是Ie6不支持date:url的解析 3.图片变成base64编码之后,保存在数据库的字符长度高达16W 个字符,后来想办法改成jpeg+中等保存之后,长度变成3W,可以接受 下面从代码说起 界面

iOS播放音乐

http://www.jianshu.com/p/ce279bc773dd iOS播放音乐.后台播放.控制台控制相关的一些TIPS,基于StreamingKit 字数963 阅读595 评论0 喜欢9 首先给大家放一个StreamingKit的链接 简单的播放使用例子,可以看开源作者的演示demo. 由于整个播放器涉及到UI啊数据啊比较多,所以就不全抠下来当demo了,就在这里列一点TIPS,希望能帮助到大家. 歌曲播放形式我是这么写的: .h里: /** 歌曲播放形式 */ typedef e

IOS 后台运行 播放音乐

iOS 4开始引入的multitask,我们可以实现像ipod程序那样在后台播放音频了.如果音频操作是用苹果官方的AVFoundation.framework实现,像用AvAudioPlayer,AvPlayer播放的话,要实现完美的后台音频播放,依据app的功能需要,可能需要实现几个关键的功能. 首先,播放音频之前先要设置AVAudioSession模式,通常只用来播放的App可以设为AVAudioSessionCategoryPlayback即可.模式意义及其他模式请参考文档. 1 //后台

利用html5实现类似微信的手机摇一摇功能,并播放音乐,并且解决中文乱码的问题。

转载了@三井学长:http://blog.csdn.net/david1030/article/details/8229008 转载了@Hello Csn楠!:http://www.cnblogs.com/csn0721/ 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javas

后台播放音乐

iOS 4开始引入的multitask,我们可以实现像ipod程序那样在后台播放音频了.如果音频操作是用苹果官方的AVFoundation.framework实现,像用AvAudioPlayer,AvPlayer播放的话,要实现完美的后台音频播放,依据app的功能需要,可能需要实现几个关键的功能. 首先,播放音频之前先要设置AVAudioSession模式,通常只用来播放的App可以设为AVAudioSessionCategoryPlayback即可.模式意义及其他模式请参考文档. //后台播放

网页版酷我音乐 ---- 谷歌插件之歌词定位

前言 通过百度搜索歌曲,进入到酷我听歌页面时,发现没有歌词定位功能. 突然想到自己可不可以实现这个效果,于是就有了这篇文章. 分析 放上我喜欢的一首歌<Hello> .界面如下 通过分析html源码,得到以下结果 1.最重要的两部分区域: 歌词区域 . 播放进度区域 2.歌词区域是一个 div [class="w_lrc_content"] ,每一句歌词是一个p标签. 3.播放进度区域是一个 div [class="w_c_progress"], 而当前