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.

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
    ]
})
export class AppModule { }

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

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

@Injectable()
export class AnyService {

    constructor(@Inject(AudioContext) private _audioContext) { }

}

In addition to the AudioContext, this module also provides a promise called isSupported 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 just fork this repository or raise an issue. Thanks.

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

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.

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