FMG【黑师最新音画模板——圆环小播（纯音版）】

凡哥

花简静

内容齐全：这个新开发的音画模板，有图片，音乐，进度条，小播，视频特效，全屏等音画贴能展示和传递展现的所有的功能~~
代码简洁：看沙发楼最后一段，十几行代码就可以涵盖以上音画所需的所有内容。。

非常经典的音画模板贴。。
感谢黑师一直不断的在研究。。提供这么好的模板
所有音画小伙伴们制图愉快，做贴快乐
希望千山作品越来越优秀。。

凡哥

圆环播放器模块使用说明

圆环播放器模块使用ES6标准编写，引用模块及配置模块方法如下：

<script type="module">
	//引用模块
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/circle_lrc.js';
	//配置模块参数一 ：基于纯音乐
	hcplay(ma);

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

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

虽然模块引用与参数配置极简，但也需要相应的前台配套才能支持模块的运行。一是CSS，需要引用一个CSS文档、做简单的播放器定位、配色工作：

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css?v=1.11'; /* 引用CSS资源 */
	/* 播放器定位与配色 */
	#mplayer { bottom: 10px; --svgtrack: #ccc; --svgprog: #fefefe; --svgopacity: .65; }
	/* 这里是其它的CSS代码 */
</style>
	

配色方式不止上述这种方法，只要熟悉CSS，可以绕开CSS变量具体给播放器的进度条底色、进度条覆盖色、时间信息文本颜色、按钮颜色分别进行设计。

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

<div id="pa" class="pa">
	<audio src="音乐地址"></audio>
	<video class="vid" src="视频地址" autoplay loop muted></video>
	<!-- div id="fsbtn" class="fsbtn">进入全屏</div-->
</div>
	

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

最后给出《FMG》一帖的代码共大家参考：

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css?v=1.11';
	#pa { margin: 30px 0 30px calc(50% - 593px);  background: url('https://638183.freep.cn/638183/t24/webp2/fmg.webp') no-repeat center/cover; }
	#mplayer { bottom: 10px; --svgtrack: #eee; --svgprog: #DEDEE5; --svgopacity: .45; }
	#fsbtn { top: 10px; }
</style>

<div id="pa" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1836017843" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/12/49/39/video6363486389f0f.mp4" autoplay loop muted></video>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js?v=1.11';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/circle_lrc.js?v=1.11';
hcplay(pa);
fscreen.fs(pa, fsbtn);
</script>
	

扬帆

问好凡哥老师，屡创新高，内涵丰富，可操作性强，谢谢老师深度分享

令狐冲

凡哥厉害
大场面，高科技，大数据
正是这个时代的节奏
画面很震撼。。。

柒玥

大气的作品，欣赏凡哥老师带来的精美佳作！

柒玥

问好凡哥老师感谢你的精彩！

柒玥

祝凡哥老师创作愉快，期待更多佳作分享！

清梦

欣赏凡哥老师带来的精彩作品。

清梦

问好凡哥老师，感谢你的精彩分享。

清梦

祝凡哥老师创作愉快，每天好心情！