白狐
本帖最后由 东篱闲人 于 2022-10-1 18:09 编辑 <br /><br /><style>#papa { left: 0px; width: 1024px; height: 640px; LEFT: -200px; background: #ccc url('https://pic1.imgdb.cn/item/6338118b16f2c2beb1cc3182.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 10px; bottom: 10px; }
#btnwrap { display: block; fill: #ccc; cursor: pointer; }
#btnwrap:hover { fill: orange; }
#tmsg { fill: snow; stroke: gray; stroke-width: 1px; font: bold 1em sans-serif; }
#lrc { position: absolute; bottom: 10px; right: 100px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, purple, orange) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; }
#feather {position: absolute; left: 0; top: 0; width: 50px;offset-distance: 0;offset-path: path("M500 -60 Q300 80, 600 200 T900 640");animation: move 8s linear infinite;}
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes move { to { offset-distance: 100%;} }
</style>
<div id="papa">
<img id="feather" src="/data/attachment/forum/202209/19/072054nefdifokfiaonowf.png" alt="" />
<div id="lrc">同步歌词学习</div>
<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="rgba(255,255,255,0.65)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="6" stroke="rgba(57,54,81,0.85)" />
</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>
<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>
<script>
let lrcAr = [
['0.60', '《白 狐》',12180],
['12.78', '雨天 / 杨蔓',15150],
['27.93', '',10380],
['38.31', '我是一只修行千年的狐',6399],
['44.71', '千年修行 千年孤独',5589],
['50.30', '夜深人静时 可有人听见我在哭',6470],
['56.77', '灯火阑珊处 可有人看见我跳舞',7079],
['63.85', '我是一只等待千年的狐',6499],
['70.35', '千年等待 千年孤独',5590],
['75.94', '滚滚红尘里 谁又种下了爱的蛊',6070],
['82.01', '茫茫人海中 谁又喝下了爱的毒',7089],
['89.10', '我爱你时 你正一贫如洗寒窗苦读',6379],
['95.48', '离开你时 你正金榜题名洞房花烛',10180],
['105.66', '能不能为你再跳一支舞',6000],
['111.66', '我是你千百年前放生的白狐',5770],
['117.43', '你看衣袂飘飘 衣袂飘飘',7399],
['124.83', '海誓山盟都化做虚无',6380],
['131.21', '能不能为你再跳一支舞',5979],
['137.19', '只为你临别时的那一次回顾',5990],
['143.18', '你看衣袂飘飘 衣袂飘飘',7180],
['150.36', '天长地久都化做虚无',6279],
['156.64', '',28960],
['185.60', '我是一只等待千年的狐',6159],
['191.76', '千年等待 千年孤独',5390],
['197.15', '滚滚红尘里 谁又种下了爱的蛊',6199],
['203.35', '茫茫人海中 谁又喝下了爱的毒',6379],
['209.73', '我爱你时 你正一贫如洗寒窗苦读',6280],
['216.01', '离开你时 你正金榜题名洞房花烛',10280],
['226.29', '能不能为你再跳一支舞',5590],
['231.88', '我是你千百年前放生的白狐',5909],
['237.79', '你看衣袂飘飘 衣袂飘飘',6860],
['244.65', '海誓山盟都化做虚无',6379],
['251.03', '能不能为你再跳一支舞',5690],
['256.72', '只为你临别时的那一次回顾',5889],
['262.61', '你看衣袂飘飘 衣袂飘飘',7099],
['269.71', '天长地久都化做虚无',6360],
['276.07', '能不能为你再跳一支舞',5389],
['281.46', '我是你千百年前放生的白狐',6090],
['287.55', '你看衣袂飘飘 衣袂飘飘',7089],
['294.64', '海誓山盟都化做虚无',6280],
['300.92', '能不能为你再跳一支舞',5899],
['306.82', '只为你临别时的那一次回顾',5670],
['312.49', '你看衣袂飘飘 衣袂飘飘',7099],
['319.59', '天长地久都化做虚无',6250],
['325.84', '能不能为你再跳一支舞',5780],
['331.62', '我是你千百年前放生的白狐',6000],
['337.62', '你看衣袂飘飘 衣袂飘飘',6879],
['344.50', '海誓山盟都化做虚无',3000]
];
let mKey = 0, mSeek = false, mFlag = true;
let aud = new Audio();
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(),
};
prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
aud.src = 'https://music.163.com/song/media/outer/url?id=179521.mp3';
aud.autoplay = true;
aud.loop = true;
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;
};
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
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 mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = (time) => {
lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
lrc.innerHTML = lrcAr;
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 mtime = lrcAr - (aud.currentTime - lrcAr);
showLrc(mtime);
}
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_165:} {:5_113:}
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
蛮好的，歌词同步差点！
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
挺好的啊。怎么啦？{:4_203:} 东篱闲人 发表于 2022-10-1 18:08
失败。啥破玩意。。。。。
LRC歌词里用的ms（毫秒），而代码里是s（秒）难怪同步不上的。
lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
你这个是草原上白狐，是真的问书生。。{:4_189:} 东篱闲人 发表于 2022-10-1 18:08
失败。啥破玩意。。。。。
是失败了，歌词不同步。。不过不影响听感。。{:4_174:} 很漂亮的制作，那枚羽毛也好可爱。歌词同步没同步上，其他都很好呢{:4_187:} 还有一支狐狸毛飘啊飘啊。。咋弄的{:4_189:} 起个网名好难 发表于 2022-10-1 18:36
蛮好的，歌词同步差点！
嗯嗯嗯，气人。。。 加林森 发表于 2022-10-1 18:43
挺好的啊。怎么啦？
串皮了。。。。 起个网名好难 发表于 2022-10-1 19:13
LRC歌词里用的ms（毫秒），而代码里是s（秒）难怪同步不上的。
lrc.style.animation = (mFlag ? 'bgMove ...
这字码子俺也看不懂啊。。。{:5_102:} 红影 发表于 2022-10-1 19:22
很漂亮的制作，那枚羽毛也好可爱。歌词同步没同步上，其他都很好呢
嗯，差好几步呢。。。。 东篱闲人 发表于 2022-10-1 19:37
串皮了。。。。
哦，我眼睛看不清楚了。 红芍药 发表于 2022-10-1 19:24
还有一支狐狸毛飘啊飘啊。。咋弄的
你薅的。。。{:5_106:} 东篱闲人 发表于 2022-10-1 19:45
你薅的。。。
我没薅，我在修行。。{:4_174:} 俺这几天去三十三天玉清宫听老师讲座，不料狐狸又下山煽情，待俺再削一把桃木剑去{:4_334:}{:4_397:} 云中子 发表于 2022-10-1 20:04
俺这几天去三十三天玉清宫听老师讲座，不料狐狸又下山煽情，待俺再削一把桃木剑去
你牛！{:4_172:} 东篱闲人 发表于 2022-10-1 19:39
嗯，差好几步呢。。。。
也许，不加餐会好点。