x-waveform

Audio waveform visualizer Web Component

npm i x-waveform

pnpm add x-waveform

yarn add x-waveform

Examples

# web

Try it live

# view source

example/web.ts

import { fetchAudioBuffer } from 'webaudio-tools'
import { WaveformElement } from 'x-waveform/dist/esm'

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

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

const analyser = ctx.createAnalyser()
analyser.fftSize = 512
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-waveform') as WaveformElement).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

# WaveformElement

src/x-waveform.ts#L29

# constructor()

# new WaveformElement()

WaveformElement

# $

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

Context<WaveformElement & JsxContext<WaveformElement> & 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-waveform.ts#L46

AnalyserNode

# analyserData

src/x-waveform.ts#L47

Float32Array

# autoResize  =  false

src/x-waveform.ts#L32

boolean

# background  =  '#123'

src/x-waveform.ts#L38

string

# canvas

src/x-waveform.ts#L48

HTMLCanvasElement

# color  =  '#1ff'

src/x-waveform.ts#L39

string

# context

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

ContextClass<WaveformElement & JsxContext<WaveformElement> & 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-waveform.ts#L67

# ()

()  =>

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-waveform.ts#L49

# ()

()  =>

void

# height  =  100

src/x-waveform.ts#L35

number

# host

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

WaveformElement

# loop

src/x-waveform.ts#L50

{

# start()

start()  =>

void

# stop()

stop()  =>

void

}

# onmounted

EventHandler<WaveformElement, CustomEvent<any>>

# onunmounted

EventHandler<WaveformElement, CustomEvent<any>>

# pixelRatio  =  window.devicePixelRatio

src/x-waveform.ts#L36

number

# root  =  ...

src/x-waveform.ts#L30

ShadowRoot

# width  =  300

src/x-waveform.ts#L34

number

# worker  =  ...

src/x-waveform.ts#L43

Worker

# workerData

src/x-waveform.ts#L44

Float32Array

# workerUrl  =  ...

src/x-waveform.ts#L42

string

# created(ctx)

# ctx

Context<WaveformElement & JsxContext<WaveformElement> & 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-waveform.ts#L69

# $

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

# start() – Start displaying the spectrum.

src/x-waveform.ts#L57

start()  =>

void

# stop() – Stop displaying the spectrum.

src/x-waveform.ts#L63

stop()  =>

void

# toJSON()

toJSON()  =>

Pick<WaveformElement, keyof WaveformElement>

Credits

• sigl by stagas – Web framework

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas