马黑黑 发表于 2026-5-5 10:57

黄龄杂集·梨雨夜归人（audioplayer更新演示版）

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/hl.webp') no-repeat center/cover; }
.player { width: 500px; bottom: 10px; right: 20px; color: gold; }
.btnFs { top: 20px; right: 20px; color: gold; }
.mypic { width: 160px; transition: .5s; opacity: var(--opacity); }
.mypic:nth-of-type(1) { top: 30%; filter: hue-rotate(60deg); }
.mypic:nth-of-type(2) { right: 100px; bottom: 200px; filter: hue-rotate(120deg); }
.mypic:nth-of-type(3) { right: 260px; top: 90px; filter: hue-rotate(180deg); }
</style>

<div class="pa">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
</div>

<script>
var options = {
    pa: '.pa',
    urls: [
      ['https://music.163.com/song/media/outer/url?id=3377488400', '梨雨夜归人'],
      ['https://music.163.com/song/media/outer/url?id=3330497350', '女儿心如水'],
      ['https://music.163.com/song/media/outer/url?id=429450375', '来日方长 - 薛之谦 / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=3324041041', '西(XI) - ONER / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=1817661979', '入画江南'],
      ['https://music.163.com/song/media/outer/url?id=1470415329', '达拉崩吧'],
      ['https://music.163.com/song/media/outer/url?id=1972605097', '青纹'],
      ['https://music.163.com/song/media/outer/url?id=27538128', '爱就爱了'],
    ],
    btns: document.querySelectorAll('.mypic'),
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    const aud = new AudPlayer(options);
});

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>

马黑黑 发表于 2026-5-5 10:57

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/hl.webp') no-repeat center/cover; }
.player { width: 30%; bottom: 10px; right: 20px; color: gold; }
.btnFs { top: 20px; right: 20px; color: gold; }
.mypic { width: 160px; transition: .5s; opacity: var(--opacity); }
.mypic:nth-of-type(1) { top: 30%; filter: hue-rotate(60deg); }
.mypic:nth-of-type(2) { right: 100px; bottom: 200px; filter: hue-rotate(120deg); }
.mypic:nth-of-type(3) { right: 260px; top: 90px; filter: hue-rotate(180deg); }
</style>

<div class="pa">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
</div>

<script>
const options = {
    pa: '.pa',
    urls: [
      ['https://music.163.com/song/media/outer/url?id=3377488400', '梨雨夜归人'],
      ['https://music.163.com/song/media/outer/url?id=3330497350', '女儿心如水'],
      ['https://music.163.com/song/media/outer/url?id=429450375', '来日方长 - 薛之谦 / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=3324041041', '西(XI) - ONER / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=1817661979', '入画江南'],
      ['https://music.163.com/song/media/outer/url?id=1470415329', '达拉崩吧'],
      ['https://music.163.com/song/media/outer/url?id=1972605097', '青纹'],
      ['https://music.163.com/song/media/outer/url?id=27538128', '爱就爱了'],
    ],
    btns: document.querySelectorAll('.mypic'),
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    const aud = new AudPlayer(options);
});

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>

马黑黑 发表于 2026-5-5 11:01

关于添加自定义音频控制器元素，请参阅：


https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=92709&pid=2561179&fromuid=7130

梦江南 发表于 2026-5-5 17:23

欣赏学习黑黑老师的精彩演示，黑黑老师立夏嚎！{:4_187:}

杨帆 发表于 2026-5-5 18:23

测试效果完美，谢谢马老师精彩示范{:4_191:}

红影 发表于 2026-5-5 19:35

这个还加了三个彩色纸风车做小播，三个小播和原来的小播按钮都能控制暂停和播放。
这个还增加了用alt+快捷键的键盘操作，真好{:4_187:}

红影 发表于 2026-5-5 19:39

“正在播放：***”的字样一直在列表上方，不随列表翻动而动。
黑黑的封装细节一直非常注意呢{:4_199:}

马黑黑 发表于 2026-5-5 21:33

红影 发表于 2026-5-5 19:39
“正在播放：***”的字样一直在列表上方，不随列表翻动而动。
黑黑的封装细节一直非常注意呢

这个是用CSS伪元素做得

马黑黑 发表于 2026-5-5 21:33

红影 发表于 2026-5-5 19:35
这个还加了三个彩色纸风车做小播，三个小播和原来的小播按钮都能控制暂停和播放。
这个还增加了用alt+快捷 ...

还行吧

马黑黑 发表于 2026-5-5 21:33

杨帆 发表于 2026-5-5 18:23
测试效果完美，谢谢马老师精彩示范

{:4_191:}

马黑黑 发表于 2026-5-5 21:34

梦江南 发表于 2026-5-5 17:23
欣赏学习黑黑老师的精彩演示，黑黑老师立夏嚎！

立夏必须嚎
页: [1]
查看完整版本: 黄龄杂集·梨雨夜归人（audioplayer更新演示版）