落山风

马黑黑

马黑黑

帖子代码

1. 
   
2. <style>
   
3. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/03.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   
4. </style>
   
5. 
   
6. <div id="papa">
   
7.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2005329783" autoplay loop></audio>
   
8. </div>
   
9. 
   
10. <script>
    
11.        
    
12. (function() {
    
13.         let lrcAr = [ [2,"落山风",2], [4,"歌手 嘉玛声乐团",2],[8,"",1] ];
    
14.         let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
    
15.                 js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    
16.         let loadJs = (url,callback) => {
    
17.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
18.                 jsNode.charset = 'utf-8';
    
19.                 jsNode.setAttribute('src', url);
    
20.                 body.appendChild(jsNode);
    
21.                 jsNode.onload = () => callback();
    
22.         };
    
23.         loadJs(js1, () => {
    
24.                 HCPlayer({
    
25.                         papa: '#papa',
    
26.                         lrcAr: lrcAr,
    
27.                         lrc_css: 'top: 20px;',
    
28.                         fs_css: 'color: #eee; background: transparent;',
    
29.                         player_css: 'width: 200px; height: 120px; bottom: 10px;',
    
30.                         path: 'M100 5 Q-50 160 190 5',
    
31.                         btn: {left: 34, top: 80},
    
32.                         track: {track: 'lightblue', prog: '#eee'},
    
33.                         img: {
    
34.                                 play: 'https://638183.freep.cn/638183/t23/btn/play2.png',
    
35.                                 pause: 'https://638183.freep.cn/638183/t23/btn/pause2.png'
    
36.                         }
    
37.                 });
    
38.         });
    
39. 
    
40.         loadJs(js2, () => {
    
41.                 H5lz({
    
42.                         papa: '#papa',
    
43.                         total: 60,
    
44.                         size: {width: 12, height: 20},
    
45.                         shape: {background: 'rgba(138,0,0,.7)', borderRadius: '0 100%'},
    
46.                         ani: 'toBottom',
    
47.                         maxTime: 30,
    
48.                         offset: {x: 100, y: 0},
    
49.                 });
    
50.         });
    
51. })();
    
52. 
    
53. </script>

复制代码

马黑黑

本帖演示：自由路径进度条播放器插件的应用

    插件JS文档：14行 js1 变量值
    插件配置：23行至38行

配置说明：

    25行 ：papa: '#papa',
        指定播放器加载在哪一个元素之上

    26行 ：lrcAr: lrcAr,
        指定歌词数组（在前面声明的数组名称，13行）

    27行 ：lrc_css: 'top: 20px;',
        配置歌词同步相关属性（与过去的配置一样，本帖仅配置 top 属性）

    28行 ：fs_css: 'color: #eee; background: transparent;',
        配置全屏按钮相关属性（与过去的配置一样，本帖仅配置前景色和背景色）

    29行：player_css: 'width: 200px; height: 120px; bottom: 10px;',
        配置播放器相关属性，本帖配置的是宽、高、位置

    30行 ：path: 'M100 5 Q-50 160 190 5',
        设置进度条路径，使用标准的 svg path d 路径描述语法，d 路径请参阅相关资料

    31行 ：btn: {left: 34, top: 80},
        设置播放/暂停按钮及其两边的时间信息的位置

    32行 ：track: {track: 'lightblue', prog: '#eee'},
        设置进度条底轨颜色、进度颜色（时间信息文本颜色跟 prog 变量）

    33-36行：
                        img: {
                                play: 'https://638183.freep.cn/638183/t23/btn/play2.png',
                                pause: 'https://638183.freep.cn/638183/t23/btn/pause2.png'
                        }

        配置播放/暂停按钮图片，不设置或值为 '' 则使用插件定义的按钮。

千羽

这个秋天美景好漂亮，加上黑黑老师的落叶，秋天的韵味更浓了，简洁的播放器不占地方，音乐也挺好的

马黑黑

如果不配置路径（30行），则使用插件的默认路径，即一下网站所呈现的样子：

https://www.huachaowang.com/foru ... &extra=page%3D1

马黑黑

千羽 发表于 2023-9-25 19:32
这个秋天美景好漂亮，加上黑黑老师的落叶，秋天的韵味更浓了，简洁的播放器不占地方，音乐也挺好的

感谢支持。晚上嚎！

千羽

马黑黑 发表于 2023-9-25 19:33
感谢支持。晚上嚎！

黑黑老师嚎

小辣椒

小巧玲珑，优美大气，非常漂亮的新小播

小辣椒

黑黑还是马不停蹄的推出新播放器了，小辣椒还没有回家，这个播放器也是很惹人爱，喜欢的不要不要的，今天肯定来不及了

小辣椒

套用个纯音也是不错，不用加歌词同步，速度会快一点

小辣椒

谢谢黑黑分享源码，工作这么忙，还推出新播放器，辛苦了

马黑黑

醉美水芙蓉 发表于 2023-9-25 20:09
新播放器简单漂亮！

播放器的进度条可以自行设定

马黑黑

千羽 发表于 2023-9-25 19:35
黑黑老师嚎

你嚎你嚎

马黑黑

小辣椒 发表于 2023-9-25 20:01
谢谢黑黑分享源码，工作这么忙，还推出新播放器，辛苦了

这个也是调试了一小阵子，如果还有什么，以后会进一步更新

马黑黑

小辣椒 发表于 2023-9-25 19:56
小巧玲珑，优美大气，非常漂亮的新小播

关键是路径，要自己学一个

马黑黑

小辣椒 发表于 2023-9-25 20:00
套用个纯音也是不错，不用加歌词同步，速度会快一点

那是

马黑黑

小辣椒 发表于 2023-9-25 19:59
黑黑还是马不停蹄的推出新播放器了，小辣椒还没有回家，这个播放器也是很惹人爱，喜欢的不要不要的，今天肯 ...

不急的

小辣椒

马黑黑 发表于 2023-9-25 20:39
关键是路径，要自己学一个

这个我的弱项

小辣椒

马黑黑 发表于 2023-9-25 20:40
那是

要自己做路径我又不行了