Don't Say No

马黑黑

马黑黑

配置代码：

<script>

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [ [1.6,"Don't Say No",6] ];
    window.onload = () => {
        HCPlayer({
            papa: '#papa',
            lrcAr: geci,
            lrc_css: `
                top: 20px;
                right: 200px;
                color: lightblue;
                --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
            `,
            player_css: `
                bottom: 10px;
                left: 140px;
                color: snow;
            `,
            /* 频谱设置 num - 频谱数; width - 频谱条宽; color - 频谱条颜色（不要 color 则去随机颜色）*/
            pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
        });
    }
})();

</script>

马黑黑

本帖演示 meter 标签进度条+频谱按钮播放器插件封装，带lrc歌词。

频谱的设置，提供三个参数，每一个参数都是可选参数。比如只想设置频谱数，则：

    pinpu: {num: 60},

或要设置频谱数和频谱条的宽度：

    pinpu: {num: 30, width: 4},

上面听到的这两个参数，键值都是纯数字。color 设置频谱颜色，若设置，需要将键值写在小角引号了。

花飞飞

这个画面好清爽！

花飞飞

管状和柱状频谱结合起来，这是打包了个新的小播吧……
两个小圆斜线渐变，很漂亮……

花飞飞

进度条填充色最后会改变……

红影

带进度条的频谱播放器，漂亮。黑黑又一个新的打包上传效果。帖子里的音乐节奏很舒服

红影

四角的圆形变幻效果也很惊艳。两个的颜色和动态方向还不一样的。漂亮

马黑黑

红影 发表于 2023-8-7 14:57
带进度条的频谱播放器，漂亮。黑黑又一个新的打包上传效果。帖子里的音乐节奏很舒服

meter进度条是以前封装过的插件，这里只是修改、打包，没有全新做。

马黑黑

红影 发表于 2023-8-7 15:00
四角的圆形变幻效果也很惊艳。两个的颜色和动态方向还不一样的。漂亮

上边两个角的圆形元素是主元素的伪元素，它们设置的背景色是一样的，由于有透明度，它们下面的背景色会影响到它们自身的背景图案；下边两个角落的圆形图案是上边的圆形图案的倒影，基于Chromium的浏览器可以看到，其他内核的浏览器看不到。

马黑黑

花飞飞 发表于 2023-8-7 13:22
这个画面好清爽！

清清爽爽干干净净

马黑黑

花飞飞 发表于 2023-8-7 13:27
进度条填充色最后会改变……

这是meter的特征

马黑黑

花飞飞 发表于 2023-8-7 13:25
管状和柱状频谱结合起来，这是打包了个新的小播吧……
两个小圆斜线渐变，很漂亮……

之前发不过的插件，只是当时直接使用，不是封装成文件

马黑黑

醉美水芙蓉 发表于 2023-8-7 18:13
整个画面干净漂亮！

晚上好

花飞飞

马黑黑 发表于 2023-8-7 18:08
清清爽爽干干净净

透亮之极。。。喜欢。。

花飞飞

马黑黑 发表于 2023-8-7 18:09
这是meter的特征

反正挺好看。。

花飞飞

马黑黑 发表于 2023-8-7 18:09
之前发不过的插件，只是当时直接使用，不是封装成文件

对我来说是新的。。。
明白了现在把之前没有封起来的逐渐打包。。。

马黑黑

花飞飞 发表于 2023-8-7 20:21
对我来说是新的。。。
明白了现在把之前没有封起来的逐渐打包。。。

就是，过去做的，代码直接用在帖子里，现在做的，引用就好

马黑黑

花飞飞 发表于 2023-8-7 20:20
反正挺好看。。

HTML5封装的标签，使用的人不多