x-visualizer

Oscilloscope, spectrogram, spectrum, waveform audio visualizers.

npm i x-visualizer

pnpm add x-visualizer

yarn add x-visualizer

Examples

# web

# view source

example/web.tsx

/** @jsxImportSource sigl */
import $ from 'sigl'

import { VisualizerElement } from 'x-visualizer'

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

interface AppElement extends $.Element<AppElement> {}

@$.element()
class AppElement extends HTMLElement {
  input?: AudioNode
  Visualizer = $.element(VisualizerElement)
  visualizer?: VisualizerElement
  mounted($: AppElement['$']) {
    $.render(({ Visualizer, input }) => (
      <div
        onpointerdown={$.event.stop(function() {
          console.log('cycle')
          $.ref.visualizer?.current?.cycle()
        })}
      >
        <style>
          {/*css*/ `
          div {
            width: 300px;
            height: 150px;
          }
        `}
        </style>
        <Visualizer
          ref={$.ref.visualizer}
          input={input}
          kind="oscilloscope"
        />
      </div>
    ))
  }
}

const App = $.element(AppElement)

const fetchAudioBuffer = async (audio: AudioContext, url: string) => {
  const res = await fetch(url)
  const arrayBuffer = await res.arrayBuffer()
  const audioBuffer = await audio.decodeAudioData(arrayBuffer)
  return audioBuffer
}

let playing = false
let source: AudioBufferSourceNode
const toggle = async () => {
  window.onclick = null
  if (playing) {
    ctx.suspend()
    playing = false
    console.log('stopped')
    return
  }

  ctx.resume()
  playing = true
  if (source) return

  const audioBuffer = await fetchAudioBuffer(
    ctx,
    './example/alpha_molecule.ogg'
  )
  source = ctx.createBufferSource()
  source.buffer = audioBuffer
  source.loop = true
  source.connect(ctx.destination)
  source.start(0, 33)

  // for (let i = 0; i < 1; i++) {
  $.render(<App input={source} />, document.body)
  console.log('rendered')
  // }

  // const osc = ctx.createOscillator()
  // osc.frequency.value = 40
  // osc.type = 'sine'
  // osc.start()
  // osc.connect(analyser)

  // const noise = ctx.createScriptProcessor(512, 1, 1)
  // noise.onaudioprocess = e => {
  //   const output = e.outputBuffer.getChannelData(0)
  //   for (let i = 0; i < output.length; i++)
  //     output[i] = Math.random() * 2 - 1
  // }
  // noise.connect(analyser)

  // spectrogram.current!.analyser = analyser
  console.log('playing')
  // setTimeout(() => {
  //   analyser.fftSize = 16384 * 2
  //   waveform.current!.analyser = null
  //   waveform.current!.analyser = analyser
  // }, 1000)
}

// window.onclick = toggle
toggle()

API

# VisualizerElement

src/x-visualizer.tsx#L16

# constructor()

# new VisualizerElement()

VisualizerElement

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

src/x-visualizer.tsx#L68

false | AnalyserNode

# autoResize  =  true

src/x-visualizer.tsx#L31

boolean

# background  =  '#123'

src/x-visualizer.tsx#L32

string

# color  =  '#1ff'

src/x-visualizer.tsx#L33

string

# context

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

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

# cycle  =  ...

src/x-visualizer.tsx#L48

Fn<[ ], void>

# disabled  =  false

src/x-visualizer.tsx#L29

boolean

# 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

>

# height  =  50

src/x-visualizer.tsx#L34

number

# host

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

VisualizerElement

# input

src/x-visualizer.tsx#L67

null | AudioNode

# kind  =  ...

src/x-visualizer.tsx#L28

VisualizerKind

# onmounted

EventHandler<VisualizerElement, CustomEvent<any>>

# onunmounted

EventHandler<VisualizerElement, CustomEvent<any>>

# oscilloscope

src/x-visualizer.tsx#L43

OscilloscopeElement

# spectrogram

src/x-visualizer.tsx#L44

SpectrogramElement

# spectrum

src/x-visualizer.tsx#L45

SpectrumElement

# visualizer

src/x-visualizer.tsx#L38

OscilloscopeElement | SpectrogramElement | SpectrumElement | WaveformElement

# waveform

src/x-visualizer.tsx#L46

WaveformElement

# width  =  150

src/x-visualizer.tsx#L35

number

# visualizers  =  ...

src/x-visualizer.tsx#L17

{

# oscilloscope  =  ...

Component<OscilloscopeElement, HTMLElement>

# spectrogram  =  ...

Component<SpectrogramElement, HTMLElement>

# spectrum  =  ...

Component<SpectrumElement, HTMLElement>

# waveform  =  ...

Component<WaveformElement, HTMLElement>

}

# kinds

src/x-visualizer.tsx#L24

# created(ctx)

# ctx
Context<VisualizerElement & JsxContext<VisualizerElement> & 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-visualizer.tsx#L70

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

# toJSON()

toJSON()  =>

Pick<VisualizerElement, keyof VisualizerElement>

# VisualizerKind

src/x-visualizer.tsx#L11

"oscilloscope" | "spectrogram" | "spectrum" | "waveform"

Credits

• everyday-utils by stagas – Everyday utilities
• sigl by stagas – Web framework
• x-oscilloscope by stagas – Audio oscilloscope visualizer Web Component
• x-spectrogram by stagas – Audio spectrogram Web Component.
• x-spectrum by stagas – Audio spectrum analyser Web Component
• x-waveform by stagas – Audio waveform visualizer Web Component

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas