x-oscilloscope

Audio oscilloscope visualizer Web Component

npm i x-oscilloscope

pnpm add x-oscilloscope

yarn add x-oscilloscope

Examples

# web

Try it live

# view source

example/web.ts

import { fetchAudioBuffer } from 'webaudio-tools'
import { OscilloscopeElement } from 'x-oscilloscope'

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

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

const analyser = ctx.createAnalyser()
analyser.fftSize = 8192
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, 83)
  source.connect(analyser)
  ;(document.querySelector('x-oscilloscope') as OscilloscopeElement).analyser =
    analyser
})

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

API

# OscilloscopeElement

src/x-oscilloscope.tsx#L10

# constructor()

# new OscilloscopeElement()

OscilloscopeElement

# $

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

Context<OscilloscopeElement & JsxContext<OscilloscopeElement> & 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">>

# Plot  =  ...

src/x-oscilloscope.tsx#L20

Component<PlotElement, HTMLElement>

# analyser

src/x-oscilloscope.tsx#L18

AnalyserNode

# analyserData

src/x-oscilloscope.tsx#L19

Float32Array

# autoResize  =  true

src/x-oscilloscope.tsx#L11

boolean

# background  =  '#123'

src/x-oscilloscope.tsx#L14

string

# color  =  '#1ff'

src/x-oscilloscope.tsx#L15

string

# context

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

ContextClass<OscilloscopeElement & JsxContext<OscilloscopeElement> & 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

>

# divider  =  1

src/x-oscilloscope.tsx#L16

number

# draw

src/x-oscilloscope.tsx#L23

# ()

()  =>

void

# height  =  50

src/x-oscilloscope.tsx#L13

number

# host

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

OscilloscopeElement

# loop

src/x-oscilloscope.tsx#L24

{

# start()

start()  =>

void

# stop()

stop()  =>

void

}

# onmounted

EventHandler<OscilloscopeElement, CustomEvent<any>>

# onunmounted

EventHandler<OscilloscopeElement, CustomEvent<any>>

# plotData  =  ...

src/x-oscilloscope.tsx#L21

Float32Array

# stabilizer  =  ...

src/x-oscilloscope.tsx#L22

Stabilizer

# width  =  150

src/x-oscilloscope.tsx#L12

number

# created(ctx)

# ctx

Context<OscilloscopeElement & JsxContext<OscilloscopeElement> & 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-oscilloscope.tsx#L41

# $

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

# start() – Start displaying the spectrum.

src/x-oscilloscope.tsx#L31

start()  =>

void

# stop() – Stop displaying the spectrum.

src/x-oscilloscope.tsx#L37

stop()  =>

void

# toJSON()

toJSON()  =>

Pick<OscilloscopeElement, keyof OscilloscopeElement>

Credits

• sigl by stagas – Web framework
• x-plot by stagas – A Web Component that plots zoomable and pannable waveforms.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas