|
|

楼主 |
发表于 2022-2-27 14:21
|
显示全部楼层
- <style type="text/css">
- .mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #4a3122; border-radius: 10px; background: #988d85; }
- .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:30px;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="570" height="380" src="https://pic.imgdb.cn/item/621b16642ab3f51d9158cb2a.jpg" /><br></p>
- <h2 style="padding-bottom: 10px;">囚鸟(彭羚)</h2>
- <h2 style="text-align:center;">TO:黑黑</h2>
- <pre>
- 动人的歌曲总有动人的故事
- 他们的深情
- 都在那歌曲背后的创作故事里
- 《囚鸟》表达了繁华都市中
- 某些人与人之间情感的冷漠
- 创作者发现在都市里
- 真情真切的爱越来越少
- 孤独冷清的日子越来越多
- 特别失恋的人像是一只囚鸟
- 渴望爱人能够给自己一点的爱
- 看似简单的事情却如此遥不可及
- 只有眼泪与自己作伴肆意流淌
-
-
- </pre>
- <p style="margin: auto; width:120px; left:50px;text-align:center; font-size:14px; color:#000;"><marquee scrollamount="2" direction="left" >囚鸟(彭羚)TO:黑黑</marquee></p>
- <p style="text-align:center;"><audio id="myplayer" src="https://oss.shandianpan.com/c84d3f9e428bec21546ba4a31390bf79.mp3" controls="controls" autoplay="autoplay"></audio></p>
- <div id="lrcDiv"><ul id="lrcUl"></ul></div>
- <p style="margin: 20px; text-align:center;">小辣椒 2022 02 27</p>
- </div>
- </div>
- <p style="margin: auto; width:420px; left:50px;text-align:center; font-size:14px; color:#000;">
- <script language="javascript">
- var lrcAr = [
- ["00:01.01","歌曲名:囚鸟"],
- ["00:15.23","歌手:彭羚"],
- ["00:20.96","囚鸟 词:十一郎 曲:张宇"],
- ["00:23.89","我是被你囚禁的鸟"],
- ["00:28.38","已经忘了天有多高"],
- ["00:32.87","如果离开你给我的小小城堡"],
- ["00:38.92","不知还有谁能依靠"],
- ["00:42.09","我是被你囚禁的鸟"],
- ["00:46.39","得到的爱越来越少"],
- ["00:51.07","看着你的笑在别人眼中燃烧"],
- ["00:56.93","我却要不到一个拥抱"],
- ["01:02.56","我像是一个你可有可无的影子"],
- ["01:07.60","冷冷的看着你说谎的样子"],
- ["01:11.54","这撩乱的城市"],
- ["01:13.79","容不下我的痴"],
- ["01:16.16","是什么让你这样迷恋这样的放肆"],
- ["01:21.03","我像是一个你可有可无的影子"],
- ["01:25.96","和寂寞交换着悲伤的心事"],
- ["01:30.08","对爱无计可施"],
- ["01:32.34","这无味的日子"],
- ["01:36.70","眼泪是唯一的奢侈"],
- ["01:45.18","LRC编辑:小辣椒"],
- ["02:05.13","我是被你囚禁的鸟"],
- ["02:09.67","已经忘了天有多高"],
- ["02:14.04","如果离开你给我的小小城堡"],
- ["02:19.95","不知还有谁能依靠"],
- ["02:25.55","我像是一个你可有可无的影子"],
- ["02:30.53","冷冷的看着你说谎的样子"],
- ["02:34.59","这撩乱的城市"],
- ["02:36.83","容不下我的痴"],
- ["02:39.20","是什么让你这样迷恋这样的放肆"],
- ["02:43.99","我像是一个你可有可无的影子"],
- ["02:48.93","和寂寞交换着悲伤的心事"],
- ["02:53.04","对爱无计可施"],
- ["02:55.41","这无味的日子"],
- ["02:59.59","眼泪是唯一的奢侈"],
- ["03:08.05","LRC编辑:小辣椒"],
- ["03:29.91","我像是一个你可有可无的影子"],
- ["03:35.28","冷冷的看着你说谎的样子"],
- ["03:39.20","这撩乱的城市"],
- ["03:41.50","容不下我的痴"],
- ["03:43.81","是什么让你这样迷恋这样的放肆"],
- ["03:48.55","我像是一个你可有可无的影子"],
- ["03:53.65","和寂寞交换着悲伤的心事"],
- ["03:57.64","对爱无计可施"],
- ["04:00.02","这无味的日子"],
- ["04:05.82","我的眼泪是唯一的奢侈"],
- ["04:16.17","谢谢欣赏"]
- ];
- var myaud = document.getElementById('myplayer'); //播放器标识
- var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
- //处理lrc歌词数组:时间转换成秒、歌词放入li标签
- for(j=0; j<lrcAr.length; j++){
- lrcAr[j][0] = toSec(lrcAr[j][0]);
- lrcUl.innerHTML += "<li id='li" + lrcAr[j][0] + "'>" + lrcAr[j][1] + "</li>";
- }
- //lrc时间信息转为秒
- function toSec(lrcTime) {
- let tmpAr = lrcTime.split(':');
- lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
- return lrcTime;
- }
- //同步高亮、翻滚歌词
- myaud.ontimeupdate = function() {
- let tt = this.currentTime;
- for(j=0; j<lrcAr.length; j++){
- if(tt > lrcAr[j][0]){
- if(j > 0){
- let idxLast = lrcAr[j-1][0];
- document.getElementById("li" + idxLast).style.color = "black";
- lrcUl.style.top ="-" + (j * 20 - 20) + "px";
- }
- let idx = lrcAr[j][0];
- document.getElementById("li" + idx).style.color = "red";
- }
- }
- }
- // 播放结束重置歌词样式
- myaud.onended = function() {
- document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = "black";
- lrcUl.style.top = 0;
- this.play();
- }
- </script>
复制代码 |
|