论坛 › 马黑黑教程专版 › 响应式频谱代码插件（测试）

马黑黑 发表于 2022-12-9 11:31

响应式频谱代码插件（测试）

本帖最后由 马黑黑 于 2022-12-9 20:13 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: linear-gradient(to bottom right,tan,black); box-shadow: 3px 6px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
.mLine::before { position: absolute; content: ''; width: 100%; height:4px; background: orange; top: -6px; }
</style>

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

<script>
(function() {

        (function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),player_css: '',playerCode: `<style>#mplayer { --ww: 300px; --hh: 160px; --pinpu: linear-gradient(to top,darkgreen,snow); position: absolute; bottom: 10px; width: var(--ww); height: var(--hh); display: flex; justify-content: center; align-items: flex-end; cursor: pointer; }.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 8px; background: var(--pinpu); transition: .55s; opacity: .95; }</style><div id="mplayer"></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight;let update = () => lines.forEach((item,key) => item.style.setProperty('height', Math.random() * data.ypData / divide + 'px'));aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();});};mkPlayer.HCPlayer = playCode;})(this);

        let ypData = ;

        HCPlayer({
                ypData: ypData,
                player_css: '--ww: 50%; --hh: 200px; --pinpu: linear-gradient(to top,black,lightblue); align-items: flex-end;',
        });
})();
</script>

马黑黑 发表于 2022-12-9 11:53

帖子模板
<style>
#papa { margin: 0 0 0 calc(50% - 583px); width: 1024px; height: 640px; background: linear-gradient(to bottom right,tan,black); box-shadow: 3px 6px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
.mLine::before { position: absolute; content: ''; width: 100%; height:4px; background: orange; top: -6px; }
</style>

<div id="papa">
        <!-- 帖子代码 -->
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27672422.mp3" loop autoplay></audio>

<script>

(function() {

        /* 插件代码 略*/
        /* 音波数据 let ypData = ;*/
       
        /* 插件配置 */
        HCPlayer({
                ypData: ypData,
                player_css: '--ww: 50%; --hh: 200px; --pinpu: linear-gradient(to top,black,lightblue); align-items: flex-end;',
        });
})();

</script>如果使用默认值，所有插件配置参数可以不要，调用插件写成：

HCPlayer({});


需要自定义配置，则：

一、ypData 参数

    在配置代码的上方给出 ypData 数组，它是你获取的音乐的波形数据。代码是这样(不能有省略号，这里是表示还有很多)：

    let ypData = ;

    然后配置插件参数：

    HCPlayer({
      ypData: ypData,
    });

二、player_css 参数

    此参数可配置：

    ① 频谱父容器的宽高尺寸: --ww 是宽度，--hh 是高度。--hh 会影响频谱的活动范围，如果设置，一般建议在 200px 上下。
    ② 频谱颜色：--pinpu 变量只能接受线性渐变，举例，--pinpu: linear-gradient(to top,black,lightblue); 渐变颜色至少两个，多不限。
    ③ 频谱垂直定位：可添加 align-items 属性设定频谱垂直运行方向，默认底边固定，如果需要垂直居中、上下运行，添加代码：align-items: flex-end;


    player_css 配置举例：

            HCPlayer({
                ypData: ypData,
                player_css: '--ww: 50%; --hh: 200px; --pinpu: linear-gradient(to top,black,lightblue); align-items: flex-end;',
        });

马黑黑 发表于 2022-12-9 11:55

下面是插件代码：

/* 插件代码*/
        (function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),player_css: '',playerCode: `<style>#mplayer { --ww: 300px; --hh: 160px; --pinpu: linear-gradient(to top,darkgreen,snow); position: absolute; bottom: 10px; width: var(--ww); height: var(--hh); display: flex; justify-content: center; align-items: flex-end; cursor: pointer; }.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 8px; background: var(--pinpu); transition: .55s; opacity: .95; }</style><div id="mplayer"></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight;let update = () => lines.forEach((item,key) => item.style.setProperty('height', Math.random() * data.ypData / divide + 'px'));aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= ypData.length) ppnum = 0;update();});};mkPlayer.HCPlayer = playCode;})(this);

马黑黑 发表于 2022-12-9 11:59

如果不提供音频波形数据数组，最好不要在插件参数配置代码中出现 ypData: ypData, 这一行，否则会报错。不提供 ypData 参数所需的数据，插件会自动为你配置一个随机的数组，不过频谱的相应效果不理想。

马黑黑 发表于 2022-12-9 12:06

补充一下频谱帽问题：

插件没有做频谱帽，如果需要，可以在帖子的CSS加入频谱盒子的伪元素，像本帖这样——

<style>
#papa { /*略*/ }
.mLine::before { position: absolute; content: ''; width: 100%; height:4px; background: orange; top: -6px; }
</style>

插件里的频谱条对应的 class 是 .mLine，所以可以给 .mLine 加伪元素。本插件频谱条宽度未接受更改，是 4px，故此，伪元素的宽度可以设置为 4px，用100%更保险；高度建议在 2~6之间，然后要拉开一点距离，所以把 top 设置为负数值，建议在 4~8之间（背景色和主体颜色反差大的可以减少一点）。

马黑黑 发表于 2022-12-9 12:12

如果是频谱上下运行的样式，你还可以给频谱“穿鞋子”，用 ::after 伪元素：

<style>
#papa { /*略*/ }
.mLine::before { position: absolute; content: ''; width: 100%; height:4px; background: orange; top: -6px; }
.mLine::after { position: absolute; content: ''; width: 100%; height:4px; background: snow; bottom: -6px; }
</style>

::after 伪元素的代码和 ::before 的很接近，只需将 top 改为 bottom，当然，鞋子的颜色可以不和帽子的一样。

红影 发表于 2022-12-9 15:18

马黑黑 发表于 2022-12-9 11:59
如果不提供音频波形数据数组，最好不要在插件参数配置代码中出现 ypData: ypData, 这一行，否则会报错。不 ...

这样也可以啊，倒是很方便呢{:4_173:}

红影 发表于 2022-12-9 15:19

黑黑把这个音频可视也做了封装，太棒了{:4_199:}

红影 发表于 2022-12-9 15:21

黑黑就是厉害，转眼竟看到这个响应式频谱的完善和封装了，这下子做帖子更方便了{:4_199:}

马黑黑 发表于 2022-12-9 17:13

红影 发表于 2022-12-9 15:21
黑黑就是厉害，转眼竟看到这个响应式频谱的完善和封装了，这下子做帖子更方便了

这个是单一功能的，还不全，主要是要看看结果行不行

马黑黑 发表于 2022-12-9 17:13

红影 发表于 2022-12-9 15:18
这样也可以啊，倒是很方便呢

但感觉会怪怪的{:5_105:}

马黑黑 发表于 2022-12-9 17:14

红影 发表于 2022-12-9 15:19
黑黑把这个音频可视也做了封装，太棒了
功能不齐额，弄好了要做全一点的

红影 发表于 2022-12-9 18:51

马黑黑 发表于 2022-12-9 17:13
这个是单一功能的，还不全，主要是要看看结果行不行

回家了，看到频谱效果了，很棒啊{:4_187:}

红影 发表于 2022-12-9 18:52

马黑黑 发表于 2022-12-9 17:13
但感觉会怪怪的

我在本地看了看，把音频波形数据删除后，没有自动配置的随机数组啊，频谱就看不到了呢。

红影 发表于 2022-12-9 18:53

马黑黑 发表于 2022-12-9 17:14
功能不齐额，弄好了要做全一点的

现在这个已经很齐全了，还可以穿鞋戴帽呢{:4_173:}

小辣椒 发表于 2022-12-9 19:24

黑黑出了强强版频谱{:4_199:}

小辣椒 发表于 2022-12-9 19:26

昨天晚上捣鼓很迟睡觉，做了一个频谱帖，晚上回家去发。今天黑黑又有新教程，黑黑辛苦的{:4_187:}

马黑黑 发表于 2022-12-9 20:07

小辣椒 发表于 2022-12-9 19:26
昨天晚上捣鼓很迟睡觉，做了一个频谱帖，晚上回家去发。今天黑黑又有新教程，黑黑辛苦的

这是老东西，新封装

马黑黑 发表于 2022-12-9 20:08

红影 发表于 2022-12-9 18:53
现在这个已经很齐全了，还可以穿鞋戴帽呢

嗯，天冷了，这个必须的

马黑黑 发表于 2022-12-9 20:08

小辣椒 发表于 2022-12-9 19:24
黑黑出了强强版频谱

也不怎么强，一般般吧

查看完整版本: 响应式频谱代码插件（测试）