audio2wave
Draw the wave in canvas use processed data from audio Element or MediaStream
install
Import the module and bundle it for the browser with your favorite module bundler,
$ npm install audio2wave
example
import { Audio2Wave } from 'audio2wave';
const audio = document.getElementById('audio');
const container = document.getElementById('container')
const audio2wave = new Audio2Wave({
audio,
container,
drawerConfig: {
color: '#007fff'
},
dataConfig: {
fftSize: 512
}
});
audio.onplay = () => {
audio2wave.start();
}
audio.onpause = () => {
audio2wave.stop();
}
window.onunload = () => {
audio2wave.destroy();
}Or
import { Audio2Wave } from 'audio2wave';
const audio = new MediaStrem();
// .... TODO: add tracks
const container = document.getElementById('container')
const audio2wave = new Audio2Wave({
audio,
container,
drawerConfig: {
color: '#007fff'
},
dataConfig: {
fftSize: 512
}
});
queueMicrotask(() => {
audio2wave.start()
});
window.onunload = () => {
audio2wave.destroy();
}API
Audio2Wave
export declare class Audio2Wave implements IBase {
private drawer;
private processer;
private config;
constructor(config: IConfig);
start(): void;
stop(): void;
private stateChagneHandler;
private addEventListener;
private removeEventListener;
destroy(): Promise<void>;
}bast.ts
type IPartial<T> = {
[P in keyof T]?: T[P]
}
type IReadOnly<T> = {
readonly [P in keyof T]: T[P]
}
type IRequired<T> = {
[P in keyof T]-?: T[P]
}
type IPick<T, K extends keyof T> = {
[P in K]: T[P]
}IConfig
export interface IDataConfig {
fftSize: 128|256|512|1024;
}
export enum ALIGN {
LEFT,
CENTER,
RIGHT,
}
export interface CanvasWH {
width: number;
height: number;
}
export interface IDrawerConfig {
color: string;
barWidth: number;
align: ALIGN;
xSpace: number;
canvasWH: CanvasWH;
}
export interface IConfig {
audio: IAudio | IStream;
container: IContainer;
dataConfig?: IPartial<IDataConfig>;
drawerConfig?: IPartial<IDrawerConfig>;
}IConfig.audio, IConfig.container
export interface IContainer extends HTMLElement {
}
export interface IAudio extends HTMLMediaElement {
}
export interface IStream extends MediaStream {
}