歌词提词器

来源：互联网发布：三层网络结构编辑：程序博客网时间：2024/04/29 21:05

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
height: 40px;
text-align: center;
line-height: 40px;
margin:300px auto;
}
</style>
</head>
<body>
<audio src="汪峰-怒放的生命.mp3" autoplay></audio>
<p></p>

//歌词

var str =`[00:00.00] 作曲 : 汪峰
[00:01.00] 作词 : 汪峰
[00:11.669]曾经多少次跌倒在路上
[00:16.910]曾经多少次折断过翅膀
[00:22.700]如今我已不再感到彷徨
[00:28.000]我想超越这平凡的奢望
[00:34.600]我想要怒放的生命
[00:40.130]就象飞翔在辽阔天空
[00:46.100]就象穿行在无边的旷野
[00:49.690]拥有挣脱一切的力量
[00:58.500]曾经多少次失去了方向
[01:03.700]曾经多少次破灭了梦想
[01:09.400]如今我已不再感到迷茫
[01:15.200]我要我的生命得到解放
[01:21.600]我想要怒放的生命
[01:26.939]就象飞翔在辽阔天空
[01:33.300]就象穿行在无边的旷野
[01:36.540]拥有挣脱一切的力量
[01:43.390]我想要怒放的生命
[01:48.960]就象矗立在彩虹之颠
[01:55.100]就象穿行璀璨的星河
[01:58.740]拥有超越平凡的力量
[02:29.570]曾经多少次失去了方向
[02:34.869]曾经多少次破灭了梦想
[02:40.359]如今我已不再感到迷茫
[02:45.879]我要我的生命得到解放
[02:52.279]我想要怒放的生命
[02:57.890]就象飞翔在辽阔天空
[03:03.499]就象穿行在无边的旷野
[03:07.569]拥有挣脱一切的力量
[03:14.339]我想要怒放的生命
[03:19.959]就象矗立在彩虹之颠
[03:26.299]就象穿行璀璨的星河
[03:29.689]拥有超越平凡的力量
[03:37.990]我想要怒放的生命
[03:42.109]就象飞翔在辽阔天空
[03:47.700]就象穿行在无边的旷野
[03:51.820]拥有挣脱一切的力量
[03:59.299]我想要怒放的生命
[04:04.890]就象矗立在彩虹之颠
[04:09.679]就象穿行璀璨的星河
[04:13.869]拥有超越平凡的力量
[04:35.584]`;
//字符串的高级操作：链接concat，截取slice,substr,substring,根据指定索引查找charAt(),根据字符查找索引indexOf（）
//数组可以变字符串：join

//字符串以某字符切割为相应的数组数(不包括该字符)：split("某字符")

var arr = str.split('[');//以[分割字符串str,并存入arr数组
arr.shift();//删除掉前面的空格，或者换行符

var time=[];//定义数组，用于存储歌词播放时间
var content=[];//定义数组，用于存储歌词
for(var i=0;i<arr.length;i++){
var e=arr[i].split(']');//将整个歌词数组都一"]"分割成两个数组
time[i]=e[0];//将时间存储在timer数组中
content[i]=e[1].trim();//将歌词存储在内容数组中
}
var t=0;//时间
var j=0;//歌词内容数组的索引

var tindex=0;

var p=document.getElementsByTagName('p')[0];

p.innerText="怒放的生命";//歌词播放前，显示歌名

setTimeout(function(){
p.innerText=content[0];
},100);//主要是我下载的歌曲前奏较长，此定时器用于播放前奏之后再播放第一句歌词（歌词和歌曲出处不同）

function funTimer(){
var k=time[j].split(':');
if(j<time.length){
var k1=time[j+1].split(':');
tindex=parseInt(k1[0])*60000+parseFloat(k1[1])*1000;//将上一句歌词的播放时间转化为毫秒
}
t=parseInt(k[0])*60000+parseFloat(k[1])*1000;//将当前歌词的播放时间，转换为毫秒数
t=tindex-t;//计算上一句歌词和当前歌词相间隔的时间
p.innerText=content[j++];//显示当前歌词，并将数组索引值加1
var timer=setTimeout(funTimer,t);//以上一句到当前歌词的播放时间间隔为定时时间，循环函数
}
setTimeout(funTimer,500);//初次执行函数

</script>

</body>
</html>

阅读全文

0 0