辫子哥哥 发表于 2022-8-8 19:57

流浪的子弹 TO：东篱闲人

<style type="text/css">
.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; left:50px;top: 0; }
#lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>

<div class="mnBox">
      <div class="ctBox">
                <p style="text-align:center;"><img alt="580" height="327" src="https://wx.ttt.dj/updir/62f094f5351b2.jpg" /><br></p><br>
                <h2 style="padding-bottom: 10px;">流浪的子弹</h2><br>
                <h2 style="text-align:center;">帖赠：东篱闲人</h2>
                <pre>

                        知道闲人唱歌比我好听
                        但我就喜欢显摆                     
                        虽然唱的不好听
                        但我已经尽了九牛二虎之力
                        唱得再不好听心意是真的
                        送上一首以前的翻唱
                        流浪的子弹
                        希望老头不要嫌弃

                        一并送上祝福：
                        祝福闲人吃嘛嘛香身体倍儿棒


                </pre>
                <p style="margin: auto; width:120px; text-align:center; font-size:16px; color:#000;"><marqueescrollamount="2" direction="left" >帖赠：东篱闲人</marquee></p>

                <p style="text-align:center;"><audio id="myplayer" src="https://wx.ttt.dj/updir/62f093cf2f370.mp3" controls="controls" autoplay="autoplay"></audio></p>
                <div id="lrcDiv"><ul id="lrcUl"></ul></div><br><br>
                <p style="margin: 20px; text-align:center;">辫子哥哥 2022 08 08</p><br>
      </div>
</div>

<script language="javascript">

var lrcAr = [
["00:00.02","作曲 : 词 :刘旭阳"],
["00:11.02","原唱：刘旭阳"],
["00:16.33","翻唱：辫子哥哥"],
["00:23.35","我是一颗流浪的子弹"],
["00:28.60","体会人间太多悲欢冷暖"],
["00:33.80","上海北京成都和武汉"],
["00:38.24","笑着哭 哭着笑 都习惯"],
["00:43.93","我是一颗孤单的子弹"],
["00:48.57","总有一天没有力气走完"],
["00:54.39","大大的城市小小的房间"],
["00:59.09","会流泪 会害怕 会心酸"],
["01:04.84","我是一颗不安的子弹"],
["01:09.79","拼得一身伤只为拒绝平凡"],
["01:14.92","再多的阻碍都拼命射穿"],
["01:19.49","一杯酒 一支烟 已温暖"],
["01:25.25","也许有一天她会来到我身边"],
["01:30.30","为我擦干眼泪后的孤单"],
["01:35.44","跟她聊天 跟她享受平凡"],
["01:40.39","一辈子 一份爱 已心安"],
["01:46.34","LRC编辑：辫子哥哥"],
["02:06.25","我是一颗流浪的子弹"],
["02:11.39","体会人间太多悲欢冷暖"],
["02:16.51","上海北京成都和武汉"],
["02:21.02","笑着哭 哭着笑 都习惯"],
["02:26.79","我是一颗孤单的子弹"],
["02:31.28","总有一天没有力气走完"],
["02:37.11","大大的城市小小的房间"],
["02:41.62","会流泪 会害怕 会心酸"],
["02:47.43","我是一颗不安的子弹"],
["02:52.32","拼得一身伤只为拒绝平凡"],
["02:57.64","再多的阻碍都拼命射穿"],
["03:02.27","一杯酒 一支烟 已温暖"],
["03:08.02","也许有一天她会来到我身边"],
["03:13.04","为我擦干眼泪后的孤单"],
["03:18.16","跟她聊天 跟她享受平凡"],
["03:23.22","一辈子 一份爱 已心安"],
["03:28.05","一辈子 一份爱 已心安"],
["03:37.29","谢谢欣赏"],
["03:55.17",""]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理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 = "black";
                              lrcUl.style.top ="-" + (j * 20 - 20) + "px";
                        }
                        let idx = lrcAr;
                        document.getElementById("li" + idx).style.color = "red";
                }
      }
}
// 播放结束重置歌词样式
myaud.onended = function() {
      document.getElementById("li" + lrcAr).style.color = "black";
      lrcUl.style.top = 0;
      this.play();
}

</script>

辫子哥哥 发表于 2022-8-8 20:00

@东篱闲人

东篱闲人 发表于 2022-8-8 20:13

辫子哥哥 发表于 2022-8-8 20:00
@东篱闲人

来啦来啦。。。。{:4_187:}

东篱闲人 发表于 2022-8-8 20:13

哇，简直天籁之音，辫子你这是烟嗓啊。。。。{:5_116:}

东篱闲人 发表于 2022-8-8 20:14

这话唠的好正经啊，都不习惯辫子正经了。。。。{:5_117:}

东篱闲人 发表于 2022-8-8 20:15

多注意休息，别太劳累。。。。{:4_190:}

加林森 发表于 2022-8-8 20:19

挺好听的。小辫子厉害啊。大赞！

辫子哥哥 发表于 2022-8-8 20:28

东篱闲人 发表于 2022-8-8 20:13
来啦来啦。。。。

别跑太急{:4_170:}

辫子哥哥 发表于 2022-8-8 20:29

东篱闲人 发表于 2022-8-8 20:13
哇，简直天籁之音，辫子你这是烟嗓啊。。。。

后半首是高音，前半首自然低音

辫子哥哥 发表于 2022-8-8 20:30

东篱闲人 发表于 2022-8-8 20:14
这话唠的好正经啊，都不习惯辫子正经了。。。。

现在没有力气不正经了{:4_189:}

辫子哥哥 发表于 2022-8-8 20:30

东篱闲人 发表于 2022-8-8 20:15
多注意休息，别太劳累。。。。

谢了{:4_179:}

辫子哥哥 发表于 2022-8-8 20:30

加林森 发表于 2022-8-8 20:19
挺好听的。小辫子厉害啊。大赞！

谢谢队长{:4_187:}

东篱闲人 发表于 2022-8-8 20:36

辫子哥哥 发表于 2022-8-8 20:30
谢了

一切都会好起来的！{:5_154:}

东篱闲人 发表于 2022-8-8 20:38

辫子哥哥 发表于 2022-8-8 20:29
后半首是高音，前半首自然低音

很有专业范。。。。。{:5_116:}

东篱闲人 发表于 2022-8-8 20:38

辫子哥哥 发表于 2022-8-8 20:30
现在没有力气不正经了

光荣传统不能丢。。。{:5_117:}

加林森 发表于 2022-8-8 20:42

辫子哥哥 发表于 2022-8-8 20:30
谢谢队长

不客气的。看见你来了我很开心的。{:4_191:}

红影 发表于 2022-8-8 23:05

还是歌词同步呢，辫子好久不见，代码也做这么好了。翻唱也好听，高音部分貌似加了电音了{:4_173:}{:4_187:}

红影 发表于 2022-8-8 23:05

好帖子，东篱大哥收礼开心{:4_187:}

辫子哥哥 发表于 2022-11-17 21:34

都好几个月了{:4_201:}

辫子哥哥 发表于 2022-11-17 21:35

红影 发表于 2022-8-8 23:05
还是歌词同步呢，辫子好久不见，代码也做这么好了。翻唱也好听，高音部分貌似加了电音了

电音电到没有{:4_170:}
页: [1] 2
查看完整版本: 流浪的子弹 TO：东篱闲人