《你能不能不要离开我 (莫叫语版)》 莫叫姐姐
<style>#bigPa { position: relative; width: 1000px; left:-203px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/621c94df2ab3f51d917b9ac9.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:00.68","莫叫姐姐 - 你能不能不要离开我 (莫叫语版)"],
["00:02.14","作词：廖伟志"],
["00:03.15","作曲：廖伟志"],
["00:04.22","编曲：杨学涛"],
["00:11.87","你能不能不要离开我"],
["00:17.08","究竟是我做错了什么"],
["00:22.04","点燃一支寂寞"],
["00:24.52","斟满一杯失落"],
["00:27.02","我并没有你想象的洒脱"],
["00:32.00","你能不能不要离开我"],
["00:37.04","现在的我越来越脆弱"],
["00:41.95","信了你的承诺"],
["00:44.42","陷入爱的漩涡"],
["00:46.95","怎么挣脱你给的枷锁"],
["01:11.98","你能不能不要离开我"],
["01:17.08","我受不了思念的折磨"],
["01:22.09","我用心的诉说"],
["01:24.45","换来你的沉默"],
["01:26.97","我不想要这样的结果"],
["01:32.08","你能不能不要离开我"],
["01:36.96","是你让我越来越寂寞"],
["01:42.07","早就失去把握"],
["01:44.37","真情任你挥霍"],
["01:46.87","灵魂惊慌失措着了魔"],
["02:12.13","你能不能不要离开我"],
["02:16.98","究竟是我做错了什么"],
["02:21.90","点燃一支寂寞"],
["02:24.38","斟满一杯失落"],
["02:26.69","我并没有你想象的洒脱"],
["02:32.01","你能不能不要离开我"],
["02:36.93","现在的我越来越脆弱"],
["02:41.92","信了你的承诺"],
["02:44.24","陷入爱的漩涡"],
["02:46.85","怎么挣脱你给的枷锁"],
["02:57.82","你能不能不要离开我"],
["02:58.94","我受不了思念的折磨"],
["03:02.04","我用心的诉说"],
["03:04.46","换来你的沉默"],
["03:06.97","我不想要这样的结果"],
["03:12.03","你能不能不要离开我"],
["03:16.99","我受不了思念的折磨"],
["03:21.92","我用心的诉说"],
["03:24.34","换来你的沉默"],
["03:26.92","我不想要这样的结果"],
["03:32.11","你能不能不要离开我"],
["03:37.14","是你让我越来越寂寞"],
["03:41.96","早就失去把握"],
["03:44.47","真情任你挥霍"],
["03:46.94","灵魂惊慌失措着了魔"],
["03:52.11","谢谢欣赏"]
];
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/2021/07/18/d1301d653dfdd6b071ba85778a5001c3.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_199:} 红影 发表于 2022-2-28 18:29
这个播放器和文字有点重叠，最好放右下方，调整一下高度就可以了。
你帮着我调一下嘛{:4_189:} 队长晚上好，这个图图漂亮，歌词同步现在自己会了{:4_199:} 队长现在好棒了，加油！ 红影 发表于 2022-2-28 18:31
这首歌很好听哦，图片也清纯可爱
是的，很可爱的小丫头。{:4_189:} 小辣椒 发表于 2022-2-28 20:14
队长晚上好，这个图图漂亮，歌词同步现在自己会了
小辣椒晚上好，上来啦。是的，终于学会了。还得谢谢你啊。{:4_187:}{:4_190:} 小辣椒 发表于 2022-2-28 20:18
队长现在好棒了，加油！
好的好的，一定继续努力。{:5_154:} 队长挺会选图 的，小碟播放器漂亮{:4_187:} 队长现在也是做帖高手了，点赞啦{:4_205:} 千羽 发表于 2022-2-28 20:29
队长挺会选图 的，小碟播放器漂亮
谢谢千羽支持！现选现制作。{:5_117:} 加林森 发表于 2022-2-28 20:35
谢谢千羽支持！现选现制作。
图和音乐很撘，人物很可爱的{:4_181:} 千羽 发表于 2022-2-28 20:37
图和音乐很撘，人物很可爱的
就是，音乐是今天发现的，图片也是今天发现的，听音乐好听就去选图片了。 加林森 发表于 2022-2-28 19:08
你帮着我调一下嘛
看到你已经调好了呀，现在的位置正好，这样才更好看。队长真棒{:4_199:} 千羽 发表于 2022-2-28 20:35
队长现在也是做帖高手了，点赞啦
谢谢谢谢，我还没有达到这个境界，正在努力学习中。 加林森 发表于 2022-2-28 20:46
谢谢谢谢，我还没有达到这个境界，正在努力学习中。
队长不要太谦虚了哈{:4_203:} 千羽 发表于 2022-2-28 20:47
队长不要太谦虚了哈
我说的是真话，原来只知道图片好看，但是出来没有制作过的。这次跟到老黑与小辣椒学习，才开始的。 红影 发表于 2022-2-28 20:43
看到你已经调好了呀，现在的位置正好，这样才更好看。队长真棒
嗯嗯，谢谢红影。{:4_204:} 图图漂亮，这姑娘是不是舌头有点大呀。{:4_170:}
页:
[1]
2