加林森 发表于 2022-2-27 16:59

《走自己的路》 GALA TO:小辣椒

本帖最后由 加林森 于 2022-2-27 18:42 编辑 <br /><br /><style type="text/css">
/* 帖子外框 */
#waiDiv { position: relative; left: -214px; top:80px; width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/621b37e42ab3f51d91a79db4.jpg') no-repeat; padding: 12px; }
/* 帖子标题 */
#txtDiv { position: absolute; color:#ddd; font-weight:bold; font-size: 2em; text-shadow: 2px 2px 4px #ccc; }
/* 歌词 */
#lrcDiv { width: 300px; height: 43px; overflow: hidden; position: relative; left: 500px; top: 40px; 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: #fff; text-shadow: 1px 1px 2px red ; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
/* 按钮 */
#btn-ro { position: relative; left: 450px; 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">走<br>自<br>己<br>的<br>路</div>
      <div id="lrcDiv"><ul id="lrcUl"></ul></div>
      <div id="btn-ro"></div>
</div>
<audio id="myplayer" src="http://www.kumeiwp.com/sub/filestores/2022/02/26/92f4ba2a09186aae5f79e702cef5fa42.mp3"></audio>

<script language="javascript">

var lrcAr=[
["00:01.64","走自己的路 - GALA[乐队"],
["00:16.08","词:苏朵 曲:苏朵"],
["00:18.28","编曲:GALA乐队&欧阳尹路"],
["00:19.43","岳麓山川我呼啸飞跃海拔"],
["00:23.08","桀骜不驯孤身驰骋到白发"],
["00:26.69","江河湖海我奔腾翻涌浪花"],
["00:30.72","所有辜负都以放逐为代价"],
["00:35.20","你曾点燃黑夜在星空之下"],
["00:39.54","那是一生中最怀念的刹那"],
["00:43.71","我不知道究竟该如何表达"],
["00:48.07","让你心碎我灵魂更似刀伐"],
["00:51.98","我是匹野马"],
["01:00.64","请忘记我吧"],
["01:09.57","日出送晚霞"],
["01:17.31","美丽如昙花"],
["01:43.51","物换星移寄托随冰雪融化"],
["01:47.52","远方再聚也许是痴人梦话"],
["01:51.60","只有鸟儿在身旁唱着歌啊"],
["01:55.62","你若听到就别再为我牵挂"],
["01:59.87","我是匹野马"],
["02:08.32","正浪迹天涯"],
["02:16.73","路在我脚下"],
["02:24.88","狂风卷起沙"],
["02:35.18","啦啦啦啦啦啦啦..."],
["02:41.30","啦啦啦啦啦啦啦..."],
["03:08.63","我是匹野马"],
["03:16.41","要浪迹天涯"],
["03:24.90","我是匹野马"],
["03:33.46","美丽如昙花"],
["04:26.14","谢谢欣赏"]
];
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 = "#fff";
                              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>

加林森 发表于 2022-2-27 16:59

@小辣椒 @马黑黑 @红影

千羽 发表于 2022-2-27 17:48

好漂亮的小碟播放器{:4_199:}

千羽 发表于 2022-2-27 17:49

音乐很好听{:4_208:}

千羽 发表于 2022-2-27 17:51

队长现在技艺高超,羡慕几下{:4_205:}

红影 发表于 2022-2-27 18:25

最开始有一句“回来爱的身边-林忆莲”,这个好像不是歌曲里的吧。

红影 发表于 2022-2-27 18:27

1、2句的歌词同步有点问题,后面的对了。队长真棒{:4_187:}

加林森 发表于 2022-2-27 18:37

本帖最后由 加林森 于 2022-2-27 18:41 编辑

红影 发表于 2022-2-27 18:25
最开始有一句“回来爱的身边-林忆莲”,这个好像不是歌曲里的吧。
忘记删除了。{:4_189:}

加林森 发表于 2022-2-27 18:40

千羽 发表于 2022-2-27 17:48
好漂亮的小碟播放器

谢谢千羽支持。{:4_187:}{:4_190:}

加林森 发表于 2022-2-27 18:40

千羽 发表于 2022-2-27 17:49
音乐很好听

嗯嗯。{:4_190:}

加林森 发表于 2022-2-27 18:42

红影 发表于 2022-2-27 18:27
1、2句的歌词同步有点问题,后面的对了。队长真棒

现在修改了。

马黑黑 发表于 2022-2-27 18:58

不错的制作

加林森 发表于 2022-2-27 19:33

马黑黑 发表于 2022-2-27 18:58
不错的制作

谢谢!{:4_190:}

大猫咪 发表于 2022-2-27 19:35

好听好看,队长好分享, 真棒! 辣椒收礼开心!

{:4_204:}{:4_199:}

加林森 发表于 2022-2-27 19:41

大猫咪 发表于 2022-2-27 19:35
好听好看,队长好分享, 真棒! 辣椒收礼开心!

猫猫也喜欢啊。{:4_189:}

大猫咪 发表于 2022-2-27 19:42

加林森 发表于 2022-2-27 19:41
猫猫也喜欢啊。

经典,非常喜欢{:4_187:}

马黑黑 发表于 2022-2-27 20:02

加林森 发表于 2022-2-27 19:33
谢谢!

{:5_108:}

千羽 发表于 2022-2-27 20:07

加林森 发表于 2022-2-27 18:40
谢谢千羽支持。

队长不客气{:4_181:}

樵歌 发表于 2022-2-27 20:07

里面的乐手歌手没动作呵。能听到歌声。{:4_203:}

红影 发表于 2022-2-27 20:47

加林森 发表于 2022-2-27 18:37
忘记删除了。

嗯嗯,现在好了。
页: [1] 2 3
查看完整版本: 《走自己的路》 GALA TO:小辣椒