就你想法多
必须的，安全第一 本帖最后由 加林森 于 2022-3-1 13:01 编辑 <br /><br />马黑黑 发表于 2021-11-10 21:09
必须的，安全第一
我说你想多了吧，你还不承认。
<style>
#bigPa { position: relative; width: 1000px; left:-203px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/621d8f072ab3f51d91bfd29b.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 410px; 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: 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:01.38","舞女泪 - 韩宝仪"],
["00:02.89","词：林俊民"],
["00:03.86","曲：林俊民"],
["00:15.37","一步踏错终身错"],
["00:19.38","下海伴舞为了生活"],
["00:24.34","舞女也是人"],
["00:26.42","心中的痛苦向谁说"],
["00:30.61","为了生活的逼迫"],
["00:35.90","颗颗泪水往肚吞落"],
["00:40.73","难道这是命"],
["00:42.88","注定一生在那风尘过"],
["00:48.53","伴舞摇呀摇搂搂又抱抱"],
["00:52.80","人格早已酒中泡"],
["00:57.61","夜夜 tango cha cha rumba rock and roll"],
["01:02.32","谁叫我是一个舞女"],
["01:16.34","一步踏错终身错"],
["01:20.42","下海伴舞为了生活"],
["01:25.32","舞女也是人 心中的痛苦向谁说"],
["01:31.72","为了生活的逼迫"],
["01:37.06","颗颗泪水往肚吞落"],
["01:41.54","难道这是命"],
["01:43.91","注定一生在那风尘过"],
["01:49.45","伴舞摇呀摇搂搂又抱抱"],
["01:53.82","人格早已酒中泡"],
["01:58.56","夜夜 tango cha cha rumba rock and roll"],
["02:03.29","谁叫我是一个舞女"],
["02:23.46","为了生活的逼迫"],
["02:28.74","颗颗泪水往肚吞落"],
["02:33.25","难道这是命"],
["02:35.63","注定一生在那风尘过"],
["02:40.86","伴舞摇呀摇搂搂又抱抱"],
["02:43.32","人格早已酒中泡"],
["02:51.48","夜夜 tango cha cha rumba rock and roll"],
["02:55.44","谁叫我是一个舞女"],
["03:06.65","谢谢欣赏"]
];
var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "http://www.kumeiwp.com/sub/filestores/2022/03/01/da89a6ec3bd9a91c47c4c04ffb19d53c.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-10 20:09
谢谢谢谢！
听音乐的日子是欢乐的{:4_187:} 红影 发表于 2021-11-10 22:06
听音乐的日子是欢乐的
就是，挺幸福的。 加林森 发表于 2021-11-10 22:13
就是，挺幸福的。
队长越玩越熟练了{:4_204:} 红影 发表于 2021-11-10 22:41
队长越玩越熟练了
学习中锻炼 加林森 发表于 2021-11-10 23:39
学习中锻炼
以后发帖子发视频都轻车熟路了{:4_173:} 红影 发表于 2021-11-11 09:26
以后发帖子发视频都轻车熟路了
应该没有问题了{:4_189:} 加林森 发表于 2021-11-11 09:40
应该没有问题了
这样真好，又一个高手横空出世{:4_173:} 红影 发表于 2021-11-11 11:00
这样真好，又一个高手横空出世
岂敢岂敢 加林森 发表于 2021-11-11 11:05
岂敢岂敢
这个会越玩越熟练的。 红影 发表于 2021-11-11 11:20
这个会越玩越熟练的。
是啊，发熟练了就搞定了。
页:
1
[2]