苦月亮
<style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1000px; height:576px; background: url("https://638183.freep.cn/638183/t24/1/kyl.jpg") no-repeat center/cover; box-shadow: 3px 3px 6px rgba(0,0,0,.5); overflow: hidden; display: grid; place-items: center; position: relative; }
.play { position: absolute; top: 140px; width: 200px; cursor: pointer; animation: rot 6s linear infinite var(--state); }
#papa video { position: absolute; width: 120%; height: 120%; object-fit: cover; mix-blend-mode: screen; border-radius: 30%; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1846527726" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/3664703/00/02/08/5b5041984d4dc.mp4" loop></video>
<img class="play" alt="" src="https://638183.freep.cn/638183/t24/leaf/3l.png" />
</div>
<script type="text/javascript">
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sc.charset = 'utf-8';
document.head.appendChild(sc);
sc.onload = () => {
LRC({
papa: '#papa',
lrcAr: lrcAr,
btn: '.play',
lrc_css: 'top: 20px;',
});
};
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
马黑黑 发表于 2024-4-20 12:20
每个人都有名，每个人都说话
被你这样一解说，名言两字的分量一下子就下降了{:4_189:}
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子完整代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 0 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1000px; <span class="tBlue">height:</span>576px; <span class="tBlue">background:</span> url(<span class="tMagenta">"https://638183.freep.cn/638183/t24/1/kyl.jpg"</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 6px rgba(0,0,0,.5); <span class="tBlue">overflow:</span> hidden; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> .play { <span class="tBlue">position:</span> absolute; <span class="tBlue">top:</span> 140px; <span class="tBlue">width:</span> 200px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 6s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4"> #papa video { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 120%; <span class="tBlue">height:</span> 120%; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">border-radius:</span> 30%; }</cl-cd>
<cl-cd data-idx="5"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="9"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1846527726"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">video</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/3664703/00/02/08/5b5041984d4dc.mp4"</span> loop><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">img</span> class=<span class="tMagenta">"play"</span> alt=<span class="tMagenta">""</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t24/leaf/3l.png"</span> /></cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="13"> </cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">script</span> type=<span class="tMagenta">"text/javascript"</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><span class="tBlue">var</span> sc = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="17">sc.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/lrc.js'</span>;</cl-cd>
<cl-cd data-idx="18">sc.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="19"><span class="tRed">document</span>.head.appendChild(sc);</cl-cd>
<cl-cd data-idx="20"> </cl-cd>
<cl-cd data-idx="21">sc.onload = () => {</cl-cd>
<cl-cd data-idx="22"> LRC({</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>,</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">lrcAr:</span> lrcAr,</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">btn:</span> <span class="tMagenta">'.play'</span>,</cl-cd>
<cl-cd data-idx="26"> lrc_<span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">top:</span> 20px;'</span>,</cl-cd>
<cl-cd data-idx="27"> });</cl-cd>
<cl-cd data-idx="28">};</cl-cd>
<cl-cd data-idx="29"> </cl-cd>
<cl-cd data-idx="30"><span class="tBlue">var</span> lrcAr = [</cl-cd>
<cl-cd data-idx="31"> ,</cl-cd>
<cl-cd data-idx="32"> ,</cl-cd>
<cl-cd data-idx="33"> ,</cl-cd>
<cl-cd data-idx="34"> ,</cl-cd>
<cl-cd data-idx="35"> ,</cl-cd>
<cl-cd data-idx="36"> ,</cl-cd>
<cl-cd data-idx="37"> ,</cl-cd>
<cl-cd data-idx="38"> ,</cl-cd>
<cl-cd data-idx="39"> ,</cl-cd>
<cl-cd data-idx="40"> ,</cl-cd>
<cl-cd data-idx="41"> ,</cl-cd>
<cl-cd data-idx="42"> ,</cl-cd>
<cl-cd data-idx="43"> ,</cl-cd>
<cl-cd data-idx="44"> ,</cl-cd>
<cl-cd data-idx="45"> ,</cl-cd>
<cl-cd data-idx="46"> ,</cl-cd>
<cl-cd data-idx="47"> ,</cl-cd>
<cl-cd data-idx="48"> ,</cl-cd>
<cl-cd data-idx="49"> ,</cl-cd>
<cl-cd data-idx="50"> ,</cl-cd>
<cl-cd data-idx="51"> ,</cl-cd>
<cl-cd data-idx="52"> ,</cl-cd>
<cl-cd data-idx="53"> ,</cl-cd>
<cl-cd data-idx="54"> ,</cl-cd>
<cl-cd data-idx="55"> ,</cl-cd>
<cl-cd data-idx="56"> ,</cl-cd>
<cl-cd data-idx="57"> ,</cl-cd>
<cl-cd data-idx="58"> ,</cl-cd>
<cl-cd data-idx="59"> ,</cl-cd>
<cl-cd data-idx="60"> ,</cl-cd>
<cl-cd data-idx="61"> ,</cl-cd>
<cl-cd data-idx="62"> ,</cl-cd>
<cl-cd data-idx="63"> ,</cl-cd>
<cl-cd data-idx="64"> ,</cl-cd>
<cl-cd data-idx="65"> ,</cl-cd>
<cl-cd data-idx="66"> ,</cl-cd>
<cl-cd data-idx="67"> ,</cl-cd>
<cl-cd data-idx="68"> ,</cl-cd>
<cl-cd data-idx="69"> ,</cl-cd>
<cl-cd data-idx="70"> ,</cl-cd>
<cl-cd data-idx="71"> ,</cl-cd>
<cl-cd data-idx="72"> ,</cl-cd>
<cl-cd data-idx="73"> ,</cl-cd>
<cl-cd data-idx="74"> ,</cl-cd>
<cl-cd data-idx="75"> ,</cl-cd>
<cl-cd data-idx="76"> ,</cl-cd>
<cl-cd data-idx="77"> ,</cl-cd>
<cl-cd data-idx="78"> </cl-cd>
<cl-cd data-idx="79">];</cl-cd>
<cl-cd data-idx="80"> </cl-cd>
<cl-cd data-idx="81"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
歌词有一两处处理的不太理想，要做理疗了，将就吧 本帖主要是再演示一次独立lrc同步歌词插件。这几天先后有朋友提及歌词问题，其实我早封装了一个独立lrc歌词同步的插件（看代码第 17 行），它处理歌词的模拟同步、负责接管音频控制按钮（支持多个按钮，看代码第 25 行）、联动管理视频（支持多个，无需配置，视频设为loop、muted，建议不要autoplay，看代码第 10 行）。
注意：插件已经接管了 audio 标签的常用事件监听，共 4 个： ontimeupdate、onplaying、onpause、onseeked，这些事件不能在帖子中再监听。 lrc.js 插件的使用说明在论坛也发过，大家可以找找。我站里也有存档：
http://mhh.52qingyin.cn/art/show.php?st=1&sd=1&art=mahei_1702857480 这月亮可不苦，花如潮，歌如海，生福窝窝里{:4_189:} 嗯，记得黑黑有专门的独立lrc同步歌词插件的。
黑黑真细心，又做了个帖子来把歌词同步的代码重发出来{:4_199:} 这个制作好美，选用的视频和背景融合得那么好。{:4_199:}
歌曲也极好听，还是头一次听呢，歌词非常真实的时下心理描述，节奏轻松，还带说唱呢，这歌真不错。 马黑黑 发表于 2024-4-18 09:36
歌词有一两处处理的不太理想，要做理疗了，将就吧
黑黑要做理疗，还这么细心为大家带来帖子，太不容易了{:4_187:} 红影 发表于 2024-4-18 10:46
黑黑要做理疗，还这么细心为大家带来帖子，太不容易了
哪里哪里 红影 发表于 2024-4-18 10:42
这个制作好美，选用的视频和背景融合得那么好。
歌曲也极好听，还是头一次听呢，歌词非常真实的 ...
有的与众不同 红影 发表于 2024-4-18 10:40
嗯，记得黑黑有专门的独立lrc同步歌词插件的。
黑黑真细心，又做了个帖子来把歌词同步的代码重发出来{:4_1 ...
做那个小球碰撞粒子，大家觉得好玩，像放歌词上去 樵歌 发表于 2024-4-18 10:18
这月亮可不苦，花如潮，歌如海，生福窝窝里
过来人 马黑黑 发表于 2024-4-18 12:15
哪里哪里
祝愿早日好起来{:4_187:} 马黑黑 发表于 2024-4-18 12:16
有的与众不同
很能抓住现代人的某些心理特征，很有特点的歌。 马黑黑 发表于 2024-4-18 12:16
做那个小球碰撞粒子，大家觉得好玩，像放歌词上去
嗯嗯，有这个例子，放歌词也可以了。 红影 发表于 2024-4-18 13:39
嗯嗯，有这个例子，放歌词也可以了。
早就可以了 红影 发表于 2024-4-18 13:38
很能抓住现代人的某些心理特征，很有特点的歌。
{:4_181:} 红影 发表于 2024-4-18 13:37
祝愿早日好起来
{:4_181:} 苦月亮，奇怪的标题。好奇了下，原来是一部电影，虐恋啊。。{:4_173:}