论坛 › 马黑黑教程专版 › 响应式频谱插件再测试

马黑黑 发表于 2022-12-10 08:25

响应式频谱插件再测试

本帖最后由 马黑黑 于 2022-12-10 08:27 编辑 <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 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
.mLine:nth-of-type(odd) { background: linear-gradient(to top,black,pink); }
/*.mLine::before { position: absolute; content: ''; width: 100%; height:3px; background: orange; top: -4px; }*/
</style>

<div id="papa">
<!-- 帖子HTML代码 -->
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/11/04/dc52a9ca7610090421f620496f39715b.mp3" autoplay></audio>

<script>
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],player_css: '',ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),playerCode: `<style>#mplayer {--ww: 300px;--hh: 140px;--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: .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;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();aud.loop = false;let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;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, coe = 20/total/2, plus;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');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 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 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);
        let lrcAr = [,];
        let ypData = ;
        HCPlayer({
                lrcAr: lrcAr,
                ypData: ypData,
                player_css: '--ww: 80%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
        });
})();
</script>

马黑黑 发表于 2022-12-10 08:28

插件代码

(function(mkPlayer) {let defaults = {lrcAr: [],player_css: '',ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),playerCode: `<style>#mplayer {--ww: 300px;--hh: 140px;--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: .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;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();aud.loop = false;let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;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, coe = 20/total/2, plus;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');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 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 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);

马黑黑 发表于 2022-12-10 08:32

插件配置代码示例

<script>
(function() {
        //插件代码 略
        //(function() {...};
        //lrc歌词数组
        let lrcAr = [,];
        //音频波形数据 略
        //let ypData = ;
        HCPlayer({
                lrcAr: lrcAr,
                ypData: ypData,
                player_css: '--ww: 80%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
        });
})();
</script>

小辣椒 发表于 2022-12-10 08:34

黑黑早，今天我也是上来特别早

小辣椒 发表于 2022-12-10 08:35

这个是封装频谱吧

马黑黑 发表于 2022-12-10 08:36

帖子模板样式

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: linear-gradient(to bottom right,tan,black); box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
/*频谱交叉色设置 even/odd */
.mLine:nth-of-type(odd) { background: linear-gradient(to top,black,pink); }
/* 频谱帽 */
/*.mLine::before { position: absolute; content: ''; width: 100%; height:3px; background: orange; top: -4px; }*/
</style>

<div id="papa">
<!-- 帖子HTML代码 -->
</div>
<audio id="aud" src="音频地址" autoplay></audio>

<script>
(function() {
        //这里是插件代码 (function() {...}
        //lrc歌词数组
        let lrcAr = [,];
        //这里是音频波形数据 let ypData = ;
        //配置插件
        HCPlayer({
                lrcAr: lrcAr,
                ypData: ypData,
                player_css: '--ww: 80%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
        });
})();
</script>

马黑黑 发表于 2022-12-10 08:36

小辣椒 发表于 2022-12-10 08:34
黑黑早，今天我也是上来特别早

早上好

小辣椒 发表于 2022-12-10 08:38

马黑黑 发表于 2022-12-10 08:36
早上好

啊呀我插队了，等电脑上来我去删除掉

马黑黑 发表于 2022-12-10 08:38

小辣椒 发表于 2022-12-10 08:35
这个是封装频谱吧

在昨天那个基础上改进：

一、加入lrc歌词
二、频谱总体呈中间高两边矮的态势（但会有错落变化）

马黑黑 发表于 2022-12-10 08:46

如六楼帖子模板代码所示，实际上可以利用频谱盒子 .mLine 做一些插件没有做的修饰，例如已经在昨天的测试帖里说到的，加频谱帽甚至给频谱穿个小鞋子。今天再介绍一个玩法：间隔一个频谱条变换一个渐变背景色，利用伪类 :nth-of-type(odd) 或 :nth-of-type(even) 来完成，odd奇数，even偶数，用其中一个就可，另一个保留插件或自己的配置：

.mLine:nth-of-type(odd) { background: linear-gradient(to top,black,pink); }

马黑黑 发表于 2022-12-10 08:47

小辣椒 发表于 2022-12-10 08:38
啊呀我插队了，等电脑上来我去删除掉

不用的，没必要的

小辣椒 发表于 2022-12-10 08:47

马黑黑 发表于 2022-12-10 08:38
在昨天那个基础上改进：

一、加入lrc歌词


增加了美感

马黑黑 发表于 2022-12-10 08:48

小辣椒 发表于 2022-12-10 08:47
增加了美感

也许哦，这需要一些美学功底，你就可以

小辣椒 发表于 2022-12-10 08:48

马黑黑 发表于 2022-12-10 08:46
如六楼帖子模板代码所示，实际上可以利用频谱盒子 .mLine 做一些插件没有做的修饰，例如已经在昨天的测试帖 ...

越来越完美了，黑黑辛苦

小辣椒 发表于 2022-12-10 08:52

增加了歌词同步，黑黑一步步的教学，小辣椒得抓紧学习了。

小辣椒 发表于 2022-12-10 08:54

马黑黑 发表于 2022-12-10 08:47
不用的，没必要的

好吧，我今天醒特别早，就是平时起不来，休息天一早就醒，算算才睡了几个小时

小辣椒 发表于 2022-12-10 08:55

马黑黑 发表于 2022-12-10 08:48
也许哦，这需要一些美学功底，你就可以

我没有这个水平呢{:4_198:}

小辣椒 发表于 2022-12-10 08:57

马黑黑 发表于 2022-12-10 08:38
在昨天那个基础上改进：

一、加入lrc歌词


中间高二边低，这个效果应该更加好

马黑黑 发表于 2022-12-10 08:57

小辣椒 发表于 2022-12-10 08:55
我没有这个水平呢

有，就是要用代码实现，还不能自己完成

马黑黑 发表于 2022-12-10 08:58

小辣椒 发表于 2022-12-10 08:54
好吧，我今天醒特别早，就是平时起不来，休息天一早就醒，算算才睡了几个小时

有四个钟左右就没啥问题，中午再补下

查看完整版本: 响应式频谱插件再测试