你笑起来真好看TO：千羽
本帖最后由 冬天的雨 于 2022-5-25 22:53 编辑 <br /><br /><style type="text/css">/* 帖子外框 */
#waiDiv { position: relative; left: -180px; top:120px; width: 956px; height: 483px; background: url('https://pic.imgdb.cn/item/628e0ffe0947543129996075.jp') no-repeat; padding: 12px; }
/* 帖子标题 */
#txtDiv { position: absolute; color:#cd406b; font-weight:bold; font-size: 2em; text-shadow: 1px 1px 2px #20B2AA; }
/* 歌词 */
#lrcDiv { width: 300px; height: 43px; overflow: hidden; position: relative; left: 240px; top: 250px; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 20px; font-size: 1em; line-height: 20px; color: #fffe89; text-shadow: 1px 1px 2px Red ; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
/* 按钮 */
#btn-ro { position: relative; left: 150px; top: 135px; width: 8px; height: 8px; background: white; border: 13px solid; border-color: orange green; border-radius: 50%; box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25); cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="waiDiv">
<div id="txtDiv"></div>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<div id="btn-ro"></div>
</div>
<audio id="myplayer" src="https://music.163.com/song/media/outer/url?id=1368934278.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<script language="javascript">
var lrcAr=[
["00:00.000",""],
["00:00.97","你笑起来真好看-TO：千羽"],
["00:08.89","想去远方的山川"],
["00:11.56","想去海边看海鸥"],
["00:14.43","不管风雨有多少"],
["00:17.30","有你就足够"],
["00:20.09","喜欢看你的嘴角"],
["00:22.96","喜欢看你的眉梢"],
["00:25.83","白云挂在那蓝天"],
["00:28.56","像你的微笑"],
["00:31.12","你笑起来真好看"],
["00:33.88","像春天的花一样"],
["00:36.86","把所有的烦恼所有的忧愁"],
["00:39.98","统统都吹散"],
["00:42.35","你笑起来真好看"],
["00:45.40","像夏天的阳光"],
["00:48.51","整个世界全部的时光"],
["00:51.37","美得像画卷"],
["00:54.18","LRC歌词编辑：冬雨"],
["01:05.77","想去远方的山川"],
["01:08.44","想去海边看海鸥"],
["01:11.31","不管风雨有多少"],
["01:14.25","有你就足够"],
["01:17.03","喜欢看你的嘴角"],
["01:19.90","喜欢看你的眉梢"],
["01:22.77","白云挂在那蓝天"],
["01:25.57","像你的微笑"],
["01:28.07","你笑起来真好看"],
["01:30.81","像春天的花一样"],
["01:33.74","把所有的烦恼所有的忧愁"],
["01:36.92","统统都吹散"],
["01:39.35","你笑起来真好看"],
["01:42.33","像夏天的阳光"],
["01:45.39","整个世界全部的时光"],
["01:48.44","美得像画卷"],
["01:50.99","你笑起来真好看"],
["01:53.86","像春天的花一样"],
["01:56.55","把所有的烦恼所有的忧愁"],
["01:59.68","统统都吹散"],
["02:02.36","你笑起来真好看"],
["02:05.11","像夏天的阳光"],
["02:08.15","整个世界全部的时光"],
["02:11.09","美得像画卷"],
["02:13.70","你笑起来真好看"],
["02:16.44","像春天的花一样"],
["02:19.31","把所有的烦恼所有的忧愁"],
["02:22.49","统统都吹散"],
["02:25.04","你笑起来真好看"],
["02:27.78","像夏天的阳光"],
["02:30.96","整个世界全部的时光"],
["02:33.95","美得像画卷"],
["02:37.13","整个世界全部的时光"],
["02:40.17","美得像画卷"],
["02:45.39","千羽收礼开心"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
var mbtn = document.getElementById('btn-ro'); //播放暂停按钮
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "#fffe89";
lrcUl.style.top ="-" + (j * 20 - 20) + "px";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "orange";
}
}
}
// 播放结束重置歌词样式
myaud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "black";
lrcUl.style.top = 0;
this.play();
}
// 按钮相关
myaud.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mbtn.onclick = function(){ myaud.paused ? (myaud.play(), this.style.animationPlayState="running") : (myaud.pause(), this.style.animationPlayState="paused"); }
</script>
<br><br><br><br><br><br><br><br><br><br> @千羽
小千羽完成任务{:4_170:} 把小千羽做进图图里面了@来看你 冬雨不会高科技就做个马老师以前的套用一个 这个歌词同步做得好。羽儿笑起来真好看，冬小雨的帖子也真好看{:4_187:} 冬雨制作得真漂亮。同步的歌曲很美的。千羽收礼开森！{:4_199:} 欣赏精彩制作！ 很好听的童声 ，。。{:4_204:} 高科技的帖子 {:4_187:} 冬天的雨 发表于 2022-5-25 22:51
把小千羽做进图图里面了@来看你
看千羽来咋说 {:5_106:} 红影 发表于 2022-5-26 08:14
这个歌词同步做得好。羽儿笑起来真好看，冬小雨的帖子也真好看
不能和你们比的{:4_170:} 加林森 发表于 2022-5-26 08:28
冬雨制作得真漂亮。同步的歌曲很美的。千羽收礼开森！
谢谢队长欣赏{:4_187:} 岩新新 发表于 2022-5-26 14:02
欣赏精彩制作！
谢谢新新欣赏{:4_187:} 来看你 发表于 2022-5-26 15:47
很好听的童声 ，。。
感谢水哥的礼物，翻唱收到了{:4_187:}{:4_177:} 来看你 发表于 2022-5-26 15:47
高科技的帖子
真不是的，不能和他们比的 来看你 发表于 2022-5-26 15:48
看千羽来咋说
千羽肯定说好的{:4_170:} 冬天的雨 发表于 2022-5-26 21:00
感谢水哥的礼物，翻唱收到了
你的夸奖也收到了{:5_106:} 冬天的雨 发表于 2022-5-26 21:01
真不是的，不能和他们比的
我不会的都是高科技 {:4_187:} 冬天的雨 发表于 2022-5-26 20:53
谢谢队长欣赏
客气啦。晚上好！ 来看你 发表于 2022-5-26 21:02
你的夸奖也收到了
唱的真好，掌声响起来{:4_199:}{:4_170:}