我要找到你

凡哥

HCPlayer

凡哥

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/line_lrc.css';
	#pa { margin: 30px 0 30px calc(50% - 513px);  background: url('https://638183.freep.cn/638183/t24/webp2/findu.webp') no-repeat center/cover; }
	#mplayer { bottom: 30px; color: snow; }
	#lrc { bottom: 70px; }
	#fsbtn { top: 15px; }
</style>

<div id="pa" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1406642934" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/17/17/27/27/video66978e7fb1c4d.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/line_lrc.js';
var lrcAr = [[2.24,"冯子晨 - 我要找到你",4.0],[7.81,"作词 : 楼南蔚",2.0],[10.84,"作曲 : 陈耀川",2.0],[12.84,"编曲/吉他 : 归宿",2.0],[16.14,"有些人爱到忘了形",2.4],[19.08,"结果落的一败涂地",2.6],[23.44,"有些人永远在憧憬",2.6],[26.37,"却只差一步距离",2.6],[30.35,"问世间什么最美丽",2.3],[33.1,"爱情绝对是个奇迹",2.7],[37.62,"我明白会有一颗心",2.3],[40.6,"在远方等我靠近",2.7],[45.17,"喔我要找到你",1.8],[47.3,"不管南北东西",1.7],[49.44,"直觉会给我指引",2.5],[53.07,"若是爱上你",1.0],[54.28,"别问什么原因",1.9],[56.45,"第一眼就能够认出你",2.9],[59.82,"喔我要找到你",1.3],[61.43,"喊出你的名字",1.7],[63.44,"打开幸福的盒子",2.6],[66.92,"让我找到你",1.2],[68.45,"就从那一刻起",1.9],[70.5,"一开始一路走一辈子",3.6],[76.44,"有些人爱到忘了形",2.5],[79.06,"结果落的一败涂地",2.4],[83.45,"有些人永远在憧憬",2.4],[86.44,"却只差一步距离",3.1],[90.58,"问世间什么最美丽",2.3],[93,"爱情绝对是个奇迹",3.1],[97.51,"我明白会有一颗心",2.4],[100.48,"在远方等我靠近",3.8],[105.1,"喔我要找到你",1.8],[107.26,"不管南北东西",1.8],[109.29,"直觉会给我指引",2.1],[112.92,"若是爱上你",1.2],[114.32,"别问什么原因",1.9],[116.46,"第一眼就能够认出你",2.9],[119.81,"喔我要找到你",1.3],[121.31,"喊出你的名字",1.8],[123.48,"打开幸福的盒子",2.5],[126.92,"让我找到你",1.2],[128.39,"就从那一刻起",2.0],[130.47,"一开始一路走一辈子",3.6],[135.08,"喔我要找到你",1.9],[137.08,"不管南北东西",1.7],[139.38,"直觉会给我指引",2.5],[142.81,"若是爱上你",1.2],[144.15,"别问什么原因",2.0],[146.48,"第一眼就能够认出你",2.2],[149.8,"喔我要找到你",1.3],[151.27,"喊出你的名字",1.7],[153.46,"打开幸福的盒子",2.4],[157.01,"让我找到你",1.1],[158.26,"就从那一刻起",1.9],[160.46,"一开始一路走一辈子",3.0],[164.16,"一开始一路走一辈子",3.2],[167.68,"一开始一路走一辈子",5.6]];
hcplay(pa, lrcAr);
fscreen.fs(pa, fsbtn);
</script>

凡哥

相关说明

模块的引用及参数配置：

<script type="module">
	//引用模块 : tz 为 id="tz" 的帖子容器对象
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/line_lrc.js';
	//配置模块参数一 ：基于纯音乐
	hcplay(tz);

	//配置模块参数二 ：基于lrc歌词同步
	var geci = [[2.6,"歌词1",3.6],[7.5,"歌词2",4]];
	hcplay(tz, geci);
</script>
	

注意：模块参数的配置方法根据需要任选其一，不能两个都选。

模块引用与参数配置风格极简，不过也需要相应的前台配套才能顺利工作。一为CSS，需要引用一个CSS文档、做一些播放器的定位、配色等工作：

<style>
	@import 'https://638183.freep.cn/638183/web/css/line_lrc.css'; /* 引用CSS资源 */
	/* 播放器 id="mplayer" 定位与配色 */
	#mplayer { bottom: 10px; --btn_bg: url('按钮图片地址') center/cover; --prog: white; --track: silver; }
	/* 这里是其它的CSS代码 */
</style>
	

CSS变量中，播放按钮预设为 50*50 的尺寸，它用 #mplayer::before 做成，可以在帖子中重设此选择器以改变自己希望改变的属性；::after 则是播放时间信息展示。

二是HTML结构。在关键帖子元素中使用 class 属性以令所引用的CSS资源生效：

<-- 播放控制器已经在模块中添加 -->
<div id="pa" class="pa">
	<audio src="音乐地址"></audio>
	<video class="vid" src="视频地址" autoplay loop muted></video>
	<!-- div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div-->
	<!-- div id="fsbtn" class="fsbtn">进入全屏</div-->
</div>
	

上面代码中，帖子容器、视频、全屏按钮、lrc歌词容器等凡有class属性的，都会使用对应的CSS资源所设置的class选择器所设定的样式，不满意的可使用 #选择器 重新设定相关CSS属性。

柒玥

好好听的音乐，好看的作品，欣赏凡哥老师的精美作品！

回归

只有崇拜的表情了

清梦

好听，谢谢凡哥老师分享

清梦

祝凡哥老师周末愉快！

花简静

这个是最新最优秀的音画贴子模板。
内容齐全，代码简洁。。

花简静

还是经典的细线型小播，插件名称更换成line_lrc.js，更有标志性了。。
看了下小花的播放按纽直接封进去了。。
这样的搭配很漂亮~~

花简静

喜欢音画带歌词的朋友，这个就十分好用