https://github.com/skylerlee/wavebell

:bell: Catch realtime audio wave from microphone with JavaScript!
https://github.com/skylerlee/wavebell

audio javascript microphone oscilloscope visualization waveform webaudio-api webtechnology

Last synced: 3 months ago
JSON representation

:bell: Catch realtime audio wave from microphone with JavaScript!

• Host: GitHub
• URL: https://github.com/skylerlee/wavebell
• Owner: skylerlee
• License: mit
• Created: 2017-11-05T12:47:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-03-14T16:30:29.000Z (about 5 years ago)
• Last Synced: 2025-10-06T11:30:59.751Z (7 months ago)
• Topics: audio, javascript, microphone, oscilloscope, visualization, waveform, webaudio-api, webtechnology
• Language: JavaScript
• Homepage:
• Size: 230 KB
• Stars: 51
• Watchers: 3
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-audio-visualization - wavebell - A javascript voice recorder with realtime waveform, using web microphone (Libraries Visualization)

README

          
# wavebell

[![Build Status](https://travis-ci.org/skylerlee/wavebell.svg?branch=master)](https://travis-ci.org/skylerlee/wavebell)

[![Coverage Status](https://coveralls.io/repos/github/skylerlee/wavebell/badge.svg?branch=master)](https://coveralls.io/github/skylerlee/wavebell)

[![npm](https://img.shields.io/npm/v/wavebell.svg)](https://www.npmjs.com/package/wavebell)

Catch realtime audio wave from microphone with JavaScript!

## Screenshot

![wavebell](https://user-images.githubusercontent.com/6789491/33554578-3d9067de-d938-11e7-8946-4dd6870d4495.gif)

![waveform](https://user-images.githubusercontent.com/6789491/33908149-63942ce6-dfc2-11e7-94ca-a2023943a9ab.gif)

## Installation

```bash

# Install with npm

npm install --save wavebell

# Install with yarn

yarn add wavebell

```

## Example

```javascript

var bell = new WaveBell();

bell.on('wave', function (e) {

  // draw oscilloscope

  drawColumn(e.value);

});

bell.on('stop', function () {

  var blob = bell.result;

  // play recorded audio

  playback(URL.createObjectURL(blob));

});

// 25 frames per second

bell.start(1000 / 25);

```

## Notice

In Chrome 47 or above, `getUserMedia` requires HTTPS to work.

So it'd be better to setup SSL for your server.

## Thanks

* **Mozilla web docs** [visualizations with web audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)

* **Jos Dirksen** for his [great blog post about audio visualization](http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound)

## License

The MIT License.