Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stagas/x-spectrogram

Audio spectrogram Web Component.
https://github.com/stagas/x-spectrogram

audio dsp spectrogram ui web-component webaudio

Last synced: 3 months ago
JSON representation

Audio spectrogram Web Component.

Host: GitHub
URL: https://github.com/stagas/x-spectrogram
Owner: stagas
License: mit
Created: 2022-03-26T23:54:13.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-08-01T14:23:36.000Z (over 2 years ago)
Last Synced: 2024-09-16T05:27:38.770Z (4 months ago)
Topics: audio, dsp, spectrogram, ui, web-component, webaudio
Language: TypeScript
Homepage:
Size: 5.69 MB
Stars: 4
Watchers: 2
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


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  

```ts

import { fetchAudioBuffer } from 'webaudio-tools'

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

customElements.define('x-spectrogram', SpectrogramElement)

document.body.innerHTML = `





  



`

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](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework

- [webaudio-tools](https://npmjs.org/package/webaudio-tools) by [stagas](https://github.com/stagas) – Useful tools for WebAudio.

## Contributing

[Fork](https://github.com/stagas/x-spectrogram/fork) or [edit](https://github.dev/stagas/x-spectrogram) and submit a PR.

All contributions are welcome!

## License

MIT © 2022 [stagas](https://github.com/stagas)