@wings-j/web-audio-wave v2.3.0

Web 音频波形，频域可视化。

基于 Canvas。

安装

npm install @wings-j/web-audio-wave

使用

ESM

import WebAudioWave from '@wings-j/web-audio-wave'

let audio = document.querySelector('audio')
let webAudioWave = new WebAudioWave(
  'bar',
  audio,
  {
    rate: 60,
    size: 512,
    width: 1200,
    height: 800
  },
  {
    color: 'skyblue',
    gap: 1
  }
)

document.body.append(webAudioWave.canvas)

IIFE

<script src="@wings-j/web-audio-wave/dist/index.iife.js"></script>

let audio = document.querySelector('audio')
let webAudioWave = new WebAudioWave.default(
  'bar',
  audio,
  {
    rate: 60,
    size: 512,
    width: 1200,
    height: 800
  },
  {
    color: 'skyblue',
    gap: 1
  }
)

document.body.append(webAudioWave.canvas)

API

类

WebAudioWave(type: string, audio: HTMLAudioElement, option?: Option)

• type：类型
• audio：音频元素
• option：通用选项

播放

WebAudioWave.prototype.play()

停止

WebAudioWave.prototype.stop()

配置类型

WebAudioWave.prototype.config(option: GraphOption)

option：可视化配置

配置

类型

• bar：柱形
• curve：曲线
• circle：圆圈
• ripple：波纹

通用配置（Option）

可选的滤波器类型：BiquadFilterNode。

类型配置（VisualizeOption）

颜色选项用 6 位 HEX 表示，并且有优先级，从高到低：

1. dynamicColor
2. gradientColor
3. color

参数ease表示缓动函数，可选值有：

• linear
• sineIn
• sineOut
• sineInOut
• quadIn
• quadOut
• quatInOut
• cubicIn
• cubicOut
• cubitInOut
• quartIn
• quartOut
• quartInOut
• quintIn
• quintOut
• quintInOut
• expoIn
• expoOut
• expoInOut
• circIn
• circOut
• circInOut
• backIn
• backOut
• backInOut
• elasticIn
• elasticOut
• elasticInOut
• bounceIn
• bounceOut
• bounceInOut

bar

curve

circle

ripple

round

rotate可选值：

• 0：无旋转
• 1：顺时针旋转
• -1：逆时针旋转