本帖最后由 加林森 于 2022-2-17 12:12 编辑 <br /><br />绿叶清舟 发表于 2021-11-21 20:26
这歌名好玩
是的，民间曲调。
<style>
#bigPa { position: relative; left:-203px; width: 1000px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/620dc9da2ab3f51d919f46f1.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:00.31","印象"],
["00:01.98","曼里"],
["00:03.04","星光背后"],
["00:04.18","印象 - 曼里"],
["00:17.67","词：许冠杰，黎彼得"],
["00:21.55","曲：许冠杰"],
["00:25.49","谁令我当晚举止失常"],
["00:29.13","难自禁望君您能见谅"],
["00:33.30","但觉万分紧张 皆因跟您遇上"],
["00:37.17","谁令我突然充满幻想"],
["00:41.11","谁令我音韵脑际飘扬"],
["00:44.83","撩动我内心爱情酝酿"],
["00:49.00","为我拨开忧伤 找得失去乐畅"],
["00:52.71","谁令我仿似初恋再尝"],
["00:56.65","我心中蕴藏 爱意千百丈"],
["00:59.60","怎许相依恋 永远心相向"],
["01:04.37","结伴上天际 似燕子飞翔"],
["01:08.17","双双去编写动听乐章"],
["01:12.18","谁令我朝晚苦苦思量"],
["01:15.97","长在我梦境永恒照亮"],
["01:19.91","令我万千猜想 分不清去向"],
["01:23.85","留下了这个深刻印象"],
["01:27.72","我心中蕴藏 爱意千百丈"],
["01:31.66","怎许相依恋 永远心相向"],
["02:07.40","结伴上天际 似燕子飞翔"],
["02:11.20","双双去编写动听乐章"],
["02:14.99","谁令我朝晚苦苦思量"],
["02:18.70","长在我梦境永恒照亮"],
["02:22.88","令我万千猜想 分不清去向"],
["02:26.82","留下了这个深刻印象"],
["02:30.77","留下了这个深刻印象"],
["02:34.33",""],
];
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/85785.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-21 20:08
以后开着车听着音乐，美不美啊！
还一边听一边摇头晃脑{:4_173:}
红影 发表于 2021-11-21 21:14
还一边听一边摇头晃脑
危险哦！
加林森 发表于 2021-11-21 20:02
哈哈，又来了啊？
咋地啦
马黑黑 发表于 2021-11-21 22:06
咋地啦
你的图片好玩吗
加林森 发表于 2021-11-21 23:15
你的图片好玩吗
好玩多玩玩
马黑黑 发表于 2021-11-22 07:41
好玩多玩玩
没有玩的图片哦
加林森 发表于 2021-11-22 13:06
没有玩的图片哦
队长玩玩
https://dl4.weshineapp.com/gif/20210629/fc7ceff76981f2abf58f8cf2fb6392eb.gif?f=micro_
马黑黑 发表于 2021-11-22 18:43
队长玩玩
小狗狗，真乖。
加林森 发表于 2021-11-22 19:12
小狗狗，真乖。
你喜欢小动物。不知道你会不会喜欢亚洲金猫？
马黑黑 发表于 2021-11-22 19:28
你喜欢小动物。不知道你会不会喜欢亚洲金猫？
是猫我都喜欢
加林森 发表于 2021-11-22 19:41
是猫我都喜欢
爱猫人士，爱大猫咪人士
马黑黑 发表于 2021-11-22 19:44
爱猫人士，爱大猫咪人士
可以这么说的。
加林森 发表于 2021-11-22 19:54
可以这么说的。
同意
马黑黑 发表于 2021-11-22 20:21
同意
盖章
加林森 发表于 2021-11-22 20:25
盖章
年月日
马黑黑 发表于 2021-11-22 20:25
年月日
成交
加林森 发表于 2021-11-22 20:55
成交
交钱给我
马黑黑 发表于 2021-11-22 22:24
交钱给我
你不要命了？
加林森 发表于 2021-11-22 22:57
你不要命了？
有钱就有一切