README
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 just fork this repository 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.