《明月天涯》 五音Jw
本帖最后由 梦缘 于 2022-9-6 21:43 编辑 <br /><br /><style>#papa { left: -214px;top:120px; width: 1024px; height: 740px; background: #666 url('https://www.huachaowang.com/data/attachment/forum/202209/06/205931drk11rikue11erng.jpeg') 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">明月天涯 - 五音Jw</textPath></text>
</svg>
</div>
<script>
let lrcAr = [
['0.00',' 明月天涯 - 五音Jw'],
['0.03',' 作词 无比'],
['0.05','作曲 Tide潮汐'],
['2.07','谢谢马老师代码'],
['4.06','编曲/母带宏宇'],
['6.02','画师百里自来卷'],
['39.05','游侠某 名远传 而今江湖谈'],
['43.02','仇者多 友两三 但逢敌手难'],
['46.09','雨尽碎 风如潮 出手引狂澜'],
['50.02','未收招 三声笑 皆醉了'],
['54.05','远风急 忽回首 明月漫千山'],
['58.02','天地渺 意气满 踏歌至长安'],
['61.09','灯影繁 酒正暖 满座均贪欢'],
['65.03','众人酣 拂衣散 乌云然'],
['69.00','唯此间江湖年少 偏爱纵横天下'],
['72.06','恩仇趁年华轻剑快马'],
['76.04','红尘未破也无甚牵挂 只恋生杀'],
['80.03','醉里论道 醒时折花'],
['99.05','游侠某 名远传 而今江湖谈'],
['102.03','仇者多 友两三 相逢皆恨晚'],
['107.00','檐上霜 窗边月 为我留一盏'],
['110.02','过江南 踏天山 不曾还'],
['114.00','剑影翩 血光寒 似鬼亦似仙'],
['118.02','说书人 应笑我 既疯也如癫'],
['121.09','辩正邪 如明月 今圆别时缺'],
['125.02','倒不如 一拍案 入寒渊'],
['128.08','唯此间江湖年少 偏爱纵横天下'],
['132.07','恩仇趁年华轻剑快马'],
['136.03','红尘未破也无甚牵挂 只恋生杀'],
['140.02','醉里论道 醒时折花'],
['181.05','唯此间江湖年少 偏爱纵横天下'],
['185.02','恩仇趁年华轻剑快马'],
['188.08','红尘未破也无甚牵挂 只恋生杀'],
['192.07','醉里论道 醒时折花'],
['196.04','传言道江湖年少 不谙世事繁华'],
['200.01','是敌是友不妨一战罢'],
['203.07','待何人何年有心与我 拭血论茶'],
['208.01','梦里依旧 明月天涯']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=416388799.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>
<br><br><br><br><br><br><br><br><br><br> 梦缘，把你的帖子往上提提。无法评分了。 加林森 发表于 2022-9-6 21:16
梦缘，把你的帖子往上提提。无法评分了。
问好老师，可以了。{:4_191:} 梦缘 发表于 2022-9-6 21:20
问好老师，可以了。
不错不错。很漂亮。
最好把这个：
本帖最后由 梦缘 于 2022-9-6 21:19 编辑 取消掉。明白吗？ 醉美水芙蓉 发表于 2022-9-6 21:38
欣赏老师好作品！
谢谢老师的支持，问好！{:4_191:} 漂亮，欣赏梦缘好帖{:4_187:} 欣赏佳作
页:
[1]