本帖最后由 加林森 于 2022-2-24 12:37 编辑 <br /><br />马黑黑 发表于 2021-11-13 19:57
猫咪喉咙小
是的
<style>
#bigPa { position: relative; width: 1000px; left:-203px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/6216ed602ab3f51d9155f422.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 10px; width: 220px; 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: 12px; 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: 20px; color: #A4D1D7; font-size: 1em; text-shadow: 1px 1px 2px #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>
</div>
<script language="javascript">
var lrcAr=[
想着你亲爱的
["00:14.33","想着你亲爱的"],
["00:15.32","词曲：祁隆"],
["00:16.07","演唱：刘恺名/祁隆"],
["00:16.87","编曲：廖灵光"],
["00:17.76","和声：祁隆"],
["01:50.35","00:23.58","缘分让我认识了你"],
["01:54.38","00:27.47","从此我就爱上你"],
["01:58.47","00:31.50","朝朝暮暮想的全是你"],
["02:02.60","00:35.63","时刻把你记在我心里"],
["02:06.63","00:39.91","只想听到你的声音"],
["02:10.76","00:43.84","是令我那么的着迷"],
["02:14.99","00:48.07","放下所有却放不下你"],
["02:18.60","00:51.75","因为你就是我生命的唯一"],
["02:56.29","02:23.28","00:56.43","想着你亲爱的"],
["03:00.37","02:27.52","01:00.46","在我梦里梦的全是你"],
["03:04.55","02:31.60","01:04.59","刻下你的名字在我的心"],
["03:08.48","02:35.63","01:08.57","一定把你好好的珍惜"],
["03:12.71","02:40.16","01:12.80","想着你亲爱的"],
["03:16.93","02:43.94","01:16.93","在我心里想的全是你"],
["03:21.01","02:48.08","01:21.06","许下个心愿一生陪着你
["03:25.00","02:52.01","01:25.14","你就是我生命的奇迹"],
["03:30.22","01:30.42","我爱你"],
["03:40.27"]
];
var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "https://www.joy127.com/url/88037.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>
加林森 发表于 2021-11-13 20:02
是的
所以吃东西少，慢
马黑黑 发表于 2021-11-14 17:18
所以吃东西少，慢
嗯嗯，我喂过猫的，知道。
加林森 发表于 2021-11-14 18:07
嗯嗯，我喂过猫的，知道。
不好养
马黑黑 发表于 2021-11-14 21:49
不好养
我养的时候感觉很好养啊。不是现在这种养法了。
加林森 发表于 2021-11-14 22:01
我养的时候感觉很好养啊。不是现在这种养法了。
猫相对来说难养
马黑黑 发表于 2021-11-14 22:03
猫相对来说难养
猫猫、兔兔、鹅、猪，鸭我都养过的。
加林森 发表于 2021-11-14 22:11
猫猫、兔兔、鹅、猪，鸭我都养过的。
养殖大户呀
马黑黑 发表于 2021-11-14 23:50
养殖大户呀
在学校里养啊
加林森 发表于 2021-11-14 23:54
在学校里养啊
有地盘？
马黑黑 发表于 2021-11-14 23:56
有地盘？
是啊
加林森 发表于 2021-11-14 23:57
是啊
不可思议
马黑黑 发表于 2021-11-14 23:58
不可思议
学校的啊
加林森 发表于 2021-11-15 00:03
学校的啊
学校搞副业？
马黑黑 发表于 2021-11-15 07:43
学校搞副业？
生物课要用的
加林森 发表于 2021-11-15 12:06
生物课要用的
怪不得。杀猪杀狗专业开有么
马黑黑 发表于 2021-11-15 12:23
怪不得。杀猪杀狗专业开有么
没有这些课的
加林森 发表于 2021-11-15 13:23
没有这些课的
这些专业多好，学什么解剖{:4_170:}
大猫咪 发表于 2021-11-12 12:43
谢谢红影啊，一起学猫叫
猫猫自己会猫叫，应该是我们这些不会去学才对{:4_189:}
马黑黑 发表于 2021-11-15 14:48
这些专业多好，学什么解剖
不好，我讨厌血腥。