PHPackages                             jaypan/web-audio-recorder.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. jaypan/web-audio-recorder.js

ActiveLibrary

jaypan/web-audio-recorder.js
============================

A wrapper for the higuman/web-audio-recorder-js Github library (https://github.com/higuma/web-audio-recorder-js) allowing installation through Composer.

0.1.2(7y ago)185MITJavaScript

Since Apr 28Pushed 7y ago1 watchersCompare

[ Source](https://github.com/jaypan/web-audio-recorder.js)[ Packagist](https://packagist.org/packages/jaypan/web-audio-recorder.js)[ RSS](/packages/jaypan-web-audio-recorderjs/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (3)Used By (0)

WebAudioRecorder.js
===================

[](#webaudiorecorderjs)

What is it?
-----------

[](#what-is-it)

WebAudioRecorder.js is a JavaScript library that records audio input (Web Audio API AudioNode object) and encodes to audio file image (Blob object). It supports three encoding formats.

- Waveform Audio (.wav)
- Ogg Vorbis (.ogg)
- MP3 (MPEG-1 Audio Layer III) (.mp3)

> This library uses following encoder libraries as lower layer.
>
> - WavAudioEncoder.js:
> - OggVorbisEncoder.js:
> - Mp3LameEncoder.js:

Demo
----

[](#demo)

Microphone recorder demo.

Library files
-------------

[](#library-files)

Library consists of one main script and several worker scripts.

`lib/` contains uncompressed library files.

- `WebAudioRecorder.js`: main script
- `WebAudioRecorderWav.js`: worker for Waveform Audio encoder
- `WebAudioRecorderOgg.js`: worker for Ogg Vorbis encoder
- `WebAudioRecorderMp3.js`: worker for MP3 encoder
- `WavAudioEncoder.min.js`: Waveform Audio encoder (from [WavAudioEncoder.js](https://github.com/higuma/wav-audio-encoder-js))
- `OggVorbisEncoder.min.js`: Ogg Vorbis encoder (from [OggVorbisEncoder.js](https://github.com/higuma/ogg-vorbis-encoder-js))
- `Mp3LameEncoder.min.js`: MP3 encoder (from [Mp3LameEncoder.js](https://github.com/higuma/mp3-lame-encoder-js))
- `OggVorbisEncoder.min.js.mem`: memory initializer for Ogg Vorbis encoder (must be located on the same directory)
- `Mp3LameEncoder.min.js.mem`: memory initializer for MP3 encoder (must be located on the same directory)

`lib-minified/` contains minified library files.

- `WebAudioRecorder.min.js`: main script (minified)
- `WebAudioRecorderWav.min.js`: worker for Waveform Audio (concatenated with encoder and recompressed)
- `WebAudioRecorderOgg.min.js`: worker for Ogg Vorbis (concatenated with encoder and recompressed)
- `WebAudioRecorderMp3.min.js`: worker for MP3 (concatenated with encoder and recompressed)
- `OggVorbisEncoder.min.js.mem`: memory initializer for Ogg Vorbis encoder (same file as above)
- `Mp3LameEncoder.min.js.mem`: memory initializer for MP3 encoder (same file as avove)

### Using library

[](#using-library)

Load main script from HTML first.

```

```

Worker files are loaded on creating an audio recorder object (or changing encoding by `setEncoding()`). You must set worker directory on object constructor (see API reference for detail).

```
audioRecorder = new WebAudioRecorder(sourceNode, {
  workerDir: "javascripts/"     // must end with slash
});
```

API
---

[](#api)

### Constructor

[](#constructor)

```
recorder = new WebAudioRecorder(sourceNode, configs)
```

Create an audio recorder object.

- Parameters
    - `sourceNode`: source input (AudioNode object)
    - `configs`: configuration object
        - `.workerDir`: worker files directory (default = `"/"`)
        - `.numChannels`: number of channels (default = `2` (stereo))
        - `.encoding`: encoding (default = `"wav"`, see `.setEncoding()` for detail)
        - `.options`: options (see `.setOptions()` for detail)
        - you can also set event handlers (see "Event handlers" for detail)
- Returns
    - audio recorder object

Every configuration property has a default value (typically you ought to set only `.workerDir` and `.encoding`). You can change encoding by `.setEncoding()` and options by `.setOptions()` after construction.

If you use MP3 encoding, you cannot change `.numChannels` from default (current MP3 encoder supports 2-channel stereo only).

> In fact, `configs` is just deep-copied into the recorder object itself.

### Methods

[](#methods)

```
recorder.setEncoding(encoding)
```

Change encoding after construction.

- Parameters
    - `.encoding`: encoding
        - `"wav"`: Waveform Audio (default)
        - `"ogg"`: Ogg Vorbis
        - `"mp3"`: MP3
- Returns
    - (none)

You can change encoding when recording is not running. If the method is called during recording, `.onError()` event is fired.

```
recorder.setOptions(options)
```

Set options.

- Parameters
    - `options`: options object
        - `.timeLimit`: recording time limit (second) (default = `300`)
        - `.encodeAfterRecord`: encoding process mode
            - `false`: process encoding on recording background (default)
            - `true`: process encoding after recording is finished
        - `.progressInterval`: encoding progress report interval (millisecond) (default = `1000`)
            - (used only if `.encodeAfterRecord` is `true`)
        - `.bufferSize`: recording buffer size (default = `undefined` (use browser default))
        - `.wav.mimeType`: Waveform Audio MIME type (default = `"audio/wav"`)
        - `.ogg.mimeType`: Ogg Vorbis MIME type (default = `"audio/ogg"`)
        - `.ogg.quality`: Ogg Vorbis quality (-0.1 .. 1) (default = `0.5`)
        - `.mp3.mimeType`: MP3 MIME type (default = `"audio/mpeg"`)
        - `.mp3.bitRate`: MP3 bit rate (typically 64 .. 320 for 44100Hz) (default = `160`)
- Returns
    - (none)

You can set options when recording is not running. If the method is called during recording, `.onError()` event is fired.

```
recorder.startRecording()
```

Start recording.

- Parameters
    - (none)
- Returns
    - (none)

If `.encoderAfterRecord` options is `false` (default), encoding process is performed on recording background.

If `.encoderAfterRecord` is `true`, audio data is just stored to worker's buffer. Encoding process is performed after recording is finished.

```
recorder.isRecording()
```

Return if recording is running.

- Parameters
    - (none)
- Returns
    - `false`: recording is not running
    - `true`: recording is running

```
recordingTime = recorder.recordingTime()
```

Report recording time.

- Parameters
    - (none)
- Returns
    - recording time (second) or `null` (not recording)

```
recorder.cancelRecording()
```

Cancel current recording without saving.

- Parameters
    - (none)
- Returns
    - (none)

```
recorder.finishRecording()
```

Finish current recording.

- Parameters
    - (none)
- Returns
    - (none)

If `.encoderAfterRecord` options is `false` (default), it finishes encoding and make a Blob object immediately. You get a Blob with `.onComplete()` event.

If `.encoderAfterRecord` is `true`, it starts encoding process. Encoding process may take several seconds to a few minutes (depending on recording time). You can get encoding progress with `onEncodingProgress()` event. Getting a Blob is same as above.

```
recorder.cancelEncoding()
```

Cancel encoding.

- Parameters
    - (none)
- Returns
    - (none)

This method is used when `.encoderAfterRecord` is `true` and worker is processing encoding after `.finishRecording()`. You can interrupt worker's encoding process and do cleanup.

> Internally, it calls `worker.terminate()` to kill worker process and makes another worker.

### Event handlers

[](#event-handlers)

Encoder worker's responses are processed by event handlers. Some other breakpoints are also provided as events. Events summary is as below (first parameter is always recorder object).

```
recorder.onEncoderLoading = function(recorder, encoding) { ... }
recorder.onEncoderLoaded = function(recorder, encoding) { ... }
recorder.onTimeout = function(recorder) { ... }
recorder.onEncodingProgress = function (recorder, progress) { ... }
recorder.onEncodingCanceled = function(recorder) { ... }
recorder.onComplete = function(recorder, blob) { ... }
recorder.onError = function(recorder, message) { ... }
```

You can set an event handler to object property.

```
recorder = new WebAudioRecorder(source, { workerDir: "javascripts/" });
recorder.onComplete = function(rec, blob) {
  // use Blob
};
```

You can also set event handlers from constructor parameter.

```
recorder = new WebAudioRecorder(source, {
  workerDir: "javascripts/",
  onEncoderLoading: function(recorder, encoding) {
    // show "loading encoder..." display
  },
  onEncoderLoaded: function(recorder, encoding) {
    // hide "loading encoder..." display
  }
});
```

### Event reference

[](#event-reference)

```
recorder.onEncoderLoading = function(recorder, encoding) { ... }
```

- Fired on
    - recorder is going to load an encoder worker (on construction or changing encoding)
- Parameters
    - `recorder`: audio recorder object
    - `encoding`: encoding
- Default handler
    - empty function

It is the only event to be fired during construction process. To catch the first event correctly, it should be set from constructor parameter (see above example).

```
recorder.onEncoderLoaded = function(recorder, encoding) { ... }
```

- Fired on
    - encoder worker has finished loading
- Parameters
    - `recorder`: audio recorder object
    - `encoding`: encoding
- Default handler
    - empty function

```
recorder.onTimeout = function(recorder) { ... }
```

- Fired on
    - recording time exceeds timeout limit
- Parameters
    - `recorder`: audio recorder object
- Default handler
    - call `recorder.finishRecording()`.

```
recorder.onEncodingProgress = function (recorder, progress) { ... }
```

- Fired on
    - worker reports encoding progress (when `.encodeAfterRecord` is `true`)
- Parameters
    - `recorder`: audio recorder object
    - `progress`: progress (from `0` to `1`)
- Default handler
    - empty function

```
recorder.onEncodingCanceled = function(recorder) { ... }
```

- Fired on
    - `.cancelRecording()` is called
- Parameters
    - `recorder`: audio recorder object
- Default handler
    - empty function

```
recorder.onComplete = function(recorder, blob) { ... }
```

- Fired on
    - worker completes encoding to Blob
- Parameters
    - `recorder`: audio recorder object
    - `blob`: Blob object
- Default handler
    - warn `"You must override onComplete event"` by `recorder.onError()`

This is the most important event. You must override to get the result.

```
recorder.onError = function(recorder, message) { ... }
```

- Fired on
    - error
- Parameters
    - `recorder`: audio recorder object
    - `message`: error message
- Default handler
    - show message by `console.log(message)`

License
-------

[](#license)

Ogg Vorbis encoder part of the library uses JavaScript-converted code of [libogg](https://xiph.org/ogg/) and [libvorbis](https://xiph.org/vorbis/). They are released under Xiph's BSD-like license. Ogg Vorbis encoder part of this library follows the same license (see link below).

MP3 encoder part of this library uses JavaScript-converted code of [LAME](http://lame.sourceforge.net/). LAME is licensed under the LGPL. MP3 encoder part of this library follows the same license (see link below).

All other parts are released under MIT license (see [LICENSE.txt](LICENSE.txt)).

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 77.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~2 days

Total

2

Last Release

2566d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/778c64c5549df014a65c23ebf5dc3bb300eb771ad4724080dfd9aac8b70c7db3?d=identicon)[Jaypan](/maintainers/Jaypan)

---

Top Contributors

[![higuma](https://avatars.githubusercontent.com/u/2908937?v=4)](https://github.com/higuma "higuma (7 commits)")[![jaypan](https://avatars.githubusercontent.com/u/463560?v=4)](https://github.com/jaypan "jaypan (2 commits)")

### Embed Badge

![Health badge](/badges/jaypan-web-audio-recorderjs/health.svg)

```
[![Health](https://phpackages.com/badges/jaypan-web-audio-recorderjs/health.svg)](https://phpackages.com/packages/jaypan-web-audio-recorderjs)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)