奥斯卡金曲--此情可待 TO：梦油
<style>
#papa { margin: 150px 0 0 calc(50% - 781px); display: grid; place-items: center; width: 1400px; height: 707px; background: #000 url('https://xlaj.cn/assets/file/zp/20230912020832.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; perspective: 1000px; overflow: hidden; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 1110px; top: 570px; right: 136px; z-index: 1000; }
#btnwrap { display: block; fill: hsla(30, 20%, 80%, .9); cursor: pointer; }
#btnwrap:hover { fill: hsla(90, 100%, 100%, .9); }
#tmsg { fill: hsla(30, 100%, 90%, .9); stroke: none; font: bold 1em sans-serif; }
#lrc { --motion: cover1; --tt: 1s; --state: running; position: absolute; top: 590px; font: bold 1.8em sans-serif; color: hsl(100,100%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); z-index: 999; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg,hsla(19, 48%, 22%,.35),hsla(19, 28%, 42%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#papa > span { position: absolute; right: 160px; opacity: .75; color: olive; font: bold 3em serif; display: grid; place-items: center; }
#dt1{ position: absolute; width: 32px; height: 32px; top: 100px; left: 800px; }
#dt2{ position: absolute; width: 61px; height: 65px; top: 460px; left: 170px; }
#dt3{ position: absolute; width: 66px; height: 113px;top: 90px; left: 1090px;"style="position: absolute;mix-blend-mode: screen; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2023/08/25/xx.gif" alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20230912020933.gif" alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20230912021559.gif" alt="" />
<svg id="mplayer" width="120" height="120">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(100, 20%, 80%, .65)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(100,50%,50%,.55)" />
</g>
<g id="btnwrap">
<path id="btnplay" d="M 50 50,50 70,70, 60 z"></path>
<path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path>
<path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" />
</g>
<path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
<path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
<g id="tmsg">
<text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
</svg>
<div id="lrc" data-lrc="HCplayer">HCplayer </div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230912020911.mp3" loop autoplay></audio>
<script>
(function() {
(function() {let total = 0, rr = 150;Array.from({length: total}).forEach((item,key) => {item = document.createElement('span');item.innerText = String.fromCharCode(9800+key);item.style.transform = `rotate(${0 / total * key}deg) translateY(${rr}px) rotate(-${360 / total * key}deg`;papa.appendChild(item);});})();
let mKey = 0, mFlag = true, cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(),};
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/,'\n');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 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 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;};
papa.oncontextmenu = () => false;
})();
</script> @梦油
梦油前辈喜欢老歌曲，不知道这首 奥斯卡金曲喜欢不喜欢 @马黑黑
黑黑~~继续复习前面学习过的双语歌词同步 小辣椒 发表于 2023-9-12 17:27
@梦油
梦油前辈喜欢老歌曲，不知道这首 奥斯卡金曲喜欢不喜欢
喜欢、喜欢，我很久没听了。谢谢你，小辣椒朋友。{:4_187:}
你制作的留声机很好啊。
{:4_180:} 小辣椒 发表于 2023-9-12 17:27
@马黑黑
黑黑~~继续复习前面学习过的双语歌词同步
双语是简单的，就是加一个br标签，线性渐变要做好 这个帖子的布局真好，动态也弄得好，那个美女嘴里的玫瑰会开放，小金人前面的灯也会闪烁。
欣赏亲爱的好制作，梦油收礼开心{:4_199:} 看见这个图和专辑好像是很久之前的了{:4_199:} 小辣椒 发表于 2023-9-12 17:27
@梦油
梦油前辈喜欢老歌曲，不知道这首 奥斯卡金曲喜欢不喜欢
我喜欢的{:4_170:} 小辣椒 发表于 2023-9-12 17:27
@马黑黑
黑黑~~继续复习前面学习过的双语歌词同步
这个双歌词制作难不难？教我 看见你N年之前的图，我也是有很多的，也是可以做，但我不会动图{:4_203:} 估计这个图是15年左右的，对不对？ 梦油 发表于 2023-9-12 18:10
喜欢、喜欢，我很久没听了。谢谢你，小辣椒朋友。
你制作的留声机很好啊。
梦油不客气，知道你喜欢老歌，喜欢就太好了{:4_187:} 马黑黑 发表于 2023-9-12 18:12
双语是简单的，就是加一个br标签，线性渐变要做好
黑黑，这个歌词颜色和播放器一样的也是做线性渐变？ 马黑黑 发表于 2023-9-12 18:12
双语是简单的，就是加一个br标签，线性渐变要做好
哈哈，双语我感觉直接网络找的不能用，要编辑器做，就怕做不好，这次一次完成没有去重新调整有几句也是不怎么同步的，我是用了英语编辑的 红影 发表于 2023-9-12 19:35
这个帖子的布局真好，动态也弄得好，那个美女嘴里的玫瑰会开放，小金人前面的灯也会闪烁。
欣赏亲爱的好制 ...
亲爱的，都是以前的制作，现在稍微修改一下，这个播放器本来是分享专辑的，现在我把软件里面的文字修改了一下，就一首歌曲名称了 冬天的雨 发表于 2023-9-12 23:10
看见这个图和专辑好像是很久之前的了
火眼金睛{:4_170:} 小辣椒 发表于 2023-9-13 12:29
哈哈，双语我感觉直接网络找的不能用，要编辑器做，就怕做不好，这次一次完成没有去重新调整有几句也是不 ...
你厉害 冬天的雨 发表于 2023-9-12 23:10
我喜欢的
那就一起欣赏 冬天的雨 发表于 2023-9-12 23:11
这个双歌词制作难不难？教我
自己看看源码就会了{:4_173:}