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>
	

红影

这个插件是管理音频的，需要好好学学呢。
一会要出去了，先打卡，等回来再仔细学习。黑黑辛苦了

梦江南

谢谢黑黑辛苦，还给了个代码测试地方。下午好！

小辣椒

看看感觉明白的，玩的时候就会忘记了

马黑黑

小辣椒 发表于 2024-11-20 16:20
看看感觉明白的，玩的时候就会忘记了

这现象常用

马黑黑

梦江南 发表于 2024-11-20 13:51
谢谢黑黑辛苦，还给了个代码测试地方。下午好！

马黑黑

红影 发表于 2024-11-20 12:46
这个插件是管理音频的，需要好好学学呢。
一会要出去了，先打卡，等回来再仔细学习。黑黑辛苦了

红影

这个在使用的过程中，css html 和js中配套使用，而且把底图的居中都封装好了呢

红影

这个最关键是让var mDatas = 或者var config =里的变量和自定义名称对应起来

花飞飞

刚看到老师说要封装CSS，我还回说期待呢，现在就有了。。
@import './audio.css'; /* 引用配套简易CSS资源 */
要不要这么神速。。

花飞飞

帖子HTML代码也给了。。。
实例也给了~~
感觉不满意可以重新设置，方便与灵活兼备。。

花飞飞

'./audio.js';'https://638183.freep.cn/638183/web/mod/audio.js';
这里的JS引用为啥两个，前面那个一半的必须存在的么？
还有我点例子中的小播试图让它暂停，它不听我话。。

马黑黑

花飞飞 发表于 2024-11-20 19:37
'./audio.js';'https://638183.freep.cn/638183/web/mod/audio.js';
这里的JS引用为啥两个，前面那个一半 ...

按最后的实例。前面的是讲解

马黑黑

花飞飞 发表于 2024-11-20 19:34
帖子HTML代码也给了。。。
实例也给了~~
感觉不满意可以重新设置，方便与灵活兼备。。

下一步是加lrc，正在做，主要工作其实是移植，但要做一些考量

马黑黑

红影 发表于 2024-11-20 18:55
这个最关键是让var mDatas = 或者var config =里的变量和自定义名称对应起来

对，这是配套问题：插件需要参数才能工作，参数不对工作不了

马黑黑

红影 发表于 2024-11-20 18:46
这个在使用的过程中，css html 和js中配套使用，而且把底图的居中都封装好了呢

是的。布局子元素的时候，有一些需要水平居中的，就设置一下 left 或top，反之需要垂直居中的就设置一下top或bottom，不需要任何居中的就设left和top

马黑黑

醉美水芙蓉 发表于 2024-11-20 19:08
谢谢黑黑老师！老师编辑辛苦了！

马黑黑

花飞飞 发表于 2024-11-20 19:29
刚看到老师说要封装CSS，我还回说期待呢，现在就有了。。
@import './audio.css'; /* 引用配套简易CSS资源 ...

这个之前打过底了，整理一下即可

花飞飞

马黑黑 发表于 2024-11-20 20:12
按最后的实例。前面的是讲解

行，明白了。。。只要那个完整的就好了。