播放音乐,歌词显示测试

2014-09-23 分类:js,php,html 阅读(6358) 评论(11)

实例讲解:

js代码部分

//这个,存储调节的时间值
			//localStorage是HTML5的新东西
			//localStorage代表着实际歌词时间和lrc歌词时间差
			if(!localStorage.time)
			{
				localStorage.time=0;
			}
			//			var a="[00:11.22]我[00:22.33]看[00:33.44]这样[00:44.55]不好吧";
			var a=" [00:02.17]单身情歌 [00:04.79]作词:易家福 作曲:陈耀川 [00:06.60]演唱:林志炫 [00:08.47] [00:16.91]抓不住爱情的我 [00:20.22]总是眼睁睁看它溜走 [00:24.57]世界上幸福的人到处有 [00:28.34]为何不能算我一个 [00:31.48] [00:32.61]为了爱孤军奋斗 [00:35.82]早就吃够了爱情的苦 [00:40.08]在爱中失落的人到处有 [00:43.91]而我只是其中一个 [00:46.93] [00:48.09]爱要越挫越勇 爱要肯定执着 [00:55.46]每一个单身的人得看透 [00:59.41]想爱就别怕伤痛 [01:04.16] [01:06.39]找一个最爱的深爱的想爱的亲爱的人 [01:11.89]来告别单身 [01:14.54]一个多情的痴情的绝情的无情的人 [01:19.68]来给我伤痕 [01:22.57]孤单的人那么多 快乐的没有几个 [01:30.02]不要爱过了错过了留下了单身的我 [01:35.19]独自唱情歌 [01:39.04] [01:53.67]为了爱孤军奋斗 [01:56.80]早就吃够了爱情的苦 [02:01.62]在爱中失落的人到处有 [02:05.17]而我不是最后一个 [02:08.51] [02:09.36]爱要越挫越勇 爱要肯定执着 [02:16.91]每一个单身的人得看透 [02:20.61]想爱就别怕伤痛 [02:26.42] [02:27.77]找一个最爱的深爱的想爱的亲爱的人 [02:33.11]来告别单身 [02:35.77]一个多情的痴情的绝情的无情的人 [02:40.91]来给我伤痕 [02:43.90]孤单的人那么多 快乐的没有几个 [02:51.22]不要爱过了错过了留下了单身的我 [02:56.35]独自唱情歌 [03:02.20] [03:27.26]找一个最爱的深爱的想爱的亲爱的人 [03:33.12]来告别单身 [03:35.74]一个多情的痴情的绝情的无情的人 [03:40.87]来给我伤痕 [03:43.57]伤心的人那么多 我应该勇敢的过 [03:51.52]不要爱过了错过了留下了单身的我 [03:56.42]独自唱情歌 [03:58.93]这首真心的痴心的伤心的 [04:02.81]单身情歌谁与我来合 [04:11.49]";
			var shijianshuzu=new Array();
			var gecishuzu=new Array();
			//解析歌词,将时间和歌词分开
			//时间放到shijianshuzu中
			//歌词放到gecishuzu中
			//shijianshuzu[i]就是对应的时间值
			//gecishuzu[i]就是对应的歌词
			//lrc歌词在代码中直接用变量a存储了,可以改
			//这两个数组的长度就是lrc歌词中有多少个类似"[xx:xx.xx]歌词"这样的
			function parse(lrc)
			{
				//如果lrc的内容是"[xx:xx.xx]歌词1[yy:yy.yy]歌词二"
				//那str这个数组长度是3
				//str[0]=""
				//str[1]="xx:xx.xx]歌词一"
				//str[2]="yy:yy.yy]歌词二"
				str=lrc.split("[");
				//因为str[0]="",所以跳过它
				for(var i=1;i";
				}
				//上面是用来显示所有歌词的,不用看
				//定时器,隔1s更新下歌词的显示
				setInterval(updategeci,1000);
			}
			//更新歌词
			function updategeci()
			{
				//显示了六行歌词,每一行分别改变innerHTML
				var geciyi=document.getElementById("yi");
				var gecier=document.getElementById("er");
				var gecisan=document.getElementById("san");
				var gecisi=document.getElementById("si");
				var geciwu=document.getElementById("wu");
				var geciliu=document.getElementById("liu");
				//由歌词时间计算出i,得到现在应该显示哪部分歌词
				//这函数下面有介绍
				var i=getcurrent();
				//如果gecishuzu[i-2]定义了,就显示,没定义,就不显示
				//下面几个类似的if-else结构类似。
				//这里写的很罗嗦,以后空了再改
				if(gecishuzu[i-2])
				{
					geciyi.innerHTML=gecishuzu[i-2];
				}
				else
				{
					geciyi.innerHTML=" ";
				}
				if(gecishuzu[i-1])
				{
					gecier.innerHTML=gecishuzu[i-1];
				}
				else
				{
					gecier.innerHTML=" ";
				}
				gecisan.innerHTML=gecishuzu[i];
				if(gecishuzu[i+1])
				{
					gecisi.innerHTML=gecishuzu[i+1];
				}
				else
				{
					gecisi.innerHTML=" ";
				}
				if(gecishuzu[i+2])
				{
					geciwu.innerHTML=gecishuzu[i+2];
				}
				else
				{
					geciwu.innerHTML=" ";
				}
				if(gecishuzu[i+3])
				{
					geciliu.innerHTML=gecishuzu[i+3];
				}
				else
				{
					geciliu.innerHTML=" ";
				}
			}
			//将歌曲实际播放的时间,和我们自己的歌词的时间,进行比较,算出现在应该显示的歌词
			function getcurrent()
			{
				var a=document.getElementById("test");
				var i=0;
				//152,154存歌词和时间的时候
				//时间是由小到大的
				//当然实际的歌词不一定都是由小到大,还可能是两个时间重复的歌词就合并到一起,其他的情况都没做处理
				for(i=0;i=a.currentTime)
					{
						return i;
					}
				}
				return i-1;
			}
			//函数写成这种形式是为了加载页面的时候自动执行
			//(function 函数名{})()
			(function ok()
			{
				parse(a);
			})()
			//歌词时间减少2S
			function back()
			{
				localStorage.time=parseInt(localStorage.time)-2;
				parse(a);
			}
			//歌词时间增加2s
			function forward()
			{
				localStorage.time=parseInt(localStorage.time)+2;

				parse(a);
			}

以上代码保存js文件,引用到html

html代码部分

	<script type="text/javascript" src="你的域名/lrc.js"></script>
		<div>
			<!--audio 是HTML5中的新元素-->
			<!--controls显示那个播放器 autoplay歌曲就绪后自动播放 loop歌曲放完了循环-->
			<audio  controls  id="test">
			<source src="http://m6.file.xiami.com/638/638/2781/22143_2051428_h.mp3" >
			</audio>
		</div><br />
		<div id="wenzi">
			<!--显示六行歌词-->
			<div id="yi" style="color:#000000"></div>
			<div id="er" style="color:#000000"></div>
			<div id="san" style="color:#000000"></div>
			<div id="si" style="color:#000000"></div>
			<div id="wu" style="color:#000000"></div>
			
		</div>

您可能也喜欢:

3种方法实现网页自动刷新重新加载

有时候我们需要网页自动刷新,比如用户通过Ajax加载了一些东西,而此时我们通过JavaScript无法完成网页内容的修改,那么我们就需要网页自动刷新。 大体来说,网页自动刷新有2中方法,一种是HTML的Meta标签,另外一种就是通过我们的JavaScript脚本,他们各有各的优势和缺点,这里分享给大...

more

防F12扒代码:按下F12关闭当前页面

只要按下那神秘的审查元素、按下那神秘的F12键,奇迹出现了!网站变成了空白页,可谓杀Bug放火必备佳品! 一段JavaScript代码即可实现上述功能,插入到 footer.php 的 前:  <script>function fuckyou(){ window.close(); /...

more

网站变灰代码-悼念遇难同胞

如果你也想和我一样网站变灰来悼念遇难的同胞 以下css代码加在你的css样式文件里面就可以了 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -m...

more

欢迎新朋友你的到来!
已经有11 条评论抢在你前面了~
昵称
邮箱
网站

  1. Chaos

    请教下 js文件保存在服务器根目录下 然后html在写文章的时候直接用代码模式插入 那这样 每个歌词都需要创建个js文件传到根目录 是么

    #1
    回复
  2. 岁月的童话

    parse()函数里面 for(var i=1;i”;} 这一句是什么意思?代码复制出去直接语法错误

    #2
    回复
  3. 雨林亭

    如果能通过LRC文件来载入就好了,或者通过QQ音乐的歌词接口来做。我见过有人用QQ音乐的歌词接口做过,我也一直很想要,目前我网站也用了LRC歌词,不过是通过LRC文件来调取的,而且歌词有延迟。

    #3
    回复
  4. aladd

    牛哄哄的技术博客~哈哈哈~~新年快乐~

    #4
    回复
  5. 豆杀包

    mark
    很早就想弄一个歌词同步显示的网页了→_→

    #5
    回复
  6. 你狠厉害的哇

    怎么你回复的我看不到呢?不发到我的邮箱。。
    自己从网上拷贝了一个表白的网页。能够加音乐,但是想放一个歌词同步,就类似你这一样。。但是我不会。。。
    我专业不是这个。。

    #6
    回复
  7. 你很厉害的哇。

    从你那学了个看别人qq头像的,你很厉害,挺崇拜的,虽然不是学着科目的,但是比较的喜欢。。希望您以后能常常发表这些浅而易懂的教程。而且你的工具很好用,,只不过那个qq音乐工具还原短连接以后显示是m4a格式的,我在论坛里不支持。。。。
    用心创造每一站!!

    #7
    回复
  8. ivkeji

    碉堡了啊..看到效果了 👿

    #8
    回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

    - 00:00 / 00:00