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

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-12-9 20:13 编辑

马黑黑 · 发表于 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 = [0,0,100,...];*/
/* 插件配置 */
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 = [0,120,30,...];

然后配置插件参数：

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[ppnum] / 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，当然，鞋子的颜色可以不和帽子的一样。