新裤子乐队 - 手扶拖拉机斯基

马黑黑

HCPlayer

马黑黑

相关说明：

（一）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; /* 进度色 支持图片、渐变色 */

（四）其他未尽事宜请参阅其他帖子的模块说明，本模块不再发布独立说明文档

花飞飞

留个代码楼

帖子代码

<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 = [
	[2.03,"张蔷 - 手扶拖拉机斯基", 8],
	[16.06,"作词 : 彭磊",4],
	[22.09,"作曲 : 彭磊",4],
	[28.24,"北京开往莫斯科的快车",2.8],
	[31.88,"越过西伯利亚伏尔加河",2.6],
	[35.16,"穿过施华洛奇的森林",2.8],
	[38.55,"来到迷幻的克里姆林宫",3.0],
	[42.2,"来自列宁格勒的牛仔",3.0],
	[45.56,"我有一把托尼卡吉他",2.9],
	[48.92,"加加林的火箭还在太空",2.9],
	[52.36,"托尔斯泰的安娜卡特琳娜",3.2],
	[55.86,"卡宾斯基 柴可夫斯基 卡车司机 出租司机 拖拉机司机",6.0],
	[62.78,"伊万诺夫 巴普诺夫 巴巴诺夫 他是懦夫 罗里罗索夫",6.0],
	[69.58,"莎拉波娃 达波波娃 人参娃娃 葫芦娃娃 库尔尼科娃",6.0],
	[76.36,"鲁舍夫维奇 德约科维奇 尼古拉维奇 费多罗维奇 RUSSIA DISCO",6.7],
	[87.02,"RUSSIA DISCO DANCE",2.6],
	[93.73,"RUSSIA DISCO DANCE",2.5],
	[97.12,"在这莫斯科郊外的夜晚",2.6],
	[100.25,"听不到那崇高的誓言",2.9],
	[103.81,"谁还会为理想而战斗",3.0],
	[107.27,"谁还会为爱情而牺牲",3.0],
	[110.65,"来自列宁格勒的牛仔",2.9],
	[114.07,"我有一把托尼卡吉他",2.9],
	[117.45,"加加林的火箭还在太空",2.8],
	[120.97,"托尔斯泰的安娜卡特琳娜",3.1],
	[124.36,"卡宾斯基 柴可夫斯基 卡车司机 出租司机 拖拉机司机",5.9],
	[131.22,"伊万诺夫 巴普诺夫 巴巴诺夫 他是懦夫 罗里罗索夫",6.3],
	[138.1,"莎拉波娃 达波波娃 人参娃娃 葫芦娃娃 库尔尼科娃",6.2],
	[144.97,"鲁舍夫维奇 德约科维奇 尼古拉维奇 费多罗维奇 RUSSIA DISCO",6.4],
	[152,"莫斯科不再相信谁的眼泪",3.0],
	[154.97,"她也不会再相信谁",2.7],
	[158.77,"曾经英俊的少年",2.9],
	[161.71,"他的年华已不再",3.4],
	[165.51,"莫斯科不再相信谁的眼泪",3.0],
	[168.58,"她也不会再相信谁",2.8],
	[172.22,"曾经热烈的旋律",3.2],
	[175.41,"就像RUSSIA DISCO GO",3.9],
	[196.87,"RUSSIA DISCO DANCE ...",8.2],
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script>

花飞飞

白老师今天封了个示波型小波，这个动起来跟音乐的波纹一样一样，又独特又好看。。

马黑黑

花飞飞 发表于 2024-11-30 19:27
白老师今天封了个示波型小波，这个动起来跟音乐的波纹一样一样，又独特又好看。。

canvas画布很勤快的

花飞飞

我来看看这个插件的视频样式，跟细线型一样也是.vid，
正在跟昨天的细线型，想给视频加个透明度，
结果加成#vid怎么都无效，看了代码后才加成功。。

马黑黑

花飞飞 发表于 2024-11-30 19:26
本帖最后由 马黑黑 于 2024-11-30 19:31 编辑 留个代码楼
帖子代码

谢谢

花飞飞

马黑黑 发表于 2024-11-30 19:30
canvas画布很勤快的

跟画布的也想勤快，可惜水平太有限，半天整不出一张图，
更崩的是做了半天的还被自己全盘否了。。

马黑黑

花飞飞 发表于 2024-11-30 19:30
我来看看这个插件的视频样式，跟细线型一样也是.vid，
正在跟昨天的细线型，想给视频加个透明度，
结果加 ...

CSS资源文档，除了 #mplayer，其他都用 class选择器，即 .XXX

花飞飞

马黑黑 发表于 2024-11-30 19:32
谢谢

看你贴子很少代不到代码，直觉得留一个

马黑黑

花飞飞 发表于 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
否定之否定原则用上了

又重新起个头啊就很顺利了。。。
我有个半成品的文件夹。。
全是这样整一半，可能隔阵子看就会有点灵感

马黑黑

花飞飞 发表于 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
忘记了

偶尔忘一次也好的，更接地气儿。。

马黑黑

花飞飞 发表于 2024-11-30 19:39
偶尔忘一次也好的，更接地气儿。。

最后啥都忘掉了也正常的

花飞飞

马黑黑 发表于 2024-11-30 19:37
我说的是引用的资源文档，除了 #mplayer，其他都是 .xxx

但帖子的HTML结构，lrc歌词元素应使用 id="lr ...

我再跑去瞅了一下插件代码和贴子代码它们的区别。
有点明白了

花飞飞

马黑黑 发表于 2024-11-30 19:38
这就冷却法，往往能出现奇迹

好吧，有的能接回来，
多数再看时原来卡在哪里还是那里直接卡住，
可能沉的时间还不够长