https://github.com/teropa/oscilloscope

A Web Audio oscilloscope
https://github.com/teropa/oscilloscope

Last synced: 4 months ago
JSON representation

A Web Audio oscilloscope

• Host: GitHub
• URL: https://github.com/teropa/oscilloscope
• Owner: teropa
• Created: 2020-05-27T06:09:45.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-08-12T12:22:28.000Z (over 3 years ago)
• Last Synced: 2024-10-26T00:12:27.719Z (4 months ago)
• Language: TypeScript
• Size: 11.7 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Web Audio Oscilloscope

Visualises the waveform of any Web Audio node. Uses simple edge triggering to stabilise the waveform.

## Install

```

npm install @teropa/oscilloscope

```

ES Modules, CommonJS modules, and an UMD build are all provided.

## Usage

Create an oscilloscope and attach it to an existing `` element, then connect it to an AudioNode and start visualising:

```js

import { Oscilloscope } from "@teropa/oscilloscope";

let oscilloscope = new Oscilloscope(myCanvasElement, audioContext, {

  fftSize: 4096,

});

oscilloscope.connect(myAudioNode);

oscilloscope.start();

```

The canvas visualisatioon will be sized according to the natural (CSS-based) size of the canvas.

The third argument to the constructor supports the following options:

- `fftSize` - number - the FFT size of the backing AnalyserNode. This affects how large the visualised time window is.

- `edgeThreshold` - number - the threshold that will [trigger](https://www.picotech.com/library/oscilloscopes/advanced-digital-triggers) the oscilloscope's rendering

- `edgeTrigger` - `rising` or `falling` - whether the edge triggering occurs when the signal rises above, or drops below, the edge threshold.

- `backgroundColor` - string - the (CSS) color to use for the visualisation background

- `lineColor` - string - the (CSS) color to use for the signal line

- `lineWidth` - number - how thick to draw the signal line