冬天的雨 发表于 2022-3-14 23:28

《骁》TO：马黑黑

<style type="text/css">
/* 帖子外框 */
#waiDiv { position: relative; left: -300px; top:150px; width: 1200px; height: 678px; background: url('https://pic.imgdb.cn/item/62262fe85baa1a80aba414c1.jpg') 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: 200px; 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: 250px; top: 35px; 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://s1.ananas.chaoxing.com/sv-w7/audio/a6/15/9e/e0adbeeb39f50e2f5196556ec23ede64/audio.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<script language="javascript">

var lrcAr=[
["00:00.000",""],
["00:03.91","《骁》TO：马黑黑"],
["00:13.52","歌手：井胧 井迪"],
["00:19.72","我走过"],
["00:20.97","玉门关外祁连山上飘的雪"],
["00:24.21","也走过"],
["00:28.90","长城边上潇潇吹过来的风"],
["00:28.93","山河边"],
["00:30.11","英雄遁入林间化成一场雨"],
["00:33.36","天地间 一柄剑 划破了青天"],
["00:38.42","我走过"],
["00:39.36","漠北万丈孤烟长河落日圆"],
["00:42.74","谁听说"],
["00:43.87","羌管胡琴悠悠唱不完的歌"],
["00:47.51","知己曰"],
["00:48.51","自古英雄豪杰当以仁为先"],
["00:52.02","天地间 江湖远 途径多少年"],
["00:57.21","若你说江湖是一道魂"],
["01:02.09","天边的云开了一扇门"],
["01:06.54","若你说江湖是一条河"],
["01:11.29","千年的眼望也望不穿"],
["01:16.74","歌词同步编辑：冬雨"],
["01:34.35","我走过"],
["01:35.41","漠北万丈孤烟长河落日圆"],
["01:38.85","谁听说"],
["01:40.03","羌管胡琴悠悠唱不完的歌"],
["01:43.53","知己曰"],
["01:44.59","自古英雄豪杰当以仁为先"],
["01:47.97","天地间 江湖远 途经多少年"],
["01:53.35","若你说江湖是一道魂"],
["01:58.11","天边的云开了一扇门"],
["02:02.49","若你说江湖是一条河"],
["02:07.24","千年的眼望也望不穿"],
["02:12.87","谢谢马黑 花潮有你学习氛围很浓"],
["02:33.38","冬雨学习帖"]
];
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>

冬天的雨 发表于 2022-3-14 23:30

@马黑黑
冬雨学习做一次歌词同步 谢谢马黑老师的精彩分享

冬天的雨 发表于 2022-3-14 23:30

@小辣椒
任务完成{:4_170:}

马黑黑 发表于 2022-3-14 23:37

雄壮，威武，大气制作！

冬天的雨 发表于 2022-3-14 23:39

马黑黑 发表于 2022-3-14 23:37
雄壮，威武，大气制作！

谢谢马黑的教程分享{:4_187:}

马黑黑 发表于 2022-3-14 23:49

冬天的雨 发表于 2022-3-14 23:39
谢谢马黑的教程分享

{:5_108:}

樵歌 发表于 2022-3-15 07:47

叱咤风云，威风凛凛的黑将军纵马扬刀，舍我其谁。这画做得好与歌配得极当！{:4_178:}

红影 发表于 2022-3-15 08:36

这个很壮阔，歌曲也很霸气。冬小雨的歌词同步颜色弄得很协调，漂亮的制作{:4_199:}

绿叶清舟 发表于 2022-3-15 11:25

大气唯美{:4_199:}冬雨这么晚还来啊，辛苦了

走过岁月 发表于 2022-3-15 13:58

很有气势的背景

走过岁月 发表于 2022-3-15 13:59

歌也好听，歌曲与背景很相衬

走过岁月 发表于 2022-3-15 14:00

{:4_191:} {:4_190:}

小辣椒 发表于 2022-5-27 15:11

这个才看见的，不错{:4_199:}

小辣椒 发表于 2022-5-27 15:12


@来看你
看看，你就和冬雨一样复制代码后自己套用自己的

来看你 发表于 2022-5-27 16:01

小辣椒 发表于 2022-5-27 15:12
@来看你
看看，你就和冬雨一样复制代码后自己套用自己的

噢噢，我看看，谢谢辣辣 {:4_179:}

马黑黑 发表于 2022-5-27 17:59

{:4_174:}

加林森 发表于 2022-5-27 22:43

好漂亮的制作。大气，有气势，{:4_199:}

岩新新 发表于 2022-5-28 07:52

欣赏精彩制作！

顾-念 发表于 2022-5-28 12:55

这歌我喜欢，帖子好听好看
页: [1]
查看完整版本: 《骁》TO：马黑黑