audio插件使用指南
本帖最后由 马黑黑 于 2024-11-20 11:56 编辑 <br /><br /><style>.art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
</style>
<div class="art">
<p>audio插件提供一种帖子媒体管理机制，即，音频联动具有开关变量的CSS动画、视频和内嵌代码的svg动画，使用它可以使帖子的制作更为简单高效。</p>
<p>audio插件遵循ES6模块规范制作，对外开放接口是<mark>{ Aud }</mark>，可以按照如下方式导入和使用audio插件：</p>
<div id="div1"><pre id="pre1">
<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>
</pre></div>
<p>其中的 config 变量为自定义名称的变量，为插件所需参数提供重要数据，重点说明如下：</p>
<div id="div2"><pre id="pre2">
var config = {
pa: mama, /* 指定帖子标识，mama 与帖子容器id一致（下同） */
aud: aud, /* 指定音频标签标识 */
btn: player, /* 指定控制音频播放/暂停的按钮标识 */
prog: prog, /* 指定进度条标识 */
cssval: '--state', /* 指定用于控制播放按钮CSS动画的CSS变量名称 */
};
</pre></div>
<p>上面，各配置键值对中，健名（例如pa）是固定名称，不可更改，键值（例如mama）是帖子事实使用的id标识符，应根据帖子情况赋值。</p>
<p>audio插件不负责渲染UI，界面应由帖子实现，不过这里准备了一个配套的CSS，虽然简单却也可以大大减少帖子的相关CSS设置。若使用该配套CSS资源，可以像下面的示例引用和简单设计帖子的CSS：</p>
<div id="div3"><pre id="pre3">
<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>
</pre></div>
<p>帖子HTML代码使用对应的id标识符、class属性：</p>
<div id="div4"><pre id="pre4">
<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>
</pre></div>
<p>其中几个标签的HTML class属性就是对应简易CSS资源的类选择器：.pa 对应帖子容器、.player 对应播放按钮、.prog 对应进度条。标签的id标识符不一定是这样，可以自行定义，只要配套自编的CSS样式并正确配置插件所需的键值对变量即可，但class只能像上面这么使用，因为这是简易CSS资源的设定。</p>
<p>另外，不满意简易CSS资源部分设置的，可在对应的 #选择器 重新设置相应属性，比如 width、height等，所做的设置会覆盖简易CSS资源的设定。甚至可以抛开简易CSS资源，编写完全由自己设定的CSS样式，只要能配套audio插件便可。</p>
<p>最后给出一个帖子实例代码供参考，可以将代码拿到 <a href="http://mhh.52qingyin.cn/api/pcode/" target="_blank">http://mhh.52qingyin.cn/api/pcode/</a> 或存为本地HTML文档测试运行：</p>
<div id="div5"><pre id="pre5">
<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>
</pre></div>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
hl.hl(div1, pre1);
hl.hl(div2, pre2);
hl.hl(div3, pre3);
hl.hl(div4, pre4);
hl.hl(div5, pre5);
</script>
这个插件是管理音频的，需要好好学学呢。
一会要出去了，先打卡，等回来再仔细学习。黑黑辛苦了{:4_187:} 谢谢黑黑辛苦，还给了个代码测试地方。下午好！{:4_190:} 看看感觉明白的，玩的时候就会忘记了{:4_170:} 小辣椒 发表于 2024-11-20 16:20
看看感觉明白的，玩的时候就会忘记了
这现象常用 梦江南 发表于 2024-11-20 13:51
谢谢黑黑辛苦，还给了个代码测试地方。下午好！
{:4_190:} 红影 发表于 2024-11-20 12:46
这个插件是管理音频的，需要好好学学呢。
一会要出去了，先打卡，等回来再仔细学习。黑黑辛苦了
{:4_191:} 这个在使用的过程中，css html 和js中配套使用，而且把底图的居中都封装好了呢{:4_187:} 这个最关键是让var mDatas = 或者var config =里的变量和自定义名称对应起来{:4_187:} 刚看到老师说要封装CSS，我还回说期待呢，现在就有了。。
@import './audio.css'; /* 引用配套简易CSS资源 */{:4_174:}
要不要这么神速。。 帖子HTML代码也给了。。。
实例也给了~~
感觉不满意可以重新设置，方便与灵活兼备。。{:4_170:} './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
谢谢黑黑老师！老师编辑辛苦了！
{:4_190:} 花飞飞 发表于 2024-11-20 19:29
刚看到老师说要封装CSS，我还回说期待呢，现在就有了。。
@import './audio.css'; /* 引用配套简易CSS资源 ...
这个之前打过底了，整理一下即可 马黑黑 发表于 2024-11-20 20:12
按最后的实例。前面的是讲解
行，明白了。。。只要那个完整的就好了。{:4_173:}