Skip to content

Latest commit

 

History

History
300 lines (235 loc) · 5.45 KB

README_EN.md

File metadata and controls

300 lines (235 loc) · 5.45 KB
Raw

中文

Audio FFT

LICENSE LICENSE

This is a plugin for real-time music frequency rendering based on canvas.

The plugin uses the incoming audio instance as an audio source for fast Fourier transform to obtain real-time frequency data, draws it out using canvas, supports multiple frequency modes, and can dynamically switch audio instances, support gradient colors.

Install with npm

$ npm install @jiaminghi/audio-fft

Use

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()

Quick experience

<!--Resources are located on personal servers for experience and testing only, do not use in production environments-->
<!--Debug version-->
<script src="http://lib.jiaminghi.com/audiofft/audiofft.map.js"></script>
<!--Compression version-->
<script src="http://lib.jiaminghi.com/audiofft/audiofft.min.js"></script>
<script>
  const fft = new AudioFFT(params)
  // do something
</script>

Demo demo effect please moveDemo

Tip: Recommended to use the Chrome browser to view the Demo, if the Demo does not draw the spectrum and throw the error AudioContext does not allow to start , enter chrome://flags/#autoplay-policy in the address bar, change Default to No user gesture is required to view the Demo normally.

Class AudioFFT

Class

/**
 * @description Class of AudioFft
 * @param {Object} canvas Canvas DOM
 * @param {Object} config configuration
 * @return {AudioFft} AudioFft Instance
 */
export default class AudioFft {
    //...
}

config

analyserFFT

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

spring

/**
 * @description Spring Mode
 * @type {Boolean}
 * @default spring = false
 */

wave

/**
 * @description Wave Mode
 * @type {Boolean}
 * @default wave = false
 */

symmetry

/**
 * @description Symmetry Mode
 * @type {Boolean}
 * @default symmetry = false
 */

pick

/**
 * @description Whether to show pick
 * @type {Boolean}
 * @default pick = true
 */

colorTransition

/**
 * @description Whether to enable color transition
 * @type {Boolean}
 * @default colorTransition = false
 */

colors

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

opacity

/**
 * @description Color opacity
 * @type {Number}
 * @default opacity = 1
 */

transitionFrame

/**
 * @description Color transition frame
 * @type {Number}
 * @default transitionFrame = 300
 */

columnGap

/**
 * @description Column gap
 * @type {Number}
 * @default columnGap = 5
 */

columnWidth

/**
 * @description Column width
 * @type {Number}
 * @default columnWidth = 10
 */

swingScale

/**
 * @description Swing scale
 * @type {Number}
 * @default swingScale = 1
 */

Tip

When the length of the colors is 1, the frequency is drawn in monochrome. When the length is greater than 1, the gradient is automatically applied. Enabling colorTransition will produce different effects.

prototype

setAudio

/**
 * @description Set audio instance
 * @param audio Audio instance
 * @return {Undefined} Void
 */
AudioFFT.prototype.setAudio = function (audio) {
    // ...
}

draw

/**
 * @description Draw frequency
 * @return {Undefined} Void
 */
AudioFFT.prototype.draw = function () {
    // ...
}

stop

/**
 * @description Stop drawing
 * @return {Undefined} Void
 */
AudioFFT.prototype.stop = function () {
    // ...
}

updateConfig

/**
 * @description Update config
 * @return {Undefined} Void
 */
AudioFFT.prototype.updateConfig = function (config = {}) {
    // ...
}

clear

/**
 * @description Clear canvas
 * @return {Undefined} Void
 */
AudioFFT.prototype.clear = function () {
    // ...
}

Examples