爱你在心口难开--孙露原唱 TO：黑黑
<style>#papa { left:-344px; width: 1280px; height: 700px; top: 150px; background: gray url('https://wj.zp68.com/lxx/yunhua/2022/09/12/F.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 140px; width: 240px; height: 80px;left: 850px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, snow, green); }
#btnwrap, #prog { position: absolute;display: grid; place-items: center;transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; border-radius: 50%; border: 4px solid pink; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 240px; height: 20px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,0,0,.45), rgba(0,255,0,.35) 70%, transparent 0); border: 1px solid pink; font: normal 14px sans-serif; color: purple; }
#s_svg { position: absolute; width: 500px; height: 50px;left: 600px; top: 250px; animation: move 12s linear infinite alternate;}
#lrc { text-anchor: middle; dominant-baseline: middle; font: bold 2em sans-serif; fill: none; stroke: red; }
@keyframes move { to {left: 780px;} }
</style>
<div id="papa">
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
<svg id="s_svg"><text id="lrc" x="50%" y="50%">爱你在心口难开</text></svg>
</div>
<script>
let lrcAr = [
['0.00','爱你在心口难开'],
['6.85','歌手：孙露'],
['13.07',' 谢谢黑黑的播放器'],
['19.71','谢谢黑黑的播放器'],
['24.06','哇偶哇偶耶耶'],
['28.33','爱你在心口难开'],
['33.08','我不知应该说些什么'],
['37.02','噢爱你在心口难开'],
['43.05','哇偶哇偶耶耶'],
['47.38','一天见不到你来'],
['51.66','就好像身边少了什么'],
['55.56','噢爱你在心口难'],
['61.73','你可知道我在爱你'],
['66.35','怎么对我不理睬'],
['70.28','请你轻轻告诉我'],
['74.67','不要叫我多疑猜'],
['80.39','哇偶哇偶耶耶'],
['83.90','我爱你在心口难开'],
['88.65','我不知应该说些什么'],
['93.00','噢爱你在心口难开'],
['97.40','LRC编辑：小辣椒'],
['117.71','你可知道我在爱你'],
['121.87','怎么对我不理睬'],
['125.67','请你轻轻告诉我'],
['131.67','不要叫我多疑猜'],
['136.31','哇偶哇偶耶耶'],
['140.22','我爱你在心口难开'],
['144.92','我不知应该说些什么'],
['148.79','噢爱你在心口难开'],
['154.41','你可知道我在爱你'],
['159.78','怎么对我不理睬'],
['162.98','请你轻轻告诉我'],
['168.70','不要叫我多疑猜'],
['173.53','哇偶哇偶耶耶'],
['177.53','我爱你在心口难开'],
['182.60','我不知应该说些什么'],
['186.15','噢爱你在心口难开'],
['191.87','我想你在心口难开'],
['196.15','我爱你在心口难开'],
['199.53','谢谢欣赏！'],
['239.14','谢谢欣赏！'],
];
let aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/12/slu.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, rgba(255,0,0,.45), rgba(0,255,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.textContent = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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><br> @马黑黑 黑黑，今天中午出发要出去玩2天，本来怕来不及完成作业，赶出来了{:4_170:} 我会手机上来看看的，谢谢黑黑送的播放器，辛苦了，我回家后再继续做一次这个播放器，很喜欢的 今天最后一天小长假，赶尾巴出去玩一下 再次感谢黑神送的播放器，来个大大的{:4_179:} #s_svg { position: absolute; width: 600px; height: 50px;left: 600px; top: 250px; animation: move 12s linear infinite alternate;}
@keyframes move { to {left: 680px;} }
这是从（from）600 移动到（to） 680，距离极短，运行的周期时长用不了 12 秒，可以综合考虑一下，几个值配套使用
马黑黑 发表于 2022-9-12 09:38
#s_svg { position: absolute; width: 600px; height: 50px;left: 600px; top: 250px; animation: move 12s ...
黑黑发现如果改大了，歌词出来会动很大范围，第二句会有匆匆忙忙的感觉，我现在改了你看看 昨天我开始是960，出来移动会不规则。是不是我没有配套修改尺寸？ 好听好听，辣椒好手艺。。{:4_199:}{:4_199:} 黑黑这个配套使用尺寸我还不懂，今天来不及了，我得下了 马黑黑 发表于 2022-9-12 09:38
#s_svg { position: absolute; width: 600px; height: 50px;left: 600px; top: 250px; animation: move 12s ...
现在知道了，这个歌词是应该一直在移动中的 红芍药 发表于 2022-9-12 09:42
好听好听，辣椒好手艺。。
谢谢欣赏~~{:4_171:} 小辣椒 发表于 2022-9-12 09:53
谢谢欣赏~~
没时间学你们作图，俺那代码还是套你的的。{:4_174:} 亲爱的好快，这个真漂亮。就知道黑黑送你的播放器你肯定会用来做帖子的，果然如此{:4_187:} 小辣椒 发表于 2022-9-12 09:44
黑黑这个配套使用尺寸我还不懂，今天来不及了，我得下了
88 小辣椒 发表于 2022-9-12 09:41
黑黑发现如果改大了，歌词出来会动很大范围，第二句会有匆匆忙忙的感觉，我现在改了你看看
歌词不断更换，但与移动没有直接关系，移动的是装歌词的盒子 师傅的作品总是这么干净立整。。。。{:5_116:} 小辣椒朋友早晨好！中秋假期最后一天啦，你出去玩玩没有啊？
页:
[1]
2