KILL EM WIS KINDNESS

马黑黑 · 发表于 2025-3-19 20:25

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

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

x

马黑黑 · 发表于 2025-3-19 20:25

本帖测试原生LRC歌词同步播放器模块：

<style>
@import 'https://638183.freep.cn/638183/web/ku/yslrc_player.css';
#papa { margin: 30px 0 30px calc(50% - 593px); background: #000 url('https://638183.freep.cn/638183/t24/5/killme.jpg') no-repeat center/cover; }
#mplayer { --hlcolor: #fff; --prog: darkred; --track: #ccc; color: #333; background: none; bottom: 10px; }
#fsbtn { top: 20px; }
</style>
<div id="papa" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=543203947" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/20/05/03/video6364ffef695bb.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_player.js';
var lrc = `[00:00.00]KILL EM WIS KINDNESS\n[00:16.661]The world can be a nasty place\r\n[00:20.681]You know it, I know it, yeah\r\n[00:24.915]We don't have to fall from grace\r\n[00:29.794]Put down the weapons you fight with\r\n[00:32.934]Kill 'em with kindness\r\n[00:34.887]Kill 'em with kindness\r\n[00:36.895]Kill 'em, kill 'em, kill 'em with kindness\r\n[00:40.902]Kill 'em with kindness\r\n[00:42.901]Kill 'em with kindness\r\n[00:44.862]Go ahead, go ahead, go ahead now\r\n[01:18.813]We're running out of time\r\n[01:20.859]Everyday a small piece of you dies\r\n[01:24.488]Always somebody\r\n[01:26.287]You're willing to fight, to be right\r\n[01:31.805]Your lies are bullets\r\n[01:33.648]Your mouth's a gun\r\n[01:35.566]And no war in anger\r\n[01:37.391]Was ever won\r\n[01:39.328]Put out the fire before igniting\r\n[01:44.194]Next time you're fighting\r\n[01:47.059]Kill 'em with kindness\r\n[01:48.845]Kill 'em with kindness\r\n[01:50.712]Kill 'em, kill 'em, kill 'em with kindness\r\n[01:54.459]Kill 'em with kindness\r\n[01:56.375]Kill 'em with kindness\r\n[01:58.072]Go ahead, go ahead, go ahead now\r\n[02:14.501]Go ahead, go ahead now\r\n[02:30.545]Go ahead now\r\n[02:31.858]Your lies are bullets\r\n[02:33.709]Your mouth's a gun\r\n[02:35.610]No war in anger\r\n[02:37.409]Was ever won\r\n[02:39.371]Put out the fire before igniting\r\n[02:44.064]Next time you're fighting\r\n[02:46.985]Kill 'em with kindness\r\n[02:48.744]Kill 'em with kindness\r\n[02:50.649]Kill 'em, kill 'em, kill 'em with kindness\r\n[02:54.433]Kill 'em with kindness\r\n[02:56.324]Kill 'em with kindness\r\n[02:58.087]Go ahead, go ahead, go ahead now\r\n[03:31.348]`;
hcplay(papa, lrc);
</script>

复制代码

马黑黑 · 发表于 2025-3-19 20:26

本帖最后由马黑黑于 2025-3-19 20:40 编辑

这个原生LRC歌词同步播放器模块全新设计，可以显示多行歌词。以下是相关说明：

一、在 CSS 代码的 #mplayer { ... } 选择器里定义播放器的UI相关设置：

      --track: silver; /* 进度条底色 */
      --prog: red; /* 进度指示色 */
      --hlcolor: yellow; /* 歌词高亮色 */

      color: #fff; /* 播放器文本颜色 */
      background: #333; /* 播放器背景色（支持图片、渐变） */
      width: 500px; /* 播放器宽度（高度不用设置，自适应） */

二、如果需要设置更多行歌词同时显示，可用行数 × 30 的方式设置歌词区域 height 高度，建议行数为单数：

      #lrcDiv { height: 150px;  } /* 这将显示 5 行歌词，正常滚动后第 3 行高亮 */

三、全屏按钮和过去模块的一样，不多说明