新裤子乐队 - 手扶拖拉机斯基
<style>@import 'https://638183.freep.cn/638183/web/mod/osc_lrc.css';
#pa { margin: 30px 0 30px calc(50% - 721px); width:1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/5/xkzyd.jpg') no-repeat center/cover; }
#mplayer { width: 400px; height: 75px; bottom: 20px; --prog: yellow; --track: white; }
#lrc { top: 20px; }
#fsbtn { left: 10px; top: 10px; }
</style>
<div id="pa" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=28160040"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/23/51/26/video6363e37e57042.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/osc_lrc.js';
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script>
相关说明：
（一）osc_lrc.js 模块支持发纯音乐贴、LRC歌词同步帖：
纯音乐帖 ：hcplay(pa); // 参数 pa 为 id="pa" 的帖子容器，若帖子容器 id="tz"，则将 pa 换位 tz，下同
LRC帖：hcplayer(pa, geci); // geci 为前面声明的歌词变量
（二）示波状进度条音频播放控制器使用 canvas 生成，要求在帖子中设置 #mplayer 选择器的宽度（width）、进度指示色（--prog）、示波底色（--track），参照帖子代码第 4 行。
（三）LRC歌词字体大小、同步颜色可以自定义，若需要自定义，请在 #lrc 选择器加入：
font-size: 20px; /* 字体大小 */
color: silver; /* 底色 */
--bg: navy; /* 进度色 支持图片、渐变色 */
（四）其他未尽事宜请参阅其他帖子的模块说明，本模块不再发布独立说明文档
本帖最后由 马黑黑 于 2024-11-30 19:31 编辑 <br /><br />留个代码楼{:4_173:}
<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/osc_lrc.css';
#pa { margin: 30px 0 30px calc(50% - 721px); width:1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/5/xkzyd.jpg') no-repeat center/cover; }
#mplayer { width: 400px; height: 75px; bottom: 20px; --prog: yellow; --track: white; }
#lrc { top: 20px; }
#fsbtn { left: 10px; top: 10px; }
</style>
<div id="pa" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=28160040"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/23/51/26/video6363e37e57042.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/osc_lrc.js';
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 白老师今天封了个示波型小波，这个动起来跟音乐的波纹一样一样，又独特又好看。。 花飞飞 发表于 2024-11-30 19:27
白老师今天封了个示波型小波，这个动起来跟音乐的波纹一样一样，又独特又好看。。
canvas画布很勤快的 我来看看这个插件的视频样式，跟细线型一样也是.vid，
正在跟昨天的细线型，想给视频加个透明度，
结果加成#vid怎么都无效，看了代码后才加成功。。
{:4_173:} 花飞飞 发表于 2024-11-30 19:26
本帖最后由 马黑黑 于 2024-11-30 19:31 编辑 留个代码楼
帖子代码
谢谢 马黑黑 发表于 2024-11-30 19:30
canvas画布很勤快的
{:4_170:}
跟画布的也想勤快，可惜水平太有限，半天整不出一张图，
更崩的是做了半天的还被自己全盘否了。。
花飞飞 发表于 2024-11-30 19:30
我来看看这个插件的视频样式，跟细线型一样也是.vid，
正在跟昨天的细线型，想给视频加个透明度，
结果加 ...
CSS资源文档，除了 #mplayer，其他都用 class选择器，即 .XXX 马黑黑 发表于 2024-11-30 19:32
谢谢
{:4_170:}看你贴子很少代不到代码，直觉得留一个 花飞飞 发表于 2024-11-30 19:32
跟画布的也想勤快，可惜水平太有限，半天整不出一张图，
更崩的是做了半天的还被自己全盘否 ...
否定之否定原则用上了 花飞飞 发表于 2024-11-30 19:33
看你贴子很少代不到代码，直觉得留一个
忘记了 马黑黑 发表于 2024-11-30 19:33
CSS资源文档，除了 #mplayer，其他都用 class选择器，即 .XXX
看到了，还研究了一下下，还有歌词也是 #lrc~~ 马黑黑 发表于 2024-11-30 19:33
否定之否定原则用上了
{:4_173:}又重新起个头啊就很顺利了。。。
我有个半成品的文件夹。。
全是这样整一半，可能隔阵子看就会有点灵感 花飞飞 发表于 2024-11-30 19:34
看到了，还研究了一下下，还有歌词也是 #lrc~~
我说的是引用的资源文档，除了 #mplayer，其他都是 .xxx
但帖子的HTML结构，lrc歌词元素应使用 id="lrc" class="lrc"，id既是JS模块识别的依据，也是帖子前台修改样式的依托 花飞飞 发表于 2024-11-30 19:37
又重新起个头啊就很顺利了。。。
我有个半成品的文件夹。。
全是这样整一半，可能隔阵子看就 ...
这就冷却法，往往能出现奇迹 马黑黑 发表于 2024-11-30 19:34
忘记了
{:4_173:}
偶尔忘一次也好的，更接地气儿。。 花飞飞 发表于 2024-11-30 19:39
偶尔忘一次也好的，更接地气儿。。
最后啥都忘掉了也正常的 马黑黑 发表于 2024-11-30 19:37
我说的是引用的资源文档，除了 #mplayer，其他都是 .xxx
但帖子的HTML结构，lrc歌词元素应使用 id="lr ...
我再跑去瞅了一下插件代码和贴子代码它们的区别。
有点明白了
{:4_173:} 马黑黑 发表于 2024-11-30 19:38
这就冷却法，往往能出现奇迹
好吧，有的能接回来，
多数再看时原来卡在哪里还是那里直接卡住，
可能沉的时间还不够长{:4_173:}