苦月亮

马黑黑

红影

马黑黑 发表于 2024-4-20 12:20
每个人都有名，每个人都说话

被你这样一解说，名言两字的分量一下子就下降了

马黑黑

帖子完整代码

<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 = [     [2.0,"苦月亮 - 彭喜悦", 4.0],     [19.17,"从你侧面正脸 都是自信的呈现",4.0],     [23.67,"手指稍微疲倦 搭在沙发的靠垫",4.2],     [28.36,"谈吐不会做作 说到30最不怕寂寞",4.2],     [32.56,"不会刻意的洒脱 但有十分果断的气魄",4.5],     [37.11,"我想打扰你 在我还年轻 有十成的勇气",5.1],     [42.3,"不想谁趁机 让你做决定 动摇为了年纪",4.2],     [47.03,"我也可以在你身边一直喋喋不休",4.3],     [51.58,"也可以消失瞬间 当你想要独自停留",4.4],     [56.31,"我想被你抱紧 也能把你抱起",4.2],     [60.86,"暂时不能抽离 你是难解的谜语",4.3],     [65.53,"你的每个神情 牵动我的神经",4.3],     [70.21,"我也不会生气 对你很有耐心",4.4],     [74.92,"明白你也失落 错过想要的那个",4.2],     [79.42,"但时间依旧 不能归正从头",4.2],     [84.06,"所以你往前看 漂泊的船帆",1.8],     [85.85,"都期盼着上岸",2.1],     [87.94,"戏水的儿童 向你招手",2.3],     [90.23,"肆无忌惮 日月替换",2.5],     [92.75,"我们都该放过自己",2.2],     [94.91,"尽管有时也失望透顶",3.1],     [98.03,"我们逼自己清醒",1.5],     [99.49,"尽管有时失控情绪",3.1],     [102.54,"但我依然在",1.4],     [103.95,"你能看到的地方",2.8],     [107.01,"但我依然猜",1.4],     [108.45,"你那些隐藏的模样",3.3],     [112.01,"我想被你抱紧 也能把你抱起",4.2],     [116.67,"暂时不能抽离 你是难解的谜语",4.2],     [121.3,"你的每个神情 牵动我的神经",4.2],     [125.96,"我也不会生气 对你很有耐心",4.3],     [130.45,"我想被你抱紧 也能把你抱起",4.4],     [135.13,"暂时不能抽离 你是难解的谜语",4.5],     [139.78,"你的每个神情 牵动我的神经",4.5],     [144.45,"我也不会生气 对你很有耐心",4.6],     [149.62,"let grow old together",17.5],     [167.8,"从你侧面正脸 都是自信的呈现",4.3],     [172.28,"手指稍微疲倦 搭在沙发的靠垫",4.4],     [177.13,"谈吐不会做作 说到30最不怕寂寞",4.1],     [181.29,"不会刻意的洒脱 但有十分果断的气魄",4.4],     [186.34,"我想被你抱紧 也能把你抱起",4.2],     [190.89,"暂时不能抽离 你是难解的谜语",4.5],     [195.63,"你的每个神情 牵动我的神经",4.3],     [200.15,"我也不会生气 对你很有耐心",4.5],     [204.98,"我想被你抱紧 也能把你抱起",4.3],     [209.59,"暂时不能抽离 你是难解的谜语",4.3],     [214.18,"你的每个神情 牵动我的神经",4.4],     [218.75,"我也不会生气 对你很有耐心",4.5] ];   </script>

马黑黑

歌词有一两处处理的不太理想，要做理疗了，将就吧

马黑黑

本帖主要是再演示一次独立lrc同步歌词插件。这几天先后有朋友提及歌词问题，其实我早封装了一个独立lrc歌词同步的插件（看代码第 17 行），它处理歌词的模拟同步、负责接管音频控制按钮（支持多个按钮，看代码第 25 行）、联动管理视频（支持多个，无需配置，视频设为loop、muted，建议不要autoplay，看代码第 10 行）。

注意：插件已经接管了 audio 标签的常用事件监听，共 4 个： ontimeupdate、onplaying、onpause、onseeked，这些事件不能在帖子中再监听。

马黑黑

lrc.js 插件的使用说明在论坛也发过，大家可以找找。我站里也有存档：

http://mhh.52qingyin.cn/art/show ... rt=mahei_1702857480

樵歌

这月亮可不苦，花如潮，歌如海，生福窝窝里

红影

嗯，记得黑黑有专门的独立lrc同步歌词插件的。
黑黑真细心，又做了个帖子来把歌词同步的代码重发出来

红影

这个制作好美，选用的视频和背景融合得那么好。
歌曲也极好听，还是头一次听呢，歌词非常真实的时下心理描述，节奏轻松，还带说唱呢，这歌真不错。

红影

马黑黑 发表于 2024-4-18 09:36
歌词有一两处处理的不太理想，要做理疗了，将就吧

黑黑要做理疗，还这么细心为大家带来帖子，太不容易了

马黑黑

红影 发表于 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
哪里哪里

祝愿早日好起来

红影

马黑黑 发表于 2024-4-18 12:16
有的与众不同

很能抓住现代人的某些心理特征，很有特点的歌。

红影

马黑黑 发表于 2024-4-18 12:16
做那个小球碰撞粒子，大家觉得好玩，像放歌词上去

嗯嗯，有这个例子，放歌词也可以了。

马黑黑

红影 发表于 2024-4-18 13:39
嗯嗯，有这个例子，放歌词也可以了。

早就可以了

马黑黑

红影 发表于 2024-4-18 13:38
很能抓住现代人的某些心理特征，很有特点的歌。

马黑黑

红影 发表于 2024-4-18 13:37
祝愿早日好起来

南无月

苦月亮，奇怪的标题。好奇了下，原来是一部电影，虐恋啊。。