KILL EM WIS KINDNESS

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

马黑黑 发表于 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 = `KILL EM WIS KINDNESS\nThe world can be a nasty place\r\nYou know it, I know it, yeah\r\nWe don't have to fall from grace\r\nPut down the weapons you fight with\r\nKill 'em with kindness\r\nKill 'em with kindness\r\nKill 'em, kill 'em, kill 'em with kindness\r\nKill 'em with kindness\r\nKill 'em with kindness\r\nGo ahead, go ahead, go ahead now\r\nWe're running out of time\r\nEveryday a small piece of you dies\r\nAlways somebody\r\nYou're willing to fight, to be right\r\nYour lies are bullets\r\nYour mouth's a gun\r\nAnd no war in anger\r\nWas ever won\r\nPut out the fire before igniting\r\nNext time you're fighting\r\nKill 'em with kindness\r\nKill 'em with kindness\r\nKill 'em, kill 'em, kill 'em with kindness\r\nKill 'em with kindness\r\nKill 'em with kindness\r\nGo ahead, go ahead, go ahead now\r\nGo ahead, go ahead now\r\nGo ahead now\r\nYour lies are bullets\r\nYour mouth's a gun\r\nNo war in anger\r\nWas ever won\r\nPut out the fire before igniting\r\nNext time you're fighting\r\nKill 'em with kindness\r\nKill 'em with kindness\r\nKill 'em, kill 'em, kill 'em with kindness\r\nKill 'em with kindness\r\nKill 'em with kindness\r\nGo ahead, go ahead, go ahead now\r\n`;

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 行高亮 */

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

花飞飞 发表于 2025-3-19 20:30

这么快就成贴了，以为明天才出
刚还在想，整到贴子里还是打包的比较方便。。{:4_173:}

花飞飞 发表于 2025-3-19 20:34

空间感很强的经典黑色背景，纵向舞台，人物跳跃的视频是横向舞台。。
视频中央虚化之后，弱化了其中一项，叠合起来道是更有想象力

花飞飞 发表于 2025-3-19 20:37

小播隐去了背景，直接透明。。更容易适合各种颜色的贴子。。
歌词是不是受宽度限制，有的出现折行现象。。
跟贴时可以把字儿调小一点{:4_173:}

花飞飞 发表于 2025-3-19 20:39

音乐节奏感强，有爆发力，同一句歌词反复吟唱，很过瘾。。{:4_173:}

花飞飞 发表于 2025-3-19 20:40

background: none;为啥不用background:transparent{:4_173:}是不是可以互相代替

马黑黑 发表于 2025-3-19 20:41

花飞飞发表于 2025-3-19 20:30
这么快就成贴了，以为明天才出
刚还在想，整到贴子里还是打包的比较方便。。

封装相对容易吧。不过这是测试，可能存在的问题有待大家发现

马黑黑 发表于 2025-3-19 20:42

花飞飞发表于 2025-3-19 20:37
小播隐去了背景，直接透明。。更容易适合各种颜色的贴子。。
歌词是不是受宽度限制，有的出现折行现象。。 ...

播放器可以改变宽度，参考三楼的说明

马黑黑 发表于 2025-3-19 20:42

花飞飞发表于 2025-3-19 20:39
音乐节奏感强，有爆发力，同一句歌词反复吟唱，很过瘾。。

曲子好听的

花飞飞 发表于 2025-3-19 20:43

马黑黑发表于 2025-3-19 20:41
封装相对容易吧。不过这是测试，可能存在的问题有待大家发现

一切正常，显示正常，播放正常，运行正常。。
只需要把制作花潮歌词改为制作原生歌词{:4_173:}

马黑黑 发表于 2025-3-19 20:43

花飞飞发表于 2025-3-19 20:40
background: none;为啥不用background:transparent是不是可以互相代替

none 比 transparent 其实还要好，减少渲染消耗。不过效果一样

花飞飞 发表于 2025-3-19 20:45

马黑黑发表于 2025-3-19 20:42
播放器可以改变宽度，参考三楼的说明

好哒。。改宽度是最容易的了。。
看三楼还可以显示更多行。。。这个挺牛的。。{:4_173:}

花飞飞 发表于 2025-3-19 20:46

马黑黑发表于 2025-3-19 20:42
曲子好听的

好听的不分外国还是中国，都惊艳{:4_173:}

花飞飞 发表于 2025-3-19 20:47

马黑黑发表于 2025-3-19 20:43
none 比 transparent 其实还要好，减少渲染消耗。不过效果一样

后者比较认识，熟面孔，
前者既然也一样的话，就记它了。
毕竟单词短，好记。{:4_170:}

朵拉发表于 2025-3-19 20:55

这个漂亮，有空学习下{:4_178:}

马黑黑 发表于 2025-3-19 21:18

朵拉发表于 2025-3-19 20:55
这个漂亮，有空学习下

{:4_190:}

红影发表于 2025-3-19 21:19

这个画面太美妙了，黑黑对视频和背景的融合运用得太巧妙了{:4_199:}

马黑黑 发表于 2025-3-19 21:20

花飞飞发表于 2025-3-19 20:47
后者比较认识，熟面孔，
前者既然也一样的话，就记它了。
毕竟单词短，好记。

Web渲染的道理是酱紫：none 表示无，浏览器就会啥也不干，省事呢。transparent 虽说是透明的，但好歹是个颜色，它要去用透明的颜色渲染一下所定义的区域，累着呢

页: [1] 2 3 4 5 6

花潮论坛's Archiver

KILL EM WIS KINDNESS