原罪

马黑黑 · 发表于 2023-7-24 12:48

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

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

x

马黑黑 · 发表于 2023-7-24 12:48

帖子代码

<style>
.mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/2/yrzv.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1; }
</style>
<div class="mydiv">
<img src="https://638183.freep.cn/638183/t22/gif/xkhe.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: rotate(-20deg);" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=482395499.mp3" loop autoplay></audio>
</div>
<script >
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/lineplayer_lrc.js';
document.head.appendChild(script);
let lrcAr = [ [2.00,"詹雯婷 - 原罪",8], [18.9,"这里空空的",3.2], [23.54,"这是一场预谋的掠夺之后",4.4], [28.21,"一动也不能动",2.8], [33.34,"巨大的崩裂在耳边",4.0], [37.38,"我痲痹的双腿",2.7], [42.37,"和右手不断还淌出的血",4.2], [46.61,"还来不及分辨",3.1], [51.12,"已掏空的一切",3.1], [58.77,"真相在被看穿前",3.8], [62.59,"你有多少自责我为你辩解",5.3], [67.93,"人说上帝是良善的",4.4], [72.36,"空虚的尽头会有更多空间",6.0], [79.49,"怎么彷彿都听过",3.3], [83.86,"却都又如此遥远",4.6], [88.46,"爱你是我的原罪",4.6], [113.5,"这里红红的",2.9], [118.08,"这是一场华丽如牡丹的梦",4.4], [122.74,"左心上的癌变",2.8], [127.9,"愤怒猖狂在蔓延",4.0], [131.94,"系在窗台的心结",3.3], [136.9,"是否该还给真心的眼泪",4.2], [141.19,"还来不及分辨",3.2], [145.8,"已吞噬了一切",3.2], [151,"结局在被看穿前",4.0], [155.03,"你有多少自责我为你辩解",5.2], [160.23,"人说我需要个内贼",4.4], [164.64,"空荡的尽头会有更多空间",5.6], [171.78,"怎么彷彿都听过",3.3], [176.02,"却都又如此遥远",4.0], [180.77,"爱你是我的原罪",5.6], [211.12,"真相在被看穿前",3.8], [214.93,"你有多少自责我为你辩解",5.2], [220.15,"人说上帝是良善的",4.4], [224.51,"空虚的尽头会有更多空间",6.7], [231.77,"怎么彷彿都听过",3.4], [236.03,"却都又如此遥远",4.4], [240.66,"而爱你是我的原罪",5.1] ];
window.onload = () => {
HCPlayer({
papa: '.mydiv',
lrcAr: lrcAr,
});
}
})();
</script>

复制代码

马黑黑 · 发表于 2023-7-24 12:49

插件配置举例

      HCPlayer({
         papa: '.mydiv', /* 指定帖子父元素标识 */
         lrcAr: lrcAr, /* lrc歌词 */
         /* lrc歌词UI配置 ↓ */
         lrc_css: `
            top: 15px; /* 上边 */
            left: 15px; /* 左边 */
            color: tan; /* 歌词底色*/
            --bg: green; /* 同步颜色 */
         `,
         /* 播放控制器UI配置 ↓ */
         player_css: `
            color: snow; /* 文本颜色 */
            --track: tan; /* 轨迹底色 */
            --prog: white; /* 进度颜色 */
            /* 按钮设置 ↓ */
            --btnpic: url('https://638183.freep.cn/638183/t23/btn/disc.png') no-repeat center/cover;
         `,
      });

马黑黑 · 发表于 2023-7-24 12:55

一楼帖子，代码在二楼，是简单配置：一是指定帖子父元素标识，二是指定插件所用的lrc歌词数组。其他配置不做，使用插件默认配置。

需要详细配置，可研究三楼所举的例子进行相应操作。

很多时候，配置可以灵活。比方说本帖，通过 .mydiv 设置子元素居中，歌词和播放控制器UI都水平居中，这时，如果只想调整歌词的垂直位置，可以这样：

lrc_css: `top: 400px;`;

其他不必要的就不进行配置。