西风（问好千羽）
本帖最后由 马黑黑 于 2022-10-29 12:20 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/Pic/81/xifeng.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 20px; bottom: 0; width: 300px; height: 80px; 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, green, purple); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .7s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); 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: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(160,200,40,.8) 100%, transparent 0); border: 1px solid rgba(255,255,255,.45); font: normal 14px / 16px sans-serif; color: purple; }
#lrc { position: absolute; top: 20px; font: bold 2.6em sans-serif; color: rgba(255,255,255,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 6s; --state: running; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(160,200,40,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/Pic/81/leaf2.png" alt="" style="position: absolute; transform: translate(-10px,-5px) rotate(120deg);" />
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" style="position: absolute; transform: translate(-200px,280px); mix-blend-mode: multiply;" />
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'http://music.163.com/song/media/outer/url?id=419596664.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', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, rgba(0,0,0,.65), rgba(160,200,40,.8) ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
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>
欣赏羽羽的《西风》，为之惊艳，也非常喜欢阿鲁阿卓的倾情演唱（芈月传没有看过，因为不想被影视作品破坏我脆弱的历史知识体系）。所以也粗制滥造一帖，向羽图致意。 枫叶和小鸟的定位，首先由 #papa 盒子的 display: grid; place-items: center; 两个属性将其定位在了中央，然后，二者设为绝对定位，并使用 transform: translate(x,y) 快速进行物理定位，枫叶还需要 rotate 旋转；translate （xy）的取值，参照其原始位置，亦即帖子的正中央。当然，translate(x,y) 也可以用 left、top 来代替实现，left、top取值参照 #papa 左上角的（xy）坐标系。 本帖最后由 马黑黑 于 2022-9-29 07:42 编辑
关于歌词有的字拉的很长的处理：
细心的朋友可能已经发现，有几句歌词的末尾加了符号 ~ ，符号 ~ 前还有一个空格。这是针对歌词某个字拉的较长而做出的临时性处置，以获得歌词逐字同步得以较好模拟的效果：因 ~ 的合理加入，逐字同步的步伐得到调节，整体均衡性也因此得到相对完美的调整。 @千羽 本帖最后由 马黑黑 于 2022-9-29 12:27 编辑
全帖代码（CSS和JS各句以行的形式书写，但不会怎么影响修改关键部分）：
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/Pic/81/xifeng.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 20px; bottom: 0; width: 300px; height: 80px; 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, green, purple); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .7s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); 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: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(160,200,40,.8) 100%, transparent 0); border: 1px solid rgba(255,255,255,.45); font: normal 14px / 16px sans-serif; color: purple; }
#lrc { position: absolute; top: 20px; font: bold 2.6em sans-serif; color: rgba(255,255,255,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 6s; --state: running; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(160,200,40,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/Pic/81/leaf2.png" alt="" style="position: absolute; transform: translate(-10px,-5px) rotate(120deg);" />
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" style="position: absolute; transform: translate(-200px,280px); mix-blend-mode: multiply;" />
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'http://www.kumeiwp.com/sub/filestores/2021/09/21/b0c8608bfe3871863bf63ff3eb95161a.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', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, rgba(0,0,0,.65), rgba(160,200,40,.8) ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
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>
黑老师能人佩服!现在我有一个建议：歌词能做成直接使用LRC普通歌词，在Js插件里直接注入转化插件代码【歌词同步】
卡拉ok歌词播放器建议：LRC歌词直接转加餐版，二合一。
纯属个人意思，老师不要介意。 漂亮，尤其那小鸟，好可爱{:4_187:} 播放时间和底色重了，进度条没走到时间数字的时候，时间数字看不出来了呢{:4_173:} 背景图好美啊，黑黑也有柔情的一面。羽儿快来欣赏@千羽{:4_187:} 红影 发表于 2022-9-29 09:27
背景图好美啊，黑黑也有柔情的一面。羽儿快来欣赏@千羽
是图片柔情，俺大老粗 亚伦影音工作室 发表于 2022-9-29 09:22
黑老师能人佩服!现在我有一个建议：歌词能做成直接使用LRC普通歌词，在Js插件里直接注入转化插件代码【歌词 ...
你的建议有一定合理性。问题是，原生lrc歌词总要制作和（或）编辑，原生的无法满足一些特定需求。主要基于这方面的考量，我设计的花潮音画帖歌词同步机制顺应audio提供的时间信息，需要事先按一定格式制作花潮格式的歌词，避免在帖子中投入过多的歌词转换机制。这是一种选择，不会改变。 红影 发表于 2022-9-29 09:24
漂亮，尤其那小鸟，好可爱
GIF 红影 发表于 2022-9-29 09:26
播放时间和底色重了，进度条没走到时间数字的时候，时间数字看不出来了呢
之前改过其它颜色的，可能按过 Ctrl + z，倒回去了 马黑黑 发表于 2022-9-29 07:41
关于歌词有的字拉的很长的处理：
细心的朋友可能已经发现，有几句歌词的末尾加了符号 ~ ，符号 ~ 前还有 ...
这个加得好！佩服！ 老黑制作得真是太完美了。{:4_190:} 马黑黑 发表于 2022-9-29 12:19
是图片柔情，俺大老粗
这图图好漂亮的呢，黑黑牵须，你很细腻的{:4_187:} 马黑黑 发表于 2022-9-29 12:27
GIF
用滤镜把动图的背景弄掉了，这个好，省得扣图了，动图扣图好麻烦的呢。 马黑黑 发表于 2022-9-29 12:28
之前改过其它颜色的，可能按过 Ctrl + z，倒回去了
嗯嗯，现在的看得出了{:4_187:} 红影 发表于 2022-9-29 16:15
嗯嗯，现在的看得出了
早上有点匆忙，做帖时修修改改，后悔药吃过头了{:4_170:}