苏运莹 - 再见，我爱你（学习老黑“清零”制作）
本帖最后由 加林森 于 2022-9-8 20:55 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: darkred url('https://pic.imgdb.cn/item/63194b2b16f2c2beb1bf7383.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute;right:140px;bottom: 420px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#lrc { position: absolute;left: 520px;bottom:520px; display: block; }
#lrctxt { text-anchor: middle; dominant-baseline: text-after-edge; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px #fff, 2px 2px 3px #000; letter-spacing: 3px; }
#tmsg { fill: #ccc; font: bold 1em sans-serif; }
#btnwrap { display: block; fill: #ccc; cursor: pointer; }
#btnwrap:hover { fill: orange; }
</style>
<div id="papa">
<!-- 播放器 -->
<svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
<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="rgba(0,0,0,0.35)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="4" stroke="rgba(255,255,255,0.55)" />
</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>
<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"></path>
</g>
</svg>
<!-- lrc歌词 -->
<svg id="lrc" width="560" height="150">
<defs><path id="lrcPath" fill="none" stroke="red" d="M 10 150 Q 305 -10,560 150" /></defs>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="blue"/>
<stop offset="35%" stop-color="yellow"/>
<stop offset="65%" stop-color="gray"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<textx="54%" y="0"><textPath id="lrctxt" xlink:href="#lrcPath">苏运莹 - 再见，我爱你</textPath></text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','再见，我爱你-苏运莹'],
['1.57','作词 : 钟声'],
['2.82','作曲 : 蜷花仕女'],
['3.88','出品 : 网易·云上'],
['15.23','春日的风拂过了大地'],
['18.54','洗劫了隐藏着的忧虑'],
['22.24','风不知道 我绝口不提'],
['25.97','白色枕头 浸湿的黑夜'],
['29.90','游荡在冷与暖的边境'],
['33.28','跨越过冬与春的交替'],
['37.35','时而放晴 时而下雨'],
['41.03','不变的是我自己'],
['47.31','再见 我爱你'],
['48.95','不过 是曾经'],
['50.36','我的心啊'],
['51.81','呼啸的声音'],
['53.86','勇敢地踏过荆棘'],
['55.57','微笑着面对所有的失去'],
['59.50','泪一滴 不能太轻易'],
['61.90','再见 我爱你'],
['63.73','不过 是曾经'],
['65.24','我的心啊'],
['67.00','若你听不清'],
['68.87','固执的像个傻瓜'],
['70.52','总有一天会偶遇'],
['72.34','另个你 孩子的你'],
['85.36','冬日的歌谣还未散去'],
['88.72','隐约听到了只字片语'],
['92.44','从不解释 我为何孤寂'],
['96.08','就算全世界与我为敌'],
['99.86','不懂我的就随风而去'],
['103.59','真心的人我绝不犹豫'],
['107.69','无论放晴 或是下雨'],
['111.26','不变的是我自己'],
['117.26','再见 我爱你'],
['119.16','不过 是曾经'],
['120.58','我的心啊'],
['121.86','呼啸的声音'],
['123.99','勇敢地踏过荆棘'],
['125.81','微笑着面对所有的失去'],
['129.62','泪一滴 不能太轻易'],
['132.07','再见 我爱你'],
['133.89','不过 是曾经'],
['135.23','我的心啊'],
['136.54','若你听不清'],
['138.72','固执的像个傻瓜'],
['140.52','总有一天会偶遇'],
['142.74','另个你 孩子的你'],
['161.77','再见 我爱你'],
['163.35','不过 是曾经'],
['164.80','我的心啊'],
['166.31','呼啸的声音'],
['168.30','勇敢地踏过荆棘'],
['169.99','微笑着面对所有的失去'],
['174.77','泪一滴 不能太轻易'],
['176.49','再见 我爱你'],
['178.18','不过 是曾经'],
['179.59','我的心啊'],
['180.82','若你听不清'],
['182.80','固执的像个傻瓜'],
['184.94','总有一天会偶遇'],
['186.75','另个你 孩子的你'],
['200.00','谢谢欣赏']
];
let cc = { //圆环对象
x: 1*track.getAttribute('cx'),
y: 1*track.getAttribute('cy'),
r: 1*track.getAttribute('r'),
sw: 1*track.getAttribute('stroke-width'),
len: track.getTotalLength(),
};
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1930881799.mp3';
aud.autoplay = true;
aud.loop = true;
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;
};
//audio空间各类监听
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';
curMsg.textContent = toMin(aud.currentTime);
durMsg.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.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>
@马黑黑试着学习制作了一个。你看行不行？谢谢！ 这个歌词好了，正当了，看着不别扭了。。。。{:5_112:} 东篱闲人 发表于 2022-9-8 11:46
这个歌词好了，正当了，看着不别扭了。。。。
要得吗？ 加林森 发表于 2022-9-8 11:47
要得吗？
要得。。。。{:5_112:} 东篱闲人 发表于 2022-9-8 11:48
要得。。。。
嗯嗯。谢谢！ 根据你的图片，播放器和歌词可以考虑放在右上区域，那里空旷 马黑黑 发表于 2022-9-8 12:01
根据你的图片，播放器和歌词可以考虑放在右上区域，那里空旷
我也想放的，还不知道该怎么去调整。 加林森 发表于 2022-9-8 12:03
我也想放的，还不知道该怎么去调整。
你玩那么久，left，right，top，bottom还不会用吗 马黑黑 发表于 2022-9-8 12:05
你玩那么久，left，right，top，bottom还不会用吗
这个知道的。我再去试。 加林森 发表于 2022-9-8 12:06
这个知道的。我再去试。
所以说，必须弄懂原理，包括很细很细的细节的实现原理 马黑黑 发表于 2022-9-8 12:07
所以说，必须弄懂原理，包括很细很细的细节的实现原理
是的，记着这个又忘记那个了。 加林森 发表于 2022-9-8 12:14
是的，记着这个又忘记那个了。
主要是你心急，总想照着模板一下子做出效果，而不是取探究里面的指令和逻辑，没有逐一消化，结果是啥也不敢确定。 马黑黑 发表于 2022-9-8 12:15
主要是你心急，总想照着模板一下子做出效果，而不是取探究里面的指令和逻辑，没有逐一消化，结果是啥也不 ...
嗯嗯。 马黑黑 发表于 2022-9-8 12:15
主要是你心急，总想照着模板一下子做出效果，而不是取探究里面的指令和逻辑，没有逐一消化，结果是啥也不 ...
我现在又调整了位置。你来看看。 老师的代码应用熟练，欣赏美帖，问好！{:4_187:} 梦缘 发表于 2022-9-8 16:48
老师的代码应用熟练，欣赏美帖，问好！
谢谢梦缘！{:4_190:} 画面很美，欣赏队长漂亮的制作{:4_187:} 红影 发表于 2022-9-8 19:34
画面很美，欣赏队长漂亮的制作
红影晚上好！不知道现在是否合乎老黑的要求不？ 加林森 发表于 2022-9-8 13:34
我现在又调整了位置。你来看看。
圆环可以往上移