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 {
}