马黑黑 发表于 2023-12-18 08:02

单独lrc歌词插件使用说明

本帖最后由 马黑黑 于 2023-12-18 08:10 编辑 <br /><br /><style>
        .papa {font-size: 16px; }
        .papa mark { background: #00ccaa; }
        .papa > p, .papa > h2, .papa > h3 {margin: 10px 0;}
        .mama { height: fit-content; display: grid; grid-template-columns: 50px auto; grid-template-rows: 1fr; padding: 0; margin: 20px 0; background: linear-gradient(to top right,lightblue,lightgreen,lightblue); box-shadow: 0 0 2px #000; position: relative; }
        .hCode, .hLineNum {margin: 0;padding: 10px 4px;width: 100%;box-sizing: border-box;font-size: 14px;line-height: 16px;}
        .hCode { overflow-x: auto; tab-size: 3; }
        .hLineNum { border-right: 1px solid #ddd;text-align: right;color: gray;user-select: none; }
        .stage { display: grid; place-items: center; }
        .rred { color: red; }
</style>

<div class="papa">
        <h2>单独lrc歌词插件使用说明</h2>
        <h3>一、地址 ：</h3>
        <p>https://638183.freep.cn/638183/web/api/lrc.js</p>
        <h3>二、引用与配置 ：</h3>
        <p><b>（一）完整JS示例 ：</b></p>
        <div class="mama">
                <pre class="hLineNum"></pre>
                <pre class="hCode">&lt;script&gt;

let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () =&gt; {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '.mypic',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
        });
};

let geci = [
        ,
        ,
        ,
];

&lt;/script&gt;</pre>
        </div>
        <p><b>（二）配置解释 ：</b></p>
        <p>① papa : 父元素的<mark> id </mark>或<mark> class </mark>名称，id 带<mark> # </mark>号、class带<mark> . </mark>号，赋值需要引号，例如，<mark> papa: '#papa' </mark>，或，<mark> papa: '.papa', </mark>;</p>
        <p>② lrcAr : 歌词数组，使用数组变量赋值，例如上面的代码示例中，后面声明了一个 geci 数组变量，就用 geci 赋值给 lrcAr，不要引号。歌词数组规范请查阅论坛里相关的花潮LRC资料或参照其他插件说明。</p>
        <p>【提问】lrc歌词可以充当标题使用，这意味着什么？</p>
        <p>③ btn : 帖子中用于控制音频的按钮，可以是图片，也可以是其它元素。该按钮请自行设计<mark> @keyframes </mark>动画，并通过CSS给其设置<mark> animation </mark>属性，该属性需要设置一个CSS变量<mark> --state </mark>。举例如下：</p>

        <div class="mama">
                <pre class="hLineNum"></pre>
                <pre class="hCode">.mypic {
        /*其它属性代码*/
        animation: rot 6s infinite linear var(--state);
}

@keyframes rot { to { transform: rotate(360deg); } }</pre>
        </div>
        <p>图片或其它元素按钮支持单个或多个，如果有多个图片按钮需要插件控制器动画，请给这些元素都加上一个class名称，例如上述示例的 mypic（其他名称也行），然后配置给插件的<mark> btn </mark>参数：<mark>btn: '.mypic', </mark>。<b>友情提示：</b><span class="rred">btn参数可以缺省，就是说删掉或不提供这个参数，若此，帖子父元素将承担音乐的播放/暂停控制，做大图音展示帖的小盆友可以考虑这个功能。</span></p>
        <p>④ lrc_css : 歌词界面设定，字符变量值，需要引号，使用CSS语法规范表达。例如，<mark> lrc_css: 'left: 10px; top: 10px;', </mark>。所设置的内容主要是歌词的位置（left或right 和 top或bottom 两两配对）、颜色（用 color 属性做底色，用 --bg 变量做同步色，同步颜色支持纯颜色、CSS渐变乃至图片）。</p>
        <p><b>特别注意</b>：LRC({}) 配置有语法要求，除了上面提及的要不要引号的问题外，还有，每一个子项（例如，papa子项，btn子项等）写完，都需要添上一个小角逗号，详情请研究上面的完整JS示例。</p>
        <h3>三、其他</h3>
        <p>本插件自动代理视频的播放/暂停控制，视频将随音频的暂停与播放而同步暂停和播放。使用者只需将一个或多个视频代码放在帖子父元素之内，无需设置id或class属性，也无需在 LRC({})配置中提供任何参数。</p>
        <p>此外，假如需要给帖子添加其他的CSS关键帧动画，只要这个（些）元素的<mark> animation </mark>属性带有<mark> --state </mark>变量且不是单独基于伪元素，它们也将响应音频的播放暂停而运动、暂停。</p>
        <p>【附】实例演示：① <a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1702818890" target="_blank" title="点击访问">轻涟 La vaguelette</a> &nbsp;&nbsp; ② <a href="http://qhxy.52qingyin.cn/art/bshow.php?st=3&sd=3&art=1702824728" title="点击访问" target="_blank">马兰花开</a></p>
</div>

<script>
let hCodes = document.querySelectorAll('.hCode'),
        hLineNums = document.querySelectorAll('.hLineNum');

hCodes.forEach((item,key) => {
        let lines = hCodes.innerText.trim().split('\n').length;
        let str = '';
        for(i = 0; i < lines; i ++) {
                str += i + 1 + '\n';
        }
        hLineNums.innerText = str;
});
</script>

红影 发表于 2023-12-18 09:30

“用 --bg 变量做同步色，同步颜色支持纯颜色、CSS渐变乃至图片”

最后那句没看懂，图片也可以？这个还从来没看到过呢{:4_173:}

红影 发表于 2023-12-18 09:38

黑黑辛苦了，不但介绍得非常详细，而且排版布置非常清晰，用底色和颜色突出重点。

关于这个插件，考虑得特别细致，例如，无需管视频的暂停，可以由插件直接管理；考虑做大图的人的需要，按钮也可以取消，由父元素承担暂停任务；考虑了其他动画只需用--state 变量，也可同步被控。。。。

非常完美的教学帖{:4_199:}

红影 发表于 2023-12-18 09:41

帖子中还有提问呢{:4_173:}

【提问】lrc歌词可以充当标题使用，这意味着什么？

答：意味着只用一句歌词，让它延续时间长点，就可以当标题用了{:4_173:}

幸运草 发表于 2023-12-18 10:10

介个复杂{:6_244:}

亦是金 发表于 2023-12-18 10:54

本帖最后由 亦是金 于 2023-12-18 11:13 编辑

谢谢黑黑的好教学帖！{:4_190:}正在寻找歌词同步代码呢，来的真是时候！有点复杂，我得慢慢学习试用领悟！{:4_203:}

侃大山 发表于 2023-12-18 11:02

学习了{:4_204:}

马黑黑 发表于 2023-12-18 12:03

侃大山 发表于 2023-12-18 11:02
学习了

{:4_191:}

侃大山 发表于 2023-12-20 11:04

马黑黑 发表于 2023-12-18 12:03


{:4_191:}

马黑黑 发表于 2023-12-20 17:22

侃大山 发表于 2023-12-20 11:04


一醉方休

侃大山 发表于 2023-12-20 20:20

马黑黑 发表于 2023-12-20 17:22
一醉方休

好{:4_191:}

马黑黑 发表于 2023-12-20 21:11

侃大山 发表于 2023-12-20 20:20
好

继续继续
{:4_191:}

小辣椒 发表于 2023-12-22 21:51

这么密密麻麻的文字我都不敢仔细看{:4_198:}

马黑黑 发表于 2023-12-22 21:55

小辣椒 发表于 2023-12-22 21:51
这么密密麻麻的文字我都不敢仔细看

不急的

小辣椒 发表于 2023-12-22 22:26

马黑黑 发表于 2023-12-22 21:55
不急的

文字太多我暂时不敢看，还是老实一点好

马黑黑 发表于 2023-12-22 22:29

小辣椒 发表于 2023-12-22 22:26
文字太多我暂时不敢看，还是老实一点好

是的，先多多保养

侃大山 发表于 2023-12-23 21:00

马黑黑 发表于 2023-12-20 21:11
继续继续

{:4_191:}{:4_191:}{:4_191:}多几杯

马黑黑 发表于 2023-12-23 21:04

侃大山 发表于 2023-12-23 21:00
多几杯

不醉不归
页: [1]
查看完整版本: 单独lrc歌词插件使用说明