x-spectrogram

Audio spectrogram Web Component.

npm i x-spectrogram

pnpm add x-spectrogram

yarn add x-spectrogram

Examples

# web

Try it live

# view source

example/web.ts

import { fetchAudioBuffer } from 'webaudio-tools'
import { SpectrogramElement } from 'x-spectrogram/dist/esm'

customElements.define('x-spectrogram', SpectrogramElement)
document.body.innerHTML = `
<div id="demo" style="display:inline-flex;height:80px;">
  <x-spectrogram autoresize></x-spectrogram>
</div>
`

const ctx = new AudioContext({ sampleRate: 44100, latencyHint: 'playback' })

const analyser = ctx.createAnalyser()
analyser.fftSize = 4096
analyser.smoothingTimeConstant = 0
analyser.maxDecibels = 0
analyser.minDecibels = -100

// @ts-ignore
const url = new URL('alpha_molecule.ogg', import.meta.url).toString()

fetchAudioBuffer(ctx, url).then(audioBuffer => {
  const source = ctx.createBufferSource()
  source.buffer = audioBuffer
  source.loop = true
  source.connect(ctx.destination)
  source.start(0, 30)
  source.connect(analyser)
  ;(document.querySelector('x-spectrogram') as SpectrogramElement).analyser =
    analyser
})

window.onclick = () => ctx.state !== 'running' ? ctx.resume() : ctx.suspend()
if (ctx.state !== 'running')
  document.body.appendChild(new Text('click to start/stop'))

API

# SpectrogramElement

src/x-spectrogram.ts#L29

# constructor()

# new SpectrogramElement()

SpectrogramElement

# $

src/work/stagas/sigl/dist/types/sigl.d.ts#L25

Context<SpectrogramElement & JsxContext<SpectrogramElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# analyser

src/x-spectrogram.ts#L49

AnalyserNode

# analyserData  =  ...

src/x-spectrogram.ts#L50

Float32Array

# autoResize  =  false

src/x-spectrogram.ts#L32

boolean

# background  =  '#123'

src/x-spectrogram.ts#L38

string

# canvas

src/x-spectrogram.ts#L53

HTMLCanvasElement

# color  =  '#1ff'

src/x-spectrogram.ts#L39

string

# context

src/work/stagas/sigl/dist/types/sigl.d.ts#L26

ContextClass<SpectrogramElement & JsxContext<SpectrogramElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# destroy  =  ...

src/x-spectrogram.ts#L76

# ()

()  =>

void

# dispatch

src/work/stagas/sigl/dist/types/events.d.ts#L4

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# draw

src/x-spectrogram.ts#L58

# ()

()  =>

void

# getFFTLogIndex

src/x-spectrogram.ts#L51

# (normal)

# normal

number

(normal)  =>

number

# height  =  50

src/x-spectrogram.ts#L36

number

# host

src/work/stagas/sigl/dist/types/sigl.d.ts#L24

SpectrogramElement

# loop

src/x-spectrogram.ts#L59

{

# start()

start()  =>

void

# stop()

stop()  =>

void

}

# maxFreq  =  21000

src/x-spectrogram.ts#L42

number

# minFreq  =  62

src/x-spectrogram.ts#L41

number

# onmounted

EventHandler<SpectrogramElement, CustomEvent<any>>

# onunmounted

EventHandler<SpectrogramElement, CustomEvent<any>>

# pixelRatio  =  window.devicePixelRatio

src/x-spectrogram.ts#L33

number

# renderNextAnimFrame

src/x-spectrogram.ts#L52

# ()

()  =>

void

# root  =  ...

src/x-spectrogram.ts#L30

ShadowRoot

# width  =  150

src/x-spectrogram.ts#L35

number

# worker  =  ...

src/x-spectrogram.ts#L46

null | Worker

# workerData

src/x-spectrogram.ts#L47

Float32Array

# workerUrl  =  ...

src/x-spectrogram.ts#L45

string

# created(ctx)

# ctx

Context<SpectrogramElement & JsxContext<SpectrogramElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/x-spectrogram.ts#L78

# $

Context<SpectrogramElement & JsxContext<SpectrogramElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SpectrogramElement, LifecycleEvents & object [K]> ], Off>>

# start() – Start displaying the spectrum.

src/x-spectrogram.ts#L66

start()  =>

void

# stop() – Stop displaying the spectrum.

src/x-spectrogram.ts#L72

stop()  =>

void

# toJSON()

toJSON()  =>

Pick<SpectrogramElement, keyof SpectrogramElement>

Credits

• sigl by stagas – Web framework
• webaudio-tools by stagas – Useful tools for WebAudio.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas