Audio FFT
这是一个基于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
/**
* @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 () {
// ...
}示例
