落山风

马黑黑 发表于 2023-9-25 19:17

马黑黑 发表于 2023-9-25 19:18

帖子代码

<style>
#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; }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2005329783" autoplay loop></audio>
</div>

<script>

(function() {
let lrcAr = [ , , ];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'top: 20px;',
fs_css: 'color: #eee; background: transparent;',
player_css: 'width: 200px; height: 120px; bottom: 10px;',
path: 'M100 5 Q-50 160 190 5',
btn: {left: 34, top: 80},
track: {track: 'lightblue', prog: '#eee'},
img: {
play: 'https://638183.freep.cn/638183/t23/btn/play2.png',
pause: 'https://638183.freep.cn/638183/t23/btn/pause2.png'
}
});
});

loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 60,
size: {width: 12, height: 20},
shape: {background: 'rgba(138,0,0,.7)', borderRadius: '0 100%'},
ani: 'toBottom',
maxTime: 30,
offset: {x: 100, y: 0},
});
});
})();

</script>

马黑黑 发表于 2023-9-25 19:31

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

插件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'
                     }

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

千羽发表于 2023-9-25 19:32

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

马黑黑 发表于 2023-9-25 19:33

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

https://www.huachaowang.com/forum.php?mod=viewthread&tid=71374&extra=page%3D1

马黑黑 发表于 2023-9-25 19:33

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

感谢支持。晚上嚎！

千羽发表于 2023-9-25 19:35

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

黑黑老师嚎{:4_181:}

小辣椒 发表于 2023-9-25 19:56

小巧玲珑，优美大气，非常漂亮的新小播{:4_199:}

小辣椒 发表于 2023-9-25 19:59

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

小辣椒 发表于 2023-9-25 20:00

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

小辣椒 发表于 2023-9-25 20:01

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

醉美水芙蓉 发表于 2023-9-25 20:09

马黑黑 发表于 2023-9-25 20:38

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

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

马黑黑 发表于 2023-9-25 20:38

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

你嚎你嚎

马黑黑 发表于 2023-9-25 20:39

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

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

马黑黑 发表于 2023-9-25 20:39

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

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

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

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

那是

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

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

不急的

小辣椒 发表于 2023-9-25 21:12

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

这个我的弱项{:4_201:}

小辣椒 发表于 2023-9-25 21:13

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

要自己做路径我又不行了

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

落山风