寂寞是你给的苦 TO：猫猫（学习歌词同步）
<style>#bigPa { position: relative; width: 1000px; left:-203px; height: 500px;top: 100px; background:#333 url('https://pic.imgdb.cn/item/620e546d2ab3f51d9177b82b.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #1d7262;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 370px; width: 220px; left:-350px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 22px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#lrcDiv { position: relative; top: 380px; left:-360px; color: #A4D1D7; font-size: 1em; text-shadow: 1px 1px 1px #000; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="bigPa">
<div id="gcDiv">
<!-- 播放器开始 -->
<div id="paDiv">
<div id="btn-ro">·</div><!-- 播放按钮 -->
<div id="jindu"><div id="jd-go"></div></div>
</div>
<!-- 播放器结束 -->
<div id="lrcDiv">歌词同步显示</div>
<div style="color:#fff;margin:0px;padding:10px;font-size:5px;font-family:'微软雅黑';text-shadow:1px 1px 1px #000;">
<p style="position: absolute; left:300px; top:430px; color: #b6d8d8;"><marqueescrollamount="3" direction="left" ><font face="微软雅黑" size="4">冷漠和云菲菲的这首歌特别好听送给猫猫</font></marquee></p>
</div>
</div>
<script language="javascript">
var lrcAr=[
["00:00.90","寂寞是你给的苦 - 冷漠/云菲菲"],
["00:07.70","词：夏敢若何"],
["00:13.54","曲：凡间精灵"],
["00:23.06","男：你的背影早已模糊"],
["00:28.47","离愁的泪还那么顽固"],
["00:34.50","想你的时候看一看天"],
["00:39.42","你说你是那一棵月亮树"],
["00:44.96","女：痴心的话早已麻木"],
["00:50.44","思念的痛还那么刻骨"],
["00:56.36","想你的时候数着星星"],
["01:01.59","你说那是你写的情书"],
["01:07.87","男：寂寞是你给的苦"],
["01:12.60","我守着日落守到日出"],
["01:18.38","我守着花开守到落红无数"],
["01:24.35","我心甘情愿咽下你给的苦"],
["01:30.01","女：寂寞是你给的苦"],
["01:34.68","我望穿秋水望断天涯路"],
["01:40.16","我望着叶落望到雪花哭"],
["01:46.32","合：再苦的寂寞我也守得住"],
["01:52.11","LRC编辑：小辣椒"],
["02:14.08","女：痴心的话早已麻木"],
["02:19.32","思念的痛还那么刻骨"],
["02:24.74","想你的时候数着星星"],
["02:30.40","你说那是你写的情书"],
["02:36.76","男：寂寞是你给的苦"],
["02:41.37","我守着日落守到日出"],
["02:47.35","我守着花开守到落红无数"],
["02:53.14","我心甘情愿咽下你给的苦"],
["02:59.04","女：寂寞是你给的苦"],
["03:03.58","我望穿秋水望断天涯路"],
["03:09.25","我望着叶落望到雪花哭"],
["03:15.34","再苦的寂寞我也守得住"],
["03:21.33","寂寞是你给的苦"],
["03:25.81","我望穿秋水望断天涯路"],
["03:31.53","我望着叶落望到雪花哭"],
["03:37.50","合：再苦的寂寞我也守得住"],
["03:43.18","再苦的寂寞我也守得住"],
["03:52.58","谢谢欣赏！"],
];
var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "https://wj1.zp68.com:812/lxx/yunhua/2022/07/jmsngdk.mp3";
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
//处理lrc歌词数组：时间转换成秒
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步显示歌词
aud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr) lrcDiv.innerHTML = lrcAr;
}
}
</script> </div>
<br><br><br><br><br><br><br><br><br>
@大猫咪 猫猫这首算情歌，知道我送你的意思吗{:4_172:} 好听的歌儿，亲爱的还加了滚动字，播放器的位置也正好。真漂亮的制作。猫猫收礼开心{:4_187:} 红影 发表于 2022-2-18 21:07
好听的歌儿，亲爱的还加了滚动字，播放器的位置也正好。真漂亮的制作。猫猫收礼开心
哈哈，送一首情歌给猫猫，触动他一下 红影 发表于 2022-2-18 21:07
好听的歌儿，亲爱的还加了滚动字，播放器的位置也正好。真漂亮的制作。猫猫收礼开心
我是瞎捣鼓，黑黑教程做的，这个图图是2012年的，小图刚好可以用。 好漂亮的制作，真棒！{:4_199:} 小辣椒 发表于 2022-2-18 21:09
哈哈，送一首情歌给猫猫，触动他一下
真希望猫猫也一起来学做音乐帖子{:4_173:} 小辣椒 发表于 2022-2-18 21:18
我是瞎捣鼓，黑黑教程做的，这个图图是2012年的，小图刚好可以用。
亲爱的还有库存啊，我一般想做帖子了都是去现找图图{:4_173:} 加林森 发表于 2022-2-18 21:21
好漂亮的制作，真棒！
队长晚上好，你都几个了，我今天才做出来 红影 发表于 2022-2-18 21:23
真希望猫猫也一起来学做音乐帖子
是的啊，我们大家一起鼓励他来玩 你几个和黑黑学，看来小辣椒是大师姐了。{:4_187:} 小辣椒 发表于 2022-2-18 21:25
是的啊，我们大家一起鼓励他来玩
嗯，人多玩起来更热闹，最好樵歌也一起来玩{:4_173:} 樵歌 发表于 2022-2-18 21:28
你几个和黑黑学，看来小辣椒是大师姐了。
樵哥哥，怎么可能啊，我也是许多不会的 红影 发表于 2022-2-18 21:24
亲爱的还有库存啊，我一般想做帖子了都是去现找图图
这个不是库存，是那天开旧电脑，以前的图图就找几个出来了 红影 发表于 2022-2-18 21:34
嗯，人多玩起来更热闹，最好樵歌也一起来玩
这个是不可能的吧{:4_189:} 小辣椒 发表于 2022-2-18 21:35
这个不是库存，是那天开旧电脑，以前的图图就找几个出来了
嗯，看到以前的图图，会感觉很亲切吧。 小辣椒 发表于 2022-2-18 21:36
这个是不可能的吧
这世上没什么不可能的啊。{:4_173:} 红影 发表于 2022-2-18 21:37
嗯，看到以前的图图，会感觉很亲切吧。
就是以前的图图都特别小，这个图标题字也是在我就直接用 红影 发表于 2022-2-18 21:37
这世上没什么不可能的啊。
那你动员一下樵哥哥{:4_172:}