《你怎么说》- 陈佳 （同步歌曲）
本帖最后由 加林森 于 2022-5-27 10:40 编辑 <br /><br /><style>#bigPa { position: relative; width: 1080px; left:-242px; height: 719px; background:#333 url('https://pic.imgdb.cn/item/628f55bb0947543129295d90.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 20px; width: 60px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; back #00bc12 ground: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 60px; height: 20px; 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: 210px;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: 420px; 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:11.65","陈佳 "," 你怎么说"],
["00:14.39","词：上官月"],
["00:16.22","曲：司马亮"],
["00:18.39","我没忘记你忘记我"],
["01:01.74","连名字你都说错"],
["01:07.69","证明你一切都是在骗我"],
["01:13.80","看今天你怎么说"],
["01:18.53","你说过两天来看我"],
["01:24.94","一等就是一年多"],
["01:30.28","三百六十五个日子不好过"],
["01:36.67","你心里根本没有我"],
["01:42.64","把我的爱情还给我"],
["02:15.00","我没忘记你忘记我"],
["02:21.07","连名字你都说错"],
["02:26.97","证明你一切都是在骗我"],
["02:32.74","看今天你怎么说"],
["02:38.22","你说过两天来看我"],
["02:43.99","一等就是一年多"],
["02:49.22","三百六十五个日子不好过"],
["02:55.73","你心里根本没有我"],
["03:01.92","把我的爱情还给我"],
["03:31.01","你说过两天来看我"],
["03:36.65","一等就是一年多"],
["03:42.10","三百六十五个日子不好过"],
["03:48.53","你心里根本没有我"],
["03:54.40","把我的爱情还给我"],
["04:00.14","把我的爱情还给我"],
["04:29.79","谢谢欣赏"]
];
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/15312.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>
队长又在复习前面的，真好。很漂亮的制作{:4_187:} 红影 发表于 2022-5-26 18:59
队长又在复习前面的，真好。很漂亮的制作
谢谢红影支持！晚上好！{:4_204:} 这个好像评分后不刷新就两个声音出来呢。 红影 发表于 2022-5-26 19:02
这个好像评分后不刷新就两个声音出来呢。
不会吧？怎么会这样？我再看看。 红影 发表于 2022-5-26 19:02
这个好像评分后不刷新就两个声音出来呢。
没有啊？ 加林森 发表于 2022-5-26 19:16
没有啊？
你自己不能评分，当然无法知道啊。 红影 发表于 2022-5-26 20:26
你自己不能评分，当然无法知道啊。
哦。我这里只有一个声音的。 好听，好听。 梦油 发表于 2022-5-26 20:43
好听，好听。
老梦一个很喜欢的吧。你现在听到的是一个声音吧。 醉美水芙蓉 发表于 2022-5-26 21:48
队长有两个声音，制作很漂亮！
你刷新一下，看看是不是这样一个声音了？ 醉美水芙蓉 发表于 2022-5-26 21:51
不评分是正常的！评分后就有两个声音！
怎么会这样了》我得查查了。谢谢你！{:4_204:} @马黑黑帮着我看看是哪里有毛病了？ 醉美水芙蓉 发表于 2022-5-26 21:52
好奇怪刷新就正常了！
嗯嗯，明白了。谢谢你！ 加林森 发表于 2022-5-26 21:54
@马黑黑帮着我看看是哪里有毛病了？
这个代码没毛病，是评分机制的异步执行时导致的JS播放器异常。解决的方法就是用实体 audio 加载音乐，不用JS加载。不在意也成。 马黑黑 发表于 2022-5-26 22:00
这个代码没毛病，是评分机制的异步执行时导致的JS播放器异常。解决的方法就是用实体 audio 加载音乐，不 ...
哦，是这样的啊。CD把我搞糊涂了。谢谢老黑。{:4_191:} 加林森 发表于 2022-5-26 20:27
哦。我这里只有一个声音的。
我是说评分以后，你自己不能评分自己的帖子，是不知道的。