心如止水

马黑黑 · 发表于 2022-11-19 07:39

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

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

x

本帖最后由马黑黑于 2022-11-19 07:40 编辑

马黑黑 · 发表于 2022-11-19 07:44

核心代码

<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:17

本帖最后由马黑黑于 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 参数，插件一样可以正常工作，不过可能会发现，我封装的插件各方面可能不一定能配套你的帖子，所以慢慢琢磨，还是学会配置一下这两个参数。