马黑黑 发表于 2022-12-2 22:02
有理俺就支持
我好像都是有理的，你就准备好一直支持吧{:4_170:}
红影 发表于 2022-12-2 23:09
我好像都是有理的，你就准备好一直支持吧
你也姓常呀
马黑黑 发表于 2022-12-2 23:31
你也姓常呀
发现姓常特别好，考虑也姓常{:4_189:}
红影 发表于 2022-12-3 13:34
发现姓常特别好，考虑也姓常
改姓不容易
马黑黑 发表于 2022-12-3 13:56
改姓不容易
弄个长名字就行了啊，把自己名字放前，把常有理三个字放后{:4_173:}
红影 发表于 2022-12-3 20:04
弄个长名字就行了啊，把自己名字放前，把常有理三个字放后
这个也行？
马黑黑 发表于 2022-12-3 20:15
这个也行？
怎么不行，又没规定不能这样做{:4_173:}
红影 发表于 2022-12-3 22:21
怎么不行，又没规定不能这样做
那倒也是。法律没有禁止的，都行。
马黑黑 发表于 2022-12-3 22:24
那倒也是。法律没有禁止的，都行。
对吧，而且自己快乐，有何不可{:4_189:}
红影 发表于 2022-12-3 23:04
对吧，而且自己快乐，有何不可
一个字：可
本帖最后由 马黑黑 于 2022-12-12 11:29 编辑
三十、响应式圆环频谱
（此插件支持歌词同步）
（一）插件代码：
(function(mkPlayer) {let defaults = {lrcAr: [],ypData: new Array(500).fill(0).map((v, k) => Math.floor(Math.random() * 200) + 10),pinpu: {size: 2, gap: 1,},player_css: 'left: 50%; transform: translateX(-50%); /*--color1: olive; --color2: silver*/',lrc_css:'',playerCode: `<style>#mplayer {--color1: green; --color2: lightgreen;position: absolute;bottom: 40px; left: calc(50% - 60px);width: 120px; height: 120px;border-radius: 50%;border: 6px solid var(--color1);display: grid; place-items: center center;user-select: none; cursor: pointer;}#tmsg { font: normal 14px sans-serif; color: var(--color1); text-shadow: 1px 1px 1px #000; z-index: 650; }#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75));position: absolute;top: 20px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));} #lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}.mLine { --hh: 0px; position: absolute; width: 2px; height: 6px; background: var(--color1); }.mLine::before, .mLine::after {position: absolute;content: '';width: 100%;height: var(--hh); }.mLine::before { bottom: 0;left: 0;background: linear-gradient(to top, var(--color1), var(--color2)); }.mLine::after { top: 0;left: 0;background: linear-gradient(to bottom, var(--color1), var(--color2)); }@keyframes cover1 {from {width: 0;} to {width: 100%;}}@keyframes cover2 {from {width: 0;} to {width: 100%;}}</style><div id="mplayer"><span id="tmsg">play</span></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;aud.loop = false;lrc.style.cssText += data.lrc_css;let ppsize = data.pinpu.size, gap = data.pinpu.gap;let mKey = 0, mFlag = true, ppnum = 0;let total = Math.floor(mplayer.clientWidth * Math.PI / (ppsize + gap));for(j=0; j< total; j++) {let ele = document.createElement('span');ele.className = 'mLine';ele.style.width = ppsize + 'px';ele.style.transform = `rotate(${j*360/total}deg) translateY(63px)`; mplayer.appendChild(ele);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null, data.ypData);let divide = max / mplayer.offsetHeight, coe = 10 / total / 2, plus;let update = () => {lines.forEach((item,key) => {plus = (key < total / 2 ? key : total - key) * coe * 5;item.style.setProperty('--hh',(Math.random() * ypData - 2) / 5 + plus + 'px');});if(!aud.paused) window.requestAnimationFrame(update);};mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('pause', () => mState());aud.addEventListener('playing', () => { mState(); update(); });aud.addEventListener('ended', () => { mKey = 0; ppnum = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum++;if (ppnum >= data.ypData.length) ppnum = 0;tmsg.innerText = '-' + toMin(aud.duration - aud.currentTime);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : lrc.style.setProperty('--state', 'running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};};mkPlayer.HCPlayer = playCode;})(this);
（二）参数及解释：共5个，均省略
1、lrcAr : 同步歌词数组；
2、ypData : 音乐波形数据数组，须自行制作，本坛提供有制作工具。它是频谱响应歌曲律动的依据；
3、lrc_css : 基于歌词位置与颜色的CSS设置。常规属性 left、top 等用于定位、color 用于设置歌词底色，变量 --bg 用于 设置同步颜色；
4、player_css : 设置播放控制器参数。一是可用 left、top 等CSS属性定位，二是提供两个CSS变量 ① --color1 - 用于设置文本和圆环的颜色，② -color2 - 用于设置频谱条上下颜色；
5、pinpu : 频谱相关。需要一个对象，例如，{size: 2, gap: 2} ，目前就提供两个参数，size 指频谱条的宽度，gap 指频谱条间距。
（三）参数配置举例
(function() {
//插件代码 略
//歌词数组代码 略 let lrcAr = [[...]];
//歌曲波形数据代码 略 let ypData = [...];
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
lrc_css: '',
player_css: '--color1: orange; --color2: gold; left: 40px;',
pinpu: {size: 2, gap: 1,},
});
})();
（四）演示
阿依莫（问候队长） - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
马黑黑 发表于 2022-12-10 21:05
三十、响应式圆环频谱
（此插件支持歌词同步）
这个最新效果也整理进来了，真棒{:4_187:}
红影 发表于 2022-12-11 00:06
这个最新效果也整理进来了，真棒
这个频谱听欢快的
本帖最后由 马黑黑 于 2022-12-12 11:26 编辑
三十一、响应式条状频谱 （支持同步歌词）
（一）插件代码
(function(mkPlayer) {let defaults = {lrcAr: [],ypData: new Array(500).fill(0).map((v, k) => Math.floor(Math.random() * 200) + 10),pinpu: {size: 4, gap: 2,},player_css: '',lrc_css: '',playerCode: `<style>#mplayer {--ww: 300px;--hh: 140px; --color1: darkgreen; --color2: 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 1px 0 1px;width: 4px;height: 8px;background: linear-gradient(to top,var(--color1),var(--color2));transition: .35s;opacity: .95;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75));position: absolute;top: 20px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));} #lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 {from {width: 0;} to {width: 100%;}}@keyframes cover2 {from {width: 0;} to {width: 100%;}}</style><div id="mplayer"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();aud.loop = false;let ppsize = data.pinpu.size || 4, gap = data.pinpu.gap || 2;let total = Math.ceil(mplayer.offsetWidth / (ppsize + gap));let mKey = 0,ppnum = 0, mFlag = true;for (j = 0; j < total; j++) {let el = document.createElement('span');el.className = 'mLine';el.style.width = ppsize + 'px';el.style.marginLeft = el.style.marginRight = gap/2 + 'px';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null, data.ypData);let divide = max / mplayer.offsetHeight, coe = 20 / total / 2, plus;aud.addEventListener('pause', () => mState());aud.addEventListener('playing', () => { mState(); update(); });aud.addEventListener('ended', () => { mKey = 0; ppnum = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum++;if (ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let update = () => lines.forEach((item, key) => {plus = (key < total / 2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});let mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : lrc.style.setProperty('--state', 'running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
（二）插件参数及解释
1、lrcAr : 花潮格式歌词同步数组。配置举例：
let ar = [,,...,];
HCPlayer({
lrcAr:ar,
});
2、ypData : 歌曲波形数据（数组形式）。配置举例：
let ar = [,,...,];
let wave = ;
HCPlayer({
lrcAr:ar,
ypData: wave,
});
3、pinpu : 频谱相关设置。使用JS对象表达方法，{对值1, 对值2}，插件共两个对值接口，size 和 gap，size 为频谱条宽度，gap 为频谱条间距。举例：
let ar = [,,...,];
let wave = ;
HCPlayer({
lrcAr:ar,
ypData: wave,
pinpu: {size: 6,gap: 2},
});
4、lrc_css : 歌词即同步颜色设置。提供一个CSS变量参数：--bg，用于设置同步颜色，其实是设置歌词盒子的背景色，可按box背景色的设置配置；歌词底色用CSS属性设置，例如 color: red; ，歌词文本大小同样可用 font 或 font-size 等属性设置。配置举例：
let ar = [,,...,];
let wave = ;
HCPlayer({
lrcAr:ar,
ypData: wave,
pinpu: {size: 6,gap: 2},
lrc_css: '--bg: linear-gradient(to bottom, red, green); color: #ccc; font-size: 2em;',
});
5、player_css : 设置播放控制器，即频谱所在的父元素，同时可设置频谱相关属性。CSS变量参数主要有四个：
① --ww : 频谱父元素宽度，可用百分比、px 等设置，例如，--ww: 80%; 或 --ww: 260px;
② --hh : 频谱父元素高度，设置同上，例如，--hh: 180px;
③ --color1 和 ④ --color2 : 设置频谱条渐变的两种颜色，例如，--color1: green; --color2: lightgreen;
此外，频谱位置的设置，请使用CSS的 left、top 、right、bottom 配合设定，不要四个属性全用，一般是一个横向+一个纵向的配套使用就好。
（三）帖子模板
<style>
#papa { margin: 0 0 0 calc(50% - 581px); width: 1000px; height: 640px; background: lightblue url('图片地址') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
</style>
<div id="papa"></div>
<audio id="aud" src="音乐地址" loop autoplay></audio>
<script>
(function() {
//插件代码 (function(mkPlayer)...
//歌词数组 let lrcAr = [[0.6,"黑豹乐队 - 梦波段",...
//音频波形数据 ypData = ;
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
lrc_css: '',
player_css: '--ww: 100%; --hh: 240px; --color1: blue; --color2: snow; bottom: 0;',
pinpu: {size: 6,gap: 2},
});
})();
</script>
（四）演示
梦波段 - 动画音画 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
马黑黑 发表于 2022-12-11 10:17
三十一、响应式条状频谱 （支持同步歌词）
（一）插件代码
黑黑又有新的封装频谱{:4_178:}
马黑黑 发表于 2022-12-10 21:05
三十、响应式圆环频谱
（此插件支持歌词同步）
效果特别漂亮{:4_178:}
马黑黑 发表于 2022-12-11 08:25
这个频谱听欢快的
是啊，看着就很热烈呢{:4_187:}
这个帖子的含金量极高{:4_178:}
红影 发表于 2022-12-11 15:28
这个帖子的含金量极高
哦，这只是与播放器有关的帖子
红影 发表于 2022-12-11 15:27
是啊，看着就很热烈呢
速度问题