心如止水
本帖最后由 马黑黑 于 2022-11-19 07:40 编辑 <br /><br /><style>#papa {left: calc(50% - 81px);
transform: translateX(-50%);
width: 1200px;
height: 750px;
background: #666 url('https://638183.freep.cn/638183/t22/webp/xrvu.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
position: relative;
}
</style>
<div id="papa">
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1668786727519986.mp3" autoplay loop></audio>
</div>
<script>
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 0 4px;place-items: end center;font-size: 14px;--ww: 260px;--color: snow;}#cur {grid-area: cur;color: var(--color);}#dur {grid-area: dur;color: var(--color);}#btnplay {grid-area: btnplay;display: grid;grid-auto-flow: column;place-items: end center;gap: 4px;height: 60px;cursor: pointer;}#btnplay>span {background: red;width: 4px;transition: .6s;}#prog {grid-area: prog;width: var(--ww);height: 20px;opacity: .65;cursor: pointer;position: relative;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;left: 20px;top: 10px;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="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><div id="cur">00:00</div><div id="btnplay"></div><div id="dur">00:00</div><progress id="prog" max="100"></progress></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;(function() {for (j = 0; j < 20; j++) {let pinpu = document.createElement('span');pinpu.className = 'pinpu';pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;btnplay.appendChild(pinpu);}})();let mKey = 0,mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);setPinpu();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = 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 calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};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;}};let setPinpu = () => {let eles = document.querySelectorAll('.pinpu');eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 10px; opacity: .75',
lrc_css: `
--bg: linear-gradient(hsla(160,50%,50%,.45),hsla(205,100%,50%,.65));
left: 50%;
transform: translate(-50%);
top: 20px;
color: hsla(205,50%,90%,.95);
`,
});
</script>
核心代码
<style>#papa {
left: calc(50% - 81px);
transform: translateX(-50%);
width: 1200px;
height: 750px;
background: #666 url('图片地址') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
position: relative;
}
</style>
<div id="papa">
<audio id="aud" src="音乐地址" autoplay loop></audio>
</div>
<script>
//播放器插件代码略
//歌词数组代码略
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 10px; opacity: .75',
lrc_css: `
--bg: linear-gradient(hsla(160,50%,50%,.45),hsla(205,100%,50%,.65));
left: 50%;
transform: translate(-50%);
top: 20px;
color: hsla(205,50%,90%,.95);
`,
});
</script>
本帖最后由 马黑黑 于 2022-11-19 08:40 编辑
关于插件，请参阅： 花潮音频播放器插件小集合 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
这里，借音乐沙龙宝地，再说说插件的使用技巧。本帖是酱紫配置插件接口的参数：
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 10px; opacity: .75',
lrc_css: `
--bg: linear-gradient(hsla(160,50%,50%,.45),hsla(205,100%,50%,.65));
left: 50%;
transform: translate(-50%);
top: 20px;
color: hsla(205,50%,90%,.95);
`,
});
lrcAr 参数：使用前面声明的歌词数组参数变量名赋值
lrcAr: lrcAr,
player_css 参数：配置 bottom 值，外加一个常规CSS透明设置
player_css: 'bottom: 10px; opacity: .75',
一般来说，插件播放器的物理位置需要 left（或right）和 top（或bottom）配套出现，这里只配置了一个 bottom 值，是因为 #papa 设置了绝对居中，
display: grid; /* 网格布局 */
place-items: center; /* 令子元素纵横方向居中 */
播放器在水平方向上是自动居中的，我们想让其水平居中是不用设置 left 属性；设置 bottom 属性为 10 px，是希望播放器出现在底部。
lrc_css：这个歌词参数我专门配置了一下，重点讲讲——
由于属性较多且属性描述语句长，分行设置容易看得清楚一些（但分行不是必须的）。要给参数的属性描述语句分行，需要用到一对反引号（``），反引号的输入方法是，英文输入状态下，按键盘左上角Esc键正下方的那个键，即有波浪号（~）和反引号（`）的键位。看 lrc_css 的设置代码：
lrc_css: `
--bg: linear-gradient(hsla(160,50%,50%,.45),hsla(205,100%,50%,.65));
left: 50%;
transform: translate(-50%);
top: 20px;
color: hsla(205,50%,90%,.95);
`,
反引号将五行代码包裹起来，JS便可将里面的内容视为隶属于参数 lrc_css 参数的设置整体（这里若使用小角单引号或双引号会报错，除非不分行）。
第一行，--bg 预设的CSS变量，用了线性渐变 linear-gradient() 属性，括号里面用了两组 hsla 颜色表达体系，用以设置 lrc歌词 盒子的背景色；
第二行和第三行，left 属性 和 transform 方法配合，令 lrc歌词 水平居中；
第四行，top 属性设置 lrc歌词 位于帖子上部；
第五行，常规CSS语句 color 属性设置，它仅作用于 lrc歌词盒子的主元素的文本色，即lrc歌词的底色，给它配置了 0.05 的透明度效果很酷。
以上设置，看上去貌似很复杂，如果觉得如此，可以不设置 player_css 和 lrc_css 参数，插件一样可以正常工作，不过可能会发现，我封装的插件各方面可能不一定能配套你的帖子，所以慢慢琢磨，还是学会配置一下这两个参数。
本帖极其简单，设计上没有格外的装饰，仅一幅底图。这么设计，一是因为图片太唯美，不忍心去设计装饰元素，生怕弄不好会适得其反，二是与主体贴切——既是心如止水，就一切安安静静的 频谱播放器封装的实例。封装，让做帖子变得那么简单。太棒了{:4_199:} 红影 发表于 2022-11-19 08:36
频谱播放器封装的实例。封装，让做帖子变得那么简单。太棒了
早阿 这个帖子简洁而又漂亮，频谱和隐约的水草方向一致，底图简直和频谱天造地设。
不仅不加装饰让整个帖子显得更宁静，歌词色彩的设置也极喜欢，和底图一致，如此宁静{:4_199:} 黑黑的封装帖的实例都亮起来，这样大家想仿做的时候便于查找{:4_173:} 休息天来看看这样宁静的帖子真好，可以从内到外地放松心情了{:4_199:} 红影 发表于 2022-11-19 08:44
休息天来看看这样宁静的帖子真好，可以从内到外地放松心情了
周末真好，不过明天俺要加班 在歌曲中穿插着滴水的声音妙极了。 马黑黑 发表于 2022-11-19 08:41
早阿
一来就看到这个，心情好好{:4_187:} 马黑黑 发表于 2022-11-19 08:46
周末真好，不过明天俺要加班
忙着也好，说明被需要{:4_187:} 红影 发表于 2022-11-19 10:08
忙着也好，说明被需要
生活需要 红影 发表于 2022-11-19 10:07
一来就看到这个，心情好好
{:4_190:} 梦油 发表于 2022-11-19 09:51
在歌曲中穿插着滴水的声音妙极了。
是的，音乐效果相当不错 马黑黑 发表于 2022-11-19 10:16
是的，音乐效果相当不错
你的教材作品总给人一种新鲜的感觉。 梦油 发表于 2022-11-19 10:19
你的教材作品总给人一种新鲜的感觉。
是素材好 马黑黑 发表于 2022-11-19 10:20
是素材好
有好的素材，更要有好的组合。 梦油 发表于 2022-11-19 10:21
有好的素材，更要有好的组合。
还有发现，发现很重要