·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
audio插件使用指南
audio插件提供一种帖子媒体管理机制，即，音频联动具有开关变量的CSS动画、视频和内嵌代码的svg动画，使用它可以使帖子的制作更为简单高效。
audio插件遵循ES6模块规范制作，对外开放接口是{ Aud }，可以按照如下方式导入和使用audio插件：
<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';
var config = { pa: mama, aud: aud, btn: player, prog: prog, cssval: '--state' };
var audio = new Aud(config);
audio.play();
</script>
其中的 config 变量为自定义名称的变量，为插件所需参数提供重要数据，重点说明如下：
var config = {
pa: mama, /* 指定帖子标识，mama 与帖子容器id一致（下同） */
aud: aud, /* 指定音频标签标识 */
btn: player, /* 指定控制音频播放/暂停的按钮标识 */
prog: prog, /* 指定进度条标识 */
cssval: '--state', /* 指定用于控制播放按钮CSS动画的CSS变量名称 */
};
上面，各配置键值对中，健名（例如pa）是固定名称，不可更改，键值（例如mama）是帖子事实使用的id标识符，应根据帖子情况赋值。
audio插件不负责渲染UI，界面应由帖子实现，不过这里准备了一个配套的CSS，虽然简单却也可以大大减少帖子的相关CSS设置。若使用该配套CSS资源，可以像下面的示例引用和简单设计帖子的CSS：
<style>
@import './audio.css'; /* 引用配套简易CSS资源 */
/* 帖子容器 ：设置必要的属性 配套的 .pa 选择器设定了 1024*640 的尺寸并令子元素居中 */
#mama { margin: 20px auto; background: black url('图片地址') no-repeat center/ cover; }
/* 播放器按钮 ：调整位置 */
#player { left: calc(50% - 130px); }
/* 进度条 ：设置位置、配色（底轨+滑块+文本） */
#prog { bottom: 30px; width: 280px; --bg1: tan; --bg2: orange; --color: orange; }
</style>
帖子HTML代码使用对应的id标识符、class属性：
<div id="mama" class="pa"> <audio id="aud" src="音频地址"></audio> <img id="player" class="player" src="播放器图片地址" alt="" /> <!-- 进度条提供 data-tt 属性 --> <div id="prog" class="prog" data-tt="00:00 00:00"></div> </div>
其中几个标签的HTML class属性就是对应简易CSS资源的类选择器：.pa 对应帖子容器、.player 对应播放按钮、.prog 对应进度条。标签的id标识符不一定是这样，可以自行定义，只要配套自编的CSS样式并正确配置插件所需的键值对变量即可，但class只能像上面这么使用，因为这是简易CSS资源的设定。
另外，不满意简易CSS资源部分设置的，可在对应的 #选择器 重新设置相应属性，比如 width、height等，所做的设置会覆盖简易CSS资源的设定。甚至可以抛开简易CSS资源，编写完全由自己设定的CSS样式，只要能配套audio插件便可。
最后给出一个帖子实例代码供参考，可以将代码拿到 http://mhh.52qingyin.cn/api/pcode/ 或存为本地HTML文档测试运行：
<style>
@import 'https://638183.freep.cn/638183/web/css/audio.css';
#mama { margin: 20px auto; background: black url('https://638183.freep.cn/638183/small/opic.jpg') no-repeat center/ cover; }
#player { left: calc(50% - 130px); }
#prog { bottom: 30px; width: 280px; --bg1: tan; --bg2: orange; --color: orange; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
</style>
<div id="mama" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1919684213"></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/50/06/video6363568e47b1f.mp4" autoplay loop muted></video>
<img id="player" class="player" src="https://638183.freep.cn/638183/web/svg/ccf.svg" alt="" />
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>
<script type="module">
import { Aud } from './audio.js';'https://638183.freep.cn/638183/web/mod/audio.js';
var mDatas = { pa: mama, aud: aud, btn: player, prog: prog, cssval: '--state' };
var audio = new Aud(mDatas);
audio.play();
</script>
前一篇: fscreen模块：更方便的全屏切换插件
下一篇: 新圆环播放器使用说明
评论列表 [0条]
