lobby config integration + new audio api

package.json

@@ -24,6 +24,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "angular-audio-context": "^32.0.7",
     "bootstrap": "^5.1.1",
     "chart.js": "^3.1.1",
     "jwt-decode": "^2.2.0",

src/app/core/store/lobby.store.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import {BehaviorSubject, Observable, ReplaySubject, Subject} from 'rxjs'
+import { BehaviorSubject, Observable } from 'rxjs'
 import { Lobby } from '../../shared/models/lobby'
 import { LobbyUser } from '../../shared/models/lobby-user'
 import { AuthService } from '../services/auth.service'
@@ -12,13 +12,13 @@ export class LobbyStore {
   private usersBehaviorSubject = new BehaviorSubject<LobbyUser[] | null>(null)
   private meBehaviorSubject = new BehaviorSubject<LobbyUser>(null)
   private lobbyBehaviorSubject = new BehaviorSubject<Lobby | null>(null)
-  private currentLobbyMusicIdBehaviorSubject = new BehaviorSubject<string | null>(null)
+  private currentLobbyMusicIdBehaviorSubject = new BehaviorSubject<ArrayBuffer | null>(null)
   private currentLobbyMusicAnswerBehaviorSubject = new BehaviorSubject<string | null>(null)
 
   public readonly lobby: Observable<Lobby | null> = this.lobbyBehaviorSubject.asObservable()
   public readonly users: Observable<LobbyUser[] | null> = this.usersBehaviorSubject.asObservable()
   public readonly me: Observable<LobbyUser | null> = this.meBehaviorSubject.asObservable()
-  public readonly currentLobbyMusicId: Observable<string | null> =
+  public readonly currentLobbyMusicId: Observable<ArrayBuffer | null> =
     this.currentLobbyMusicIdBehaviorSubject.asObservable()
   public readonly currentLobbyMusicAnswer: Observable<string | null> =
     this.currentLobbyMusicAnswerBehaviorSubject.asObservable()
@@ -56,11 +56,11 @@ export class LobbyStore {
     }
   }
 
-  getCurrentLobbyMusicId(): string | null {
+  getCurrentLobbyMusicId(): ArrayBuffer | null {
     return this.currentLobbyMusicIdBehaviorSubject.getValue()
   }
 
-  setCurrentLobbyMusicId(lobbyMusicId: string | null): void {
+  setCurrentLobbyMusicId(lobbyMusicId: ArrayBuffer | null): void {
     this.currentLobbyMusicIdBehaviorSubject.next(lobbyMusicId)
   }
 

src/app/modules/lobby/components/audio-player/audio-player.component.html

@@ -1 +1,8 @@
-<mat-slider aria-label="unit(s)" [(ngModel)]="audio.volume" [min]="0" [max]="1" [step]="0.01"></mat-slider>
+<mat-slider
+  aria-label="unit(s)"
+  [value]="gainNode.gain.value"
+  (input)="updateVolume($event)"
+  [min]="0"
+  [max]="1"
+  [step]="0.001"
+></mat-slider>

src/app/modules/lobby/components/audio-player/audio-player.component.ts

@@ -4,6 +4,10 @@ import { LobbyStore } from '../../../../core/store/lobby.store'
 import { LobbyMusicHttpService } from '../../../../core/http/lobby-music.http.service'
 import { CustomSocket } from '../../../../core/socket/custom.socket'
 import { Subscription } from 'rxjs'
+import { IGainNode } from 'standardized-audio-context/src/interfaces/gain-node'
+import { AudioContext, IAudioContext } from 'angular-audio-context'
+import { MatSliderChange } from '@angular/material/slider'
+import { IAudioBufferSourceNode } from 'standardized-audio-context/src/interfaces/audio-buffer-source-node'
 
 @Component({
   selector: 'app-lobby-audio-player',
@@ -13,46 +17,49 @@ export class AudioPlayerComponent implements OnInit, OnDestroy {
   audio?: HTMLAudioElement
   lobby: Lobby
   subscriptions: Subscription[] = []
+  gainNode: IGainNode<any>
+  source: IAudioBufferSourceNode<IAudioContext>
 
   constructor(
     private lobbyStore: LobbyStore,
     private lobbyMusicHttpService: LobbyMusicHttpService,
-    private socket: CustomSocket
+    private socket: CustomSocket,
+    private audioContext: AudioContext
   ) {}
 
   ngOnInit(): void {
-    this.audio = new Audio()
-    this.audio.volume = 0.5
+    this.gainNode = this.audioContext.createGain()
+    this.gainNode.gain.value = 0.5
+    this.gainNode.connect(this.audioContext.destination)
     this.subscriptions = [
-      this.lobbyStore.currentLobbyMusicId.subscribe((lobbyMusicId) => {
+      this.lobbyStore.currentLobbyMusicId.subscribe(async (lobbyMusicId) => {
         if (lobbyMusicId !== null) {
-          this.lobbyMusicHttpService.get(lobbyMusicId).subscribe((res) => {
-            const reader = new FileReader()
-            reader.onload = (e): void => {
-              const srcUrl = e.target.result
-              if (typeof srcUrl === 'string') {
-                this.audio.src = srcUrl
-                void this.audio.play()
-              }
-            }
-            reader.readAsDataURL(res)
-          })
+          await this.audioContext.resume()
+          const buffer = await this.audioContext.decodeAudioData(lobbyMusicId)
+          this.source = this.audioContext.createBufferSource()
+
+          this.source.buffer = buffer
+          this.source.connect(this.gainNode)
+          this.source.start()
         } else {
-          this.audio.pause()
+          this.source?.stop()
         }
       }),
       this.lobbyStore.lobby.subscribe((lobby) => {
         if (lobby && lobby.status !== LobbyStatuses.PlayingMusic) {
-          this.audio.pause()
+          this.source?.stop()
         }
       }),
     ]
   }
 
   ngOnDestroy(): void {
-    this.audio.pause()
-    this.audio = undefined
+    this.source?.stop()
+    void this.audioContext.suspend()
     this.subscriptions.forEach((sb) => sb.unsubscribe())
-    console.log('yoo')
+  }
+
+  updateVolume($event: MatSliderChange) {
+    this.gainNode.gain.value = $event.value
   }
 }