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-contextIt 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.
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);
}
}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.
ng-web-apis/audio is a library which allows the Web Audio API to be used from within the templates.
The naming of this module tries to align with the recommendations given in the Specification for reusable AngularJS components.