https://github.com/mathiasvr/audio-oscilloscope

:musical_note: Waveform audio visualizer for the HTML5 canvas.
https://github.com/mathiasvr/audio-oscilloscope

audio-visualizer html5-canvas oscilloscope waveform

Last synced: 4 months ago
JSON representation

:musical_note: Waveform audio visualizer for the HTML5 canvas.

• Host: GitHub
• URL: https://github.com/mathiasvr/audio-oscilloscope
• Owner: mathiasvr
• License: mit
• Created: 2015-03-16T22:44:54.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:34:06.000Z (almost 3 years ago)
• Last Synced: 2025-05-11T08:17:57.655Z (6 months ago)
• Topics: audio-visualizer, html5-canvas, oscilloscope, waveform
• Language: JavaScript
• Homepage:
• Size: 1.55 MB
• Stars: 94
• Watchers: 6
• Forks: 13
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-javascript-audio - audio-oscilloscope - waveform vizualiser for HTML5 Canvas (UI components and libraries / Visual waveform generators)

README

          
# oscilloscope

[![npm](https://img.shields.io/npm/v/oscilloscope.svg)](https://npm.im/oscilloscope)

![downloads](https://img.shields.io/npm/dt/oscilloscope.svg)

![dependencies](https://img.shields.io/:dependencies-none-green.svg)

[![license](https://img.shields.io/:license-MIT-blue.svg)](https://mvr.mit-license.org)

Waveform audio visualizer for the HTML5 canvas.

![wave](wave.gif)

## install

Import the module and bundle it for the browser with your favorite module bundler,

```

$ npm install oscilloscope

```

or include it directly in your HTML:

```html

```

## example

```javascript

var Oscilloscope = require('oscilloscope')

var audioContext = new window.AudioContext()

// create source from html5 audio element

var source = audioContext.createMediaElementSource(audioElement)

// attach oscilloscope

var scope = new Oscilloscope(source)

// start default animation loop

scope.animate(canvas.getContext("2d"))

```

See the [examples](examples) folder for more details on how to customize the animation.

## usage

### `scope = new Oscilloscope(source [, { fftSize: 2048 }])`

Supply an [AudioNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) as `source`.

Optionally set the `fftSize` property of the internal [AnalyzerNode](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize).

This can be used to adjust the smoothness or resolution of the animated oscilloscope.

For more control supply an AnalyzerNode as `source`.

#### `scope.draw(context [, x, y, width, height])`

Draw oscilloscope to a canvas `context`, and optionally set position and dimensions.

#### `scope.animate(context [, x, y, width, height])`

Start a basic animation loop that redraws the oscilloscope using the `.draw()` method.

#### `scope.stop()`

Stop the animation loop started by the `.animate()` method.