Similar to Angular change detection with HTMLAudioElement but its solution doesn't work for me.
In my angular application I want to play short wav files using web audio. While playing the play button shall become a stop button and after finishing the stop button shall become the play button again.
I made a simple audio service that fires an observable right after AudioBufferSourceNode.start(0) and also fires the observable in AudioBufferSourceNode.onended. I can see in the console that the event fires, but the UI doesn't change. I made a stackblitz demonstrating my problem https://stackblitz.com/edit/angular-x5ytjt - when actually using the audio api (checkbox set) the UI isn't updated, when only firing the observable (checkbox unset) the UI gets updated.
How can I achieve updating my UI in this case?
component:
@Component({
selector: 'hello',
template: `
<input type="checkbox" [(ngModel)]="playReal">Real playback (vs. fake-events)<br>
Currently {{playing?"playing":"stopped"}}
<button type="button" *ngIf="!playing" (click)="play()">play</button>
<button type="button" *ngIf="playing" (click)="stop()">stop</button>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
playing: boolean = false;
subscription: Subscription;
playReal: boolean = true;
constructor(public audio: AudioService, public dataSvc: DataService, private ref: ChangeDetectorRef) { }
ngOnInit() {
this.subscription = this.audio.playing$.subscribe(value => {
this.playing = value;
console.debug('observer has fired. new value: ', value);
// solution from https://stackoverflow.com/questions/54030943/angular-change-detection-with-htmlaudioelement
this.ref.markForCheck();
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
play() {
this.dataSvc.getAudio().subscribe(
data => {
if (this.playReal) {
// do real playback
this.audio.playBlob(data);
} else {
// only fake playing (tell the audio service to emit the event)
this.audio.hackSetPlaying(true);
}
}
)
}
stop() {
if (this.playReal) {
this.audio.stopPlay();
} else {
this.audio.hackSetPlaying(false);
}
}
}
audio service:
public playBlob( data: Blob ) {
// playBlob and play inspired by https://stackoverflow.com/questions/24151121/how-to-play-wav-audio-byte-array-via-javascript-html5
// create audio context if necessary
if (!this.audioCtx) {
this.audioCtx = new AudioContext();
}
// use file reader to convert blob to ArrayBuffer
let fr: FileReader = new FileReader();
fr.onload = () => {
// after loading decode and play the wav file
this.audioCtx.decodeAudioData(<ArrayBuffer>fr.result, (res) => {this.play(res);});
}
fr.readAsArrayBuffer(data);
}
private play(audioBuff: AudioBuffer) {
if (!this.audioSrc) {
this.audioSrc = this.audioCtx.createBufferSource();
}
this.audioSrc.buffer = audioBuff;
this.audioSrc.connect(this.audioCtx.destination);
this.audioSrc.start(0);
this.playing = true;
this.playingSubject.next(this.playing);
console.debug('audioService has set playing to true');
this.audioSrc.onended = () => {
this.playing = false;
this.playingSubject.next(this.playing);
console.debug('audioService set playing to false');
this.audioSrc = null; // audioSrc can only be used once
}
}
Edit: I just learned, that what I'm using aparently is called web audio api and not html5 audio. Corrected tags, title etc.
