x-spectrum

Audio spectrum analyser Web Component

npm i x-spectrum

pnpm add x-spectrum

yarn add x-spectrum

Examples

# web

Try it live

# view source

example/web.ts

import { fetchAudioBuffer } from 'webaudio-tools'
import { SpectrumElement } from 'x-spectrum'

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

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

const analyser = ctx.createAnalyser()
analyser.fftSize = 16384
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, 75)
  source.connect(analyser)
  ;(document.querySelector('x-spectrum') as SpectrumElement).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

# SpectrumElement

src/x-spectrum.ts#L31

# constructor()

# new SpectrumElement()

SpectrumElement

# $
src/work/stagas/sigl/dist/types/sigl.d.ts#L25
Context<SpectrumElement & JsxContext<SpectrumElement> & 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-spectrum.ts#L49

AnalyserNode

# analyserData

src/x-spectrum.ts#L50

Float32Array

# autoResize  =  false

src/x-spectrum.ts#L34

boolean

# background  =  '#123'

src/x-spectrum.ts#L46

string

# color  =  '#1ff'

src/x-spectrum.ts#L47

string

# context

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

ContextClass<SpectrumElement & JsxContext<SpectrumElement> & 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">>

# 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-spectrum.ts#L63

# ()
()  =>

void

# getFFTLogIndex

src/x-spectrum.ts#L51

# (normal)
# normal

number

(normal)  =>

number

# gradient

src/x-spectrum.ts#L52

CanvasGradient

# gradientColors  =  ...

src/x-spectrum.ts#L59

{

# 0.3  =  '#424242'

string

# 1  =  '#2f2f2f'

string

}

# gravity  =  0.05

src/x-spectrum.ts#L44

number

# height  =  50

src/x-spectrum.ts#L37

number

# host

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

SpectrumElement

# loop

src/x-spectrum.ts#L64

{

# start()
start()  =>

void

# stop()

stop()  =>

void

}

# maxFreq  =  21000

src/x-spectrum.ts#L41

number

# minFreq  =  62

src/x-spectrum.ts#L40

number

# onmounted

EventHandler<SpectrumElement, CustomEvent<any>>

# onunmounted

EventHandler<SpectrumElement, CustomEvent<any>>

# peakPos

src/x-spectrum.ts#L53

Float32Array

# peakVel

src/x-spectrum.ts#L54

Float32Array

# pixelRatio  =  window.devicePixelRatio

src/x-spectrum.ts#L38

number

# root  =  ...

src/x-spectrum.ts#L32

ShadowRoot

# screen

src/x-spectrum.ts#L55

{

# canvas

src/x-spectrum.ts#L56

HTMLCanvasElement

# ctx

src/x-spectrum.ts#L57

CanvasRenderingContext2D

}

# speed  =  0.03

src/x-spectrum.ts#L43

number

# width  =  150

src/x-spectrum.ts#L36

number

# created(ctx)

# ctx
Context<SpectrumElement & JsxContext<SpectrumElement> & 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-spectrum.ts#L81

# $
Context<SpectrumElement & JsxContext<SpectrumElement> & 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<SpectrumElement, LifecycleEvents & object [K]> ], Off>>

# start() – Start displaying the spectrum.

src/x-spectrum.ts#L71

start()  =>

void

# stop() – Stop displaying the spectrum.

src/x-spectrum.ts#L77

stop()  =>

void

# toJSON()

toJSON()  =>

Pick<SpectrumElement, keyof SpectrumElement>

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