新线条进度条播放器模块使用说明

马黑黑 · 发表于 2024-11-29 20:30

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

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

x

本帖最后由马黑黑于 2024-11-29 20:32 编辑

模块的引用及参数配置：

<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/mod/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属性。

最后给出《我要找到你》一帖主要代码供参考：

<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: 10px; }
</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],[167.68,"一开始一路走一辈子",5.6]];
hcplay(pa, lrcAr);
fscreen.fs(pa, fsbtn);
</script>