《画离弦》- 浅影阿
本帖最后由 加林森 于 2022-8-28 11:42 编辑 <br /><br /><style>#papa { left: -270.5px; width: 1137px; height: 640px; top: 150px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/630a1ecc16f2c2beb1bb40ef.png') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { padding: 300px; position: absolute; bottom:-180px; left: 14px;width: fit-content; height: fit-content; display: flex; gap: 80px; flex-direction: column; }
#lrctext { font: bold 2em sans-serif; color: White; text-shadow: 1px 1px 1px #000; text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnplay { width: 26px; height: 26px; background: url('https://wj.zp68.com/lxx/yunhua/2022/08/27/ann.png') -31px -24.5px no-repeat; border-radius: 50%; cursor: pointer; }
#btnplay:hover { border: 0px solid transparent; }
#prgline { width: 280px; height: 2px;background: #ccc linear-gradient(red,red) no-repeat ; background-size: 1px 2px; display: block; cursor: pointer;}
#tmsg { width: auto; color: Azure; }
</style>
<div id="papa">
<div id="player">
<div id="lrctext">lrc歌词</div>
<div id="btnwrap">
<span id="btnplay"></span>
<span id="prgline"></span>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
</div>
<script>
let lrcAr = [
['0.07','画离弦-浅影阿'],
['4.46','你抚琵琶奏琴弦'],
['5.60','我坐戏子楼台前'],
['7.80','怎将情话递心间'],
['10.81','白发听终戏百年'],
['39.97','我坐在戏楼前'],
['42.42','却未见你容颜'],
['46.05','望你蒙纱拨动琴弦'],
['52.22','你渐渐慢慢移步我眼前'],
['58.40','风儿吹纱我偷见'],
['64.42','你笑的有多甜'],
['66.15','那日我离京赶走未见你回眸'],
['70.56','望你挥舞芊芊玉手'],
['73.13','我坐马车饮尽愁愁烈酒'],
['82.90','终是念你不敢回头'],
['88.03','你抚琵琶奏琴弦'],
['90.78','我坐戏子楼台前'],
['94.00','怎将情话递心间'],
['97.12','白发听终戏百年'],
['100.15','清风浮动 容颜'],
['103.23','如花赞几笑人甜'],
['106.35','怎让画中美 停于纸间'],
['107.35','lrc编辑：加林森'],
['138.40','那日我离京赶走未见你回眸'],
['144.32','望你挥舞芊芊玉手'],
['150.56','我坐马车饮尽愁愁烈酒'],
['156.75','终是念你不敢回头'],
['161.87','你抚琵琶奏琴弦'],
['164.64','我坐戏子楼台前'],
['167.80','怎将情话递心间'],
['170.90','白发听终戏百年'],
['173.98','清风浮动 容颜'],
['177.28','如花赞几笑人甜'],
['180.12','怎让画中美 停于纸间'],
['200.00','谢谢欣赏']
];
let aud = new Audio(), lw = prgline.offsetWidth, bgpic = 'https://wj.zp68.com/lxx/yunhua/2022/08/27/ann.png';
aud.src = 'https://music.163.com/song/media/outer/url?id=1876788950.mp3';
aud.autoplay = true;
aud.loop = true;
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnplay.style.background = 'url(' + bgpic +') -62px -24.5px no-repeat');
aud.addEventListener('pause', ()=> btnplay.style.background = 'url(' + bgpic + ') -31px -24.5px no-repeat');
aud.addEventListener('timeupdate', () => {
prgline.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
}
});
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br><br><br>
@马黑黑 风景美如画，菇凉好身材 马黑黑 发表于 2022-8-27 22:20
风景美如画，菇凉好身材
谢谢老黑支持。有你真好。{:4_190:} 欣赏队长的精彩制作{:4_178:} 加林森 发表于 2022-8-27 22:26
谢谢老黑支持。有你真好。
{:4_190:}喝水 小辣椒 发表于 2022-8-27 22:31
欣赏队长的精彩制作
谢谢小辣椒支持！{:4_190:} 马黑黑 发表于 2022-8-27 22:32
喝水
谢茶！你喝:{:4_191:} 好看 好听{:4_178:} 图选的越来越漂亮了。。。。{:5_116:} 朵拉 发表于 2022-8-27 22:37
好看 好听
谢谢朵拉支持！{:4_190:} 东篱闲人 发表于 2022-8-27 22:39
图选的越来越漂亮了。。。。
跟到你学的。{:4_190:} 这个制作漂亮， 图图的选用和歌曲十分吻合，真美的制作。给队长点赞{:4_187:} 红影 发表于 2022-8-28 08:43
这个制作漂亮， 图图的选用和歌曲十分吻合，真美的制作。给队长点赞
谢谢红影支持！{:4_190:} 加林森 发表于 2022-8-28 08:52
谢谢红影支持！
不客气，问好队长{:4_204:} 红影 发表于 2022-8-28 13:28
不客气，问好队长
嗯嗯。影儿下午好！{:4_204:} 醉美水芙蓉 发表于 2022-8-28 20:27
队长越做越漂亮了！
是的。用PS制作出来就好看多了。
页:
[1]