angular-audio-context

angular-audio-context

An Angular wrapper for the Web Audio API's AudioContext.

Besides being a wrapper this module also patches the deprecated and prefixed versions of the AudioContext which are out there. It uses the standardized-audio-context to do so.

Usage

This module can be installed via npm like this:

npm install angular-audio-context

It provides an Angular Module that can be imported into your Angular app as usual.

import { AudioContextModule } from 'angular-audio-context';

@NgModule({
    imports: [AudioContextModule.forRoot('balanced')]
})
export class AppModule {}

The AudioContext can then be injected into your components and services.

import { Injectable } from '@angular/core';
import { AudioContext } from 'angular-audio-context';

@Injectable()
export class AnyService {
    constructor(private _audioContext: AudioContext) {}
}

In addition to the AudioContext, this module also provides a function called isSupported which returns a promise which either resolves to true or false depending on the currently used browser's Web Audio API support. An example usage might look like this:

import { Component, Inject } from '@angular/core';
import { isSupported } from 'angular-audio-context';

@Component({
    selector: 'any-component',
    template: '<span *ngIf="this.isSupported() | async">Yeah, your browser is supported.</span>'
})
export class AnyComponent {
    constructor(@Inject(isSupported) public isSupported) {}
}

In case you are missing a feature or found a bug please create a pull request or raise an issue. Thanks.

Example

The following component defintion shows how to implement a basic component which produces a beep each time the button inside the template gets clicked.

import { Component } from '@angular/core';
import { AudioContext } from 'angular-audio-context';

@Component({
    selector: 'my-beep',
    template: '<button (click)="beep()">beep</button>'
})
export class BeepComponent {
    constructor(private _audioContext: AudioContext) {}

    public async beep(): void {
        if (this._audioContext.state === 'suspended') {
            await this._audioContext.resume();
        }

        const oscillatorNode = this._audioContext.createOscillator();

        oscillatorNode.onended = () => oscillatorNode.disconnect();
        oscillatorNode.connect(this._audioContext.destination);

        oscillatorNode.start();
        oscillatorNode.stop(this._audioContext.currentTime + 0.5);
    }
}

Compatibility

Up to version 5 this module was compatible with Angular 1.

Alternatives

There is also module called ngWebAudio which tries to simplify the buffering and playback of a single audio file by utilizing the Web Audio API.

Acknowledgement

The naming of this module tries to align with the recommendations given in the Specification for reusable AngularJS components.