阿姐
<style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/aj.webp') no-repeat center/cover; color: lightgreen; }
.player { width: 480px; bottom: 20px; }
.btnFs { top: 25px; right: 20px; }
.pd-vid { opacity: 1; mix-blend-mode: screen; }
#lrc { top: 20px; }
#msvg { position: absolute; left: 30px; width: 12vw; heighht: 12vw; transition: .65s; opacity: var(--opacity); }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/7165162/00/17/50/5ec64ee5538e4.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="rotate brightness">
<title>播放/暂停(Alt+X)</title>
<circle cx="0" cy="0" r="190" fill="transparent"></circle>
</g>
</svg>
</div>
<script>
var gc = `『阿姐』\n所属专辑 ：『羌羌起羌起』\n歌手 ：云朵\n那天从你家门走过\n很想知道你近来的消息\n默默无语的转身离开\n以后怎么找寻你的影子\n西山的花开满山坡\n我采了一束又一束\n放在你安睡的地方\n捎去对你的思念\n时间啊一点点失去\n我已不是当年的孩子\n依然会记得你的善良\n给我绣出的绣花衣\n你去了很远的地方\n天上的星星啊\n哪一颗是你啊\n不知何时能回来\n那天从你家门走过\n很想知道你近来的消息\n默默无语的转身离开\n以后怎么找寻你的影子\n西山的花开满山坡\n我采了一束又一束\n放在你安睡的地方\n捎去对你的思念\n时间啊一点点失去\n我已不是当年的孩子\n依然会记得你的善良\n给我绣出的绣花衣\n你去了很远的地方\n天上的星星啊\n哪一颗是你啊\n不知何时能回来\n感谢观赏`;
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=2106105518', '阿姐']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
});
function tzRun() {
var aud = new AudPlayer(options);
LRC(aud.pa, aud.aud, gc, 0.5);
var dr = _dr(msvg);
dr.path('M0 -190 Q-50 -150,15 0 Q50 -100,0 -190Z', 'transparent', 'lightgreen', 1).addTo(g1).rotates(10,360);
function setPathFill() {
var paths = msvg.querySelectorAll('path');
paths.forEach(path => path.setAttribute('fill', `#${Math.random().toString().substring(2,8)}`));
};
setPathFill();
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 本帖主要演示加载多个JS资源。帖子代码：
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/aj.webp') no-repeat center/cover; color: lightgreen; }
.player { width: 480px; bottom: 20px; }
.btnFs { top: 25px; right: 20px; }
.pd-vid { opacity: 1; mix-blend-mode: screen; }
#lrc { top: 20px; }
#msvg { position: absolute; left: 30px; width: 12vw; heighht: 12vw; transition: .65s; opacity: var(--opacity); }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/7165162/00/17/50/5ec64ee5538e4.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="rotate brightness">
<title>播放/暂停(Alt+X)</title>
<circle cx="0" cy="0" r="190" fill="transparent"></circle>
</g>
</svg>
</div>
<script>
var gc = `『阿姐』\n所属专辑 ：『羌羌起羌起』\n歌手 ：云朵\n那天从你家门走过\n很想知道你近来的消息\n默默无语的转身离开\n以后怎么找寻你的影子\n西山的花开满山坡\n我采了一束又一束\n放在你安睡的地方\n捎去对你的思念\n时间啊一点点失去\n我已不是当年的孩子\n依然会记得你的善良\n给我绣出的绣花衣\n你去了很远的地方\n天上的星星啊\n哪一颗是你啊\n不知何时能回来\n那天从你家门走过\n很想知道你近来的消息\n默默无语的转身离开\n以后怎么找寻你的影子\n西山的花开满山坡\n我采了一束又一束\n放在你安睡的地方\n捎去对你的思念\n时间啊一点点失去\n我已不是当年的孩子\n依然会记得你的善良\n给我绣出的绣花衣\n你去了很远的地方\n天上的星星啊\n哪一颗是你啊\n不知何时能回来\n感谢观赏`;
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=2106105518', '阿姐']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
});
function tzRun() {
var aud = new AudPlayer(options);
LRC(aud.pa, aud.aud, gc, 0.5);
var dr = _dr(msvg);
dr.path('M0 -190 Q-50 -150,15 0 Q50 -100,0 -190Z', 'transparent', 'lightgreen', 1).addTo(g1).rotates(10,360);
function setPathFill() {
var paths = msvg.querySelectorAll('path');
paths.forEach(path => path.setAttribute('fill', `#${Math.random().toString().substring(2,8)}`));
};
setPathFill();
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 黑黑老师，这个小播也是绘出来的吗？ 核心（共加载三个JS文件）：
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
});如有必要，再多加载两个也行，不建议继续多下去，嵌套太深难看
梦江南 发表于 2026-5-15 18:41
黑黑老师，这个小播也是绘出来的吗？
对 黑黑老师，163老师是会员吗？我注册了也找不到好听的歌曲。 欣赏老师的精彩音画，学习了。{:4_187:} 马老师晚上好~~
一打开我迟疑了一下，习惯性的是让歌词抹亮以醒目，听了一会儿才明白这的确是匠心独运以渲染情绪，学习了，赞佩！！{:4_204:}{:4_190:}
加载顺畅，效果漂亮，谢谢马老师精彩示范{:4_180:} 杨帆 发表于 2026-5-15 19:55
加载顺畅，效果漂亮，谢谢马老师精彩示范
最大的资源是图片，其余的资源都是瞬间完成 霜染枫丹 发表于 2026-5-15 19:39
马老师晚上好~~
一打开我迟疑了一下，习惯性的是让歌词抹亮以醒目，听了一会儿才明白这的确是匠心独运以 ...
斯人已去。人去而楼不空，生活继续，只是，不知道以后怎么才能寻到斯人的影子。
歌手云朵成长的历程，经历的人与事很多很多，阿姐永远是刻骨铭心的记忆。
没有人可以真正遗忘不应该遗忘的，只是，我们的纪念方式不同。
顺便提一下：云朵是刀郎的学生，现在单飞，在北京有自己的工作室。 梦江南 发表于 2026-5-15 18:45
欣赏老师的精彩音画，学习了。
阔气阔气 梦江南 发表于 2026-5-15 18:45
黑黑老师，163老师是会员吗？我注册了也找不到好听的歌曲。
我是SVIP会员，自动续费。
在网易网页版找歌。至少需要普通会员身份，合法身份在登录状态下，可以查找任何歌曲。找歌时注意一下歌曲能否外链：不标注 vip 的都可以外链。
你找到的歌曲链接可能是酱紫：
'https://music.163.com/#/song?id=2106105518'
这个不是可以外链的地址，你需要将其改造为：
'https://music.163.com/song/media/outer/url?id=2106105518'
就酱。豆包应该知道这个。
马黑黑 发表于 2026-5-15 20:03
最大的资源是图片，其余的资源都是瞬间完成
是，够快了{:4_199:} 厉害啊！{:5_116:} 杨帆 发表于 2026-5-15 20:28
是，够快了
打开速度取决于多种因素：
其一：自家网络状况；
其二：资源所在服务器带宽状态；
其三：帖子所在控件贷款状态。 凤舞九天 发表于 2026-5-15 20:44
厉害啊！
{:4_190:} 马黑黑 发表于 2026-5-15 20:57
打开速度取决于多种因素：
其一：自家网络状况；
是，取决于多因素作用的结果{:4_190:} 这歌听着让人感觉很伤感，这图图让人感觉云朵的家乡应该就是这个样子呢。 杨帆 发表于 2026-5-15 21:05
是，取决于多因素作用的结果
是的