/html5-pcm-visual

Audio Visualisation Web Component

Primary LanguageTypeScript

pcm-visual

An aid to visualising PCM wave files in Chromium browsers, and perhaps others.

Provides web components <pcm-realtime> and <pcm-onload>.

Installation

git chekout ... npm install

Use

Set the element's dimensions and colour through CSS.

To start playback/visualisation, call the element's play method, because https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

See the eg directory for examples. Run the examples with npm start, build with npm run build.

pcm-onload attributes

  • uri (string) The only required parameter, the URI of the audio file to graph.

  • linewidth (number) Width of the graph's line

  • step (number) Graph PCM in steps

  • pauseorjump (pause | jump) Action when waveform is clicked - pause, or jump to the time cicked

  • playable (boolean) Can the waveform be clicked to play?

  • overlayclr (string) Any valid CSS colour (hex, rgb, etc). Overlaid when image played

  • overlaytype (bar | full) this.frequencyby = (this.getAttribute('frequencyby') && this.getAttribute('frequencyby').match(/max/i) ? 'max' : 'average') || this.frequencyby;

  • frequencyby (average | max) Calculate frequency colour by the average frequency in the FFT bin, or that with the greatest amplitude.

pcm-realtime options

  • uri (string) The only required parameter, the URI of the audio file to graph.

  • fftrSize (number) FFT bin size.

  • opacityStep

  • generationsToKeep

  • lineWidth

  • lineHeight

Web Assembly

A Rust-coded WASM can found somewhere in my GitHub repos.