0.0.2 • Published 2 years ago
am-audio v0.0.2
音频可视化插件
AMAudioOptions参数配置
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
canvas | canvas节点 | string | - |
sourceData | 音频资源解析数据 | ArrayBuffer | - |
isShowAudio | 是否创建Audio标签 | HTMLElement | - |
loop | 是否开启循环 | boolean | false |
bgType | 绘制音频背景类型，类型可选color img | string | color |
fillStyle | 当前bgType为color时，读取该配置值 | string | #ccc |
fillImage | 当前bgType为img时，读取该配置值 | string | - |
fftSize | 音频解析器对应的fftSize值 | number | 128 |
drawDefaultXDistance | canvas主体默认绘制方块读取该配置项，表明每个方块间距 | number | 1 |
drawMainStyle | canvas默认绘制方式（方块模式)，类型可选default custom | string | |
drawDefaultBarWidth | canvas默认模式绘制配置，方块默认宽度大小 | number | 0 |
drawDefaultBarHeight | canvas默认模式绘制配置，方块默认高度大小 | number | - |
drawDefaultScale | canvas默认模式绘制配置，方块长度是否开启缩小比例 | number | 1 |
drawDefaultFillStyle | canvas默认模式绘制配置，方块默认填充颜色 | string | #fff |
drawDefaultYDistance | canvas默认模式绘制，设置方块间纵向间距 | number | 3 |
drawCanvasBackground | canvas绘制背景操作函数(若无设置，则调用默认绘制模式) | function | - |
drawCanvasMain | 当canvas配置中设定了drawMainStyle为custom，则调用该操作函数，若无则调用默认配置方块模式 | function | - |
duraingDrawCanvasMainCallback | 当canvas首轮绘制完毕后的操作函数 | function | - |
使用说明
const amAudio = new AMAudio({
canvas,
loop: false,
sourceData: '数据源',
drawDefaultXDistance: 6,
fftSize: 128,
drawDefaultBarWidth: 10,
drawDefaultBarHeight: 2,
drawDefaultScale: 0.5,
drawDefaultFillStyle: "#f00",
drawDefaultYDistance: 2,
bgType: 'color',
drawMainStyle: 'default',
fillImage: '图片地址',
duraingDrawCanvasMainCallback: (ctx, instance) => {
ctx.fillStyle = 'rgba(255,255,0,.5)';
ctx.fillRect(x, 350 - y, 50, 50);
x -= 1;
y += 2;
}
})