ENGLISH

这是一个基于Canvas进行实时音乐频谱绘制的插件。

插件将传入的audio实例作为音频来源进行快速傅里叶变换得到实时频谱数据，使用Canvas将其绘出，支持多种频谱模式，可以动态切换audio实例，支持渐变色。

npm安装

$ npm install @jiaminghi/audio-fft

使用

import AudioFFT from '@jiaminghi/audio-fft'

const canvas = document.getElementById('canvas')
const audio = document.getElementById('audio')

const fft = new AudioFFT(canvas, {
    // some config...
})
fft.setAudio(audio)
fft.draw()

Demo演示效果请移步Demo

• Class AudioFFT
• 示例

类

/**
 * @description Class AudioFft
 * @param {Object} canvas Canvas 实例
 * @param {Object} config 配置项
 * @return {AudioFft} AudioFft实例
 */
export default class AudioFft {
    //...
}

配置项

• analyserFFT
• spring
• wave
• symmetry
• pick
• colorTransition
• colors
• opacity
• transitionFrame
• columnGap
• columnWidth
• swingScale

analyserFFT

/**
 * @description Analyser fast fourier transform
 * @type {Number}
 * @default analyserFFT = 2048
 */

spring

/**
 * @description 弹簧模式
 * @type {Boolean}
 * @default spring = false
 */

wave

/**
 * @description 波浪模式
 * @type {Boolean}
 * @default wave = false
 */

symmetry

/**
 * @description 对称模式
 * @type {Boolean}
 * @default symmetry = false
 */

pick

/**
 * @description 是否显示拨片（非弹簧模式下有效）
 * @type {Boolean}
 * @default pick = true
 */

colorTransition

/**
 * @description 是否启用颜色渐变
 * @type {Boolean}
 * @default colorTransition = false
 */

colors

/**
 * @description 频谱颜色
 * @type {Array<String>}
 * @default colors = ['#6ed4d3', '#f5738f', '#4bb7e4']
 * @example colors = ['red', '#6ed4d3', 'rgb(100, 100, 100)', 'rgba(100, 100, 100, 1)']
 */

opacity

/**
 * @description 颜色透明度
 * @type {Number}
 * @default opacity = 1
 */

transitionFrame

/**
 * @description 颜色渐变过程帧数
 * @type {Number}
 * @default transitionFrame = 300
 */

columnGap

/**
 * @description 柱间间隙
 * @type {Number}
 * @default columnGap = 5
 */

columnWidth

/**
 * @description 柱宽度
 * @type {Number}
 * @default columnWidth = 10
 */

swingScale

/**
 * @description 频谱高度缩放比例
 * @type {Number}
 * @default swingScale = 1
 */

Tip

colors数组长度为1时，频谱单色绘制，长度大于1时，自动应用渐变色，启用colorTransition则会产生不一样的效果。

实例方法

• setAudio
• draw
• stop
• updateConfig
• clear

setAudio

/**
 * @description 设置audio实例
 * @param audio Audio实例
 * @return {Undefined} Void
 */
AudioFFT.prototype.setAudio = function (audio) {
    // ...
}

draw

/**
 * @description 开始绘制
 * @return {Undefined} Void
 */
AudioFFT.prototype.draw = function () {
    // ...
}

stop

/**
 * @description 停止绘制
 * @return {Undefined} Void
 */
AudioFFT.prototype.stop = function () {
    // ...
}

updateConfig

/**
 * @description 更新配置项
 * @return {Undefined} Void
 */
AudioFFT.prototype.updateConfig = function (config = {}) {
    // ...
}

clear

/**
 * @description 清除Canvas
 * @return {Undefined} Void
 */
AudioFFT.prototype.clear = function () {
    // ...
}