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

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.   .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/hl.webp') no-repeat center/cover; }
   
4.   .player { width: 30%; bottom: 10px; right: 20px; color: gold; }
   
5.   .btnFs { top: 20px; right: 20px; color: gold; }
   
6.   .mypic { width: 160px; transition: .5s; opacity: var(--opacity); }
   
7.   .mypic:nth-of-type(1) { top: 30%; filter: hue-rotate(60deg); }
   
8.   .mypic:nth-of-type(2) { right: 100px; bottom: 200px; filter: hue-rotate(120deg); }
   
9.   .mypic:nth-of-type(3) { right: 260px; top: 90px; filter: hue-rotate(180deg); }
   
10. </style>
    
11. 
    
12. <div class="pa">
    
13.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
    
14.   <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
    
15.   <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
    
16.   <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
    
17. </div>
    
18. 
    
19. <script>
    
20.   const options = {
    
21.     pa: '.pa',
    
22.     urls: [
    
23.       ['https://music.163.com/song/media/outer/url?id=3377488400', '梨雨夜归人'],
    
24.       ['https://music.163.com/song/media/outer/url?id=3330497350', '女儿心如水'],
    
25.       ['https://music.163.com/song/media/outer/url?id=429450375', '来日方长 - 薛之谦 / 黄龄'],
    
26.       ['https://music.163.com/song/media/outer/url?id=3324041041', '西(XI) - ONER / 黄龄'],
    
27.       ['https://music.163.com/song/media/outer/url?id=1817661979', '入画江南'],
    
28.       ['https://music.163.com/song/media/outer/url?id=1470415329', '达拉崩吧'],
    
29.       ['https://music.163.com/song/media/outer/url?id=1972605097', '青纹'],
    
30.       ['https://music.163.com/song/media/outer/url?id=27538128', '爱就爱了'],
    
31.     ],
    
32.     btns: document.querySelectorAll('.mypic'),
    
33.   };
    
34. 
    
35.   loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    
36.     const aud = new AudPlayer(options);
    
37.   });  
    
38. 
    
39.   function loadJs(url, callback) {
    
40.     var script = document.createElement('script');
    
41.     script.charset = 'utf-8';
    
42.     script.src = url;
    
43.     script.onload = function() {
    
44.       if (callback) callback();
    
45.     };
    
46.     document.head.appendChild(script);
    
47.   }
    
48. </script>

复制代码

马黑黑

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


https://www.huachaowang.com/foru ... 79&fromuid=7130

梦江南

欣赏学习黑黑老师的精彩演示，黑黑老师立夏嚎！

杨帆

测试效果完美，谢谢马老师精彩示范

红影

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

红影

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

马黑黑

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

这个是用CSS伪元素做得

马黑黑

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

还行吧

马黑黑

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

马黑黑

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

立夏必须嚎