|
|
楼主 |
发表于 2022-12-11 10:17
|
显示全部楼层
本帖最后由 马黑黑 于 2022-12-12 11:26 编辑
三十一、响应式条状频谱 （支持同步歌词）
（一）插件代码
(function(mkPlayer) {let defaults = {lrcAr: [[3, "花潮LRC在线", 3]],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[j][0]) {cKey = j;if (mKey === j) showLrc(data.lrcAr[j][2]);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[ppnum] - 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[mKey][1];lrc.dataset.lrc = data.lrcAr[mKey][1].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 = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
HCPlayer({
lrcAr:ar,
});
2、ypData : 歌曲波形数据（数组形式）。配置举例：
let ar = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
let wave = [85,149,118,...];
HCPlayer({
lrcAr:ar,
ypData: wave,
});
3、pinpu : 频谱相关设置。使用JS对象表达方法，{对值1, 对值2}，插件共两个对值接口，size 和 gap，size 为频谱条宽度，gap 为频谱条间距。举例：
let ar = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
let wave = [85,149,118,...];
HCPlayer({
lrcAr:ar,
ypData: wave,
pinpu: {size: 6,gap: 2},
});
4、lrc_css : 歌词即同步颜色设置。提供一个CSS变量参数：--bg，用于设置同步颜色，其实是设置歌词盒子的背景色，可按box背景色的设置配置；歌词底色用CSS属性设置，例如 color: red; ，歌词文本大小同样可用 font 或 font-size 等属性设置。配置举例：
let ar = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
let wave = [85,149,118,...];
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 = [0,0,85,149,...0,0];
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)
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
楼主: 马黑黑
发表于 2022-12-2 23:09
显身卡
