新圆环播放器使用说明
圆环播放器模块使用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属性。例如,上面所给的帖子内部代码里有一个 #mplayer 选择器,它实际上指向圆环播放器,里面的元素无非就是两个circle(圆环)、一个use(按钮)和text(文本),可以这样设置它们以达到为每一个组件创建各自的颜色:
#mplayer { position: absolute; bottom: 20px; left: 20px; } #mplayer text { fill: yellow; } #mplayer circle { stroke: orange; opacity: .7; } #mplayer circle:nth-of-type(1) { stroke: tan; } #mplayer use { fill: fuchsia; }
代码虽然多了几行,但能够实现更为丰富的色彩展现,一切看需要了。
最后给出《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>
前一篇: audio插件使用指南
下一篇: 椭圆环粒子播放器配置说明
发表评论:
评论列表 [1条]
#1 | 小白 于 2024-11-29 19:51 发布: 细致又全面,经典好教程。。