空空 - 王加一/陈婧霏
本帖最后由 加林森 于 2022-9-7 17:15 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: #666 url('https://pic.imgdb.cn/item/63185d8b16f2c2beb1f2d42f.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: 100px; bottom: 20px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; display: block; top: 20px; }
#lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px snow, 2px 2px 3px #000; letter-spacing: 3px; }
</style>
<div id="papa">
<div id="mplayer">
<svg width="100%" height="100%" shape-rendering="geometricPrecision">
<g transform="rotate(-90, 60, 60)">
<circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.35" />
<circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="red" stroke-width="3" stroke-opacity="0.65"/>
</g>
<text fill="orange">
<tspan id="cur" x="40" y="55">00:00</tspan>
<tspan id="dur" x="40" y="75">00:00</tspan>
</text>
</svg>
</div>
<svg id="lrc" width="410" height="150">
<defs><path id="lrcPath" fill="none" stroke="red" d="M 20 20 Q 200 180 400 20" /></defs>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="blue"/>
<stop offset="35%" stop-color="orange"/>
<stop offset="65%" stop-color="gray"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<text x="0" y="20"><textPath id="lrctxt" xlink:href="#lrcPath">空空</textPath></text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','空空-王加一 / 陈婧霏'],
['1.85','王加一：'],
['2.76','回忆组成风 欲望组成梦'],
['5.72','一个古老的形容'],
['9.42','凝视着镜中'],
['11.14','怎么越看越普通'],
['16.80','时间变成歌 无言变成我'],
['20.34','身穿厚重的沉默'],
['23.18','掩盖我心里'],
['25.55','很隐秘的啰嗦'],
['30.67','怎么好像前一秒钟'],
['32.62','还在自由放空'],
['34.90','突然就变失落'],
['38.12','成长变成了'],
['40.40','我和我的隔阂'],
['45.44','怎么好像有一阵风'],
['47.54','在赶来的途中'],
['49.53','说它懂我的梦'],
['52.82','让我在它的'],
['54.46','怀抱中 彻底放松'],
['58.15','陈婧霏：'],
['75.87','回忆筑成空 欲望凝成洞'],
['79.38','一个无奈的形容'],
['83.07','凝视着镜中'],
['84.99','怎么越看越中庸'],
['90.39','时间变成沙 灵魂说成话'],
['94.24','只剩下沉默无价'],
['96.91','掩盖我心里'],
['99.58','太多余的挣扎'],
['101.18','陈婧霏：'],
['104.55','怎么好像前一秒钟'],
['106.55','还在自由放空'],
['108.66','突然就变失落'],
['111.70','成长变成了'],
['114.10','我和我的隔阂'],
['119.12','怎么好像有一阵风'],
['121.38','在赶来的途中'],
['123.11','说它懂我的梦'],
['126.23','让我在它的'],
['128.14','怀抱中 彻底放松'],
['130.50','王加一：'],
['134.21','怎么好像前一秒钟'],
['136.12','还在自由放空'],
['138.18','突然就变失落'],
['141.31','成长变成了'],
['143.55','我和我的隔阂'],
['148.79','怎么好像有一阵风'],
['150.89','在赶来的途中'],
['152.86','说它懂我的梦'],
['156.07','让我在它的'],
['157.67','怀抱中 彻底放松'],
['159.30','王加一：'],
['164.68','回忆组成风 欲望组成梦'],
['168.11','一个古老的形容'],
['169.57','陈婧霏：'],
['171.84','凝视着镜中'],
['173.69','怎么如风也如梦']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1978621666.mp3';
aud.autoplay = true;
aud.loop = true;
let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
mplayer.onmousemove = (e) => {
if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}
mplayer.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
deg += (e.offsetX < 60 && e.offsetY < 60) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
} else {
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
cur.textContent = toMin(aud.currentTime);
dur.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);
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>
@马黑黑 队长可不可以把歌词设置成往上翘的弧形路径呢 欣赏老师的精彩，好棒！{:4_204:} 马黑黑 发表于 2022-9-7 17:13
队长可不可以把歌词设置成往上翘的弧形路径呢
我去试一试。 梦缘 发表于 2022-9-7 17:14
欣赏老师的精彩，好棒！
梦缘下午好！ 加林森 发表于 2022-9-7 17:14
我去试一试。
要变点花样，尽量避免照套，宁可不要数量。 马黑黑 发表于 2022-9-7 17:17
要变点花样，尽量避免照套，宁可不要数量。
怎么变不过来呢？有点晕了。 加林森 发表于 2022-9-7 17:24
怎么变不过来呢？有点晕了。
你不理解路径的话，不可能变成你所需要的。我说这个，意在你要有探究精神，真正懂得原理，而不是简单套用。
这个用二次赛贝尔曲线，首先你要懂二次贝塞尔曲线原理；其次，你要去弄懂 svg 如何写二次贝塞尔曲线。 马黑黑 发表于 2022-9-7 17:32
你不理解路径的话，不可能变成你所需要的。我说这个，意在你要有探究精神，真正懂得原理，而不是简单套用 ...
嗯嗯，正在研究。 黑黑说的对，队长现在套用已经很溜了，后面不要直接套用，要自己修改。。。 小辣椒 发表于 2022-9-7 17:48
黑黑说的对，队长现在套用已经很溜了，后面不要直接套用，要自己修改。。。
小辣椒来啦。晚上好！我正在研究怎么去修改。 天路啊。。。。{:5_116:} 这歌词有特色。。。。{:5_116:} 加林森 发表于 2022-9-7 17:52
小辣椒来啦。晚上好！我正在研究怎么去修改。
队长慢慢研究，我都没有做过的，我好像作业少做许多了 小辣椒 发表于 2022-9-7 17:53
队长慢慢研究，我都没有做过的，我好像作业少做许多了
不急的。 东篱闲人 发表于 2022-9-7 17:52
这歌词有特色。。。。
是的。挺有意思的。 这图图很有意境，很漂亮的制作{:4_187:} 东篱闲人 发表于 2022-9-7 17:52
天路啊。。。。
可能是。。。{:5_117:} 红影 发表于 2022-9-7 19:51
这图图很有意境，很漂亮的制作
是的。谢谢红影支持！
页:
[1]
2