<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 src="https://638183.freep.cn/638183/web/api/lineplayer_lrc.js"></script>-->

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

-------------------------------------------------------------------------------------------------------------------------------

插件配置举例

        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;
            `,
        });

----------------------------------------------------------------------------------------------------------------------------------

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

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

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

    lrc_css: `top: 400px;`;

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

前一篇: 荒羽（封装带进度条的小圆头频谱代码）
下一篇: 罗刹海市（圆环播放器加歌 词封装代码）