歌词提词器

最新推荐文章于 2024-04-30 18:09:51 发布

mumu42

最新推荐文章于 2024-04-30 18:09:51 发布

阅读量1.9k

点赞数 1

分类专栏：经典案例

经典案例专栏收录该内容

23 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 150px;
}
p{
width: 600px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 30px;
font-weight: 800;
border: 1px solid red;
margin: 100px auto;
}
audio{
/*position: relative;*/
width: 600px;
height: 50px;
/*top:100px;
left: 500px;*/
}
</style>
</head>
<body>
<div class="box">
<audio src="img/34BA43283371A94F.mp3" autoplay="autoplay" controls="controls"></audio>
<p></p>
</div>

<script>
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 p=document.getElementsByTagName("p")[0];
var arr = str.split("[");
arr.shift();
// console.log(arr);
//我写一个函数，处理每一句歌词
function every(str){
var everyArr = str.split(']');
// console.log(everyArr);
var time = everyArr[0];
var content = everyArr[1].trim();

var minutes=Number(time.slice(0,2));
var seconds=Number(time.slice(3));
var ms=(minutes*60+seconds)*1000;
// console.log(minutes);
// console.log(typeof(minutes));
// console.log(seconds);
// console.log(minutes*60)
// console.log(ms);
// console.log(time);
// console.log(content);
setTimeout(function(){
p.innerHTML=content;
},ms);
}
for(var i=0;i<arr.length;i++){
every(arr[i]);
}

</script>

</body>
</html>