fixed sound clipping and overlapping

Author: paynejacob

web/speakerbob/package.json

@@ -69,7 +69,8 @@
     "rules": {
       "@typescript-eslint/no-explicit-any": 0,
       "no-case-declarations": 0,
-      "@typescript-eslint/no-unused-vars": 0
+      "@typescript-eslint/no-unused-vars": 0,
+      "@typescript-eslint/no-non-null-assertion": 0
     }
   },
   "browserslist": [

web/speakerbob/src/main.ts

@@ -21,9 +21,9 @@ const router = new VueRouter({
 })
 
 const wsConnection = new WSConnection()
-const player = new Player()
 const api = new API(router)
 const auth = new Auth(router)
+const player = new Player(api.api)
 const workbox = new Workbox()
 
 router.beforeEach(wsConnection.NavigationGuard)

web/speakerbob/src/plugins/api.ts

@@ -1,19 +1,18 @@
 import { Vue as _Vue } from 'vue/types/vue'
-import axios from 'axios'
+import axios, { AxiosInstance } from 'axios'
 import VueRouter from 'vue-router'
 export class APIOptions {}
 
 export default class API {
   private router!: VueRouter
+  public readonly api!: AxiosInstance
 
   constructor (router: VueRouter) {
     this.router = router
 
     this.validateStatus = this.validateStatus.bind(this)
-  }
 
-  public install (Vue: typeof _Vue, _options?: APIOptions) {
-    Vue.prototype.$api = axios.create({
+    this.api = axios.create({
       baseURL: '/api/',
       validateStatus: this.validateStatus,
       withCredentials: true,
@@ -23,6 +22,10 @@ export default class API {
     })
   }
 
+  public install (Vue: typeof _Vue, _options?: APIOptions) {
+    Vue.prototype.$api = this.api
+  }
+
   private validateStatus (status: number): boolean {
     // any 2xx response is valid
     if (status >= 200 && status <= 299) {

web/speakerbob/src/plugins/player.ts

@@ -1,65 +1,86 @@
 import { Sound } from '@/definitions/sound'
 import { Vue as _Vue } from 'vue/types/vue'
 import { WebsocketOptions } from '@/plugins/websocket'
+import { AxiosInstance, AxiosResponse } from 'axios'
+
+class AsyncBlockingQueue {
+  private promises: Promise<Sound>[] = [];
+  private resolvers: ((t: Sound) => void)[] = [];
+
+  private add () {
+    this.promises.push(new Promise(resolve => {
+      this.resolvers.push(resolve)
+    }))
+  }
+
+  public enqueue (sound: Sound) {
+    if (!this.resolvers.length) this.add()
+    const resolve = this.resolvers.shift()!
+    resolve(sound)
+  }
+
+  public dequeue (): Promise<Sound> {
+    if (!this.promises.length) this.add()
+    return this.promises.shift()!
+  }
+
+  public isEmpty (): boolean {
+    return !this.promises.length
+  }
+}
 
 export default class Player {
   private enabled = false
-  private audio!: HTMLAudioElement;
-  private queue: Sound[] = [];
-  private isPlaying = false;
+  private isPlaying = false
+  private queue: AsyncBlockingQueue = new AsyncBlockingQueue()
 
-  public constructor () {
+  private ctx!: AudioContext
+  private api!: AxiosInstance
+
+  public constructor (api: AxiosInstance) {
     this.install = this.install.bind(this)
     this.OnPlayMessage = this.OnPlayMessage.bind(this)
     this.EnableSound = this.EnableSound.bind(this)
     this.playNextSound = this.playNextSound.bind(this)
 
-    this.audio = new Audio()
+    this.api = api
   }
 
   public install (Vue: typeof _Vue, _options?: WebsocketOptions) {
     Vue.prototype.$player = this
   }
 
-  public async OnPlayMessage (sound: any) {
+  public async OnPlayMessage (message: any) {
     if (!this.enabled) {
       return
     }
 
-    this.queue.push(sound.sound)
+    // add this sound to the queue
+    this.queue.enqueue(message.sound)
 
-    await this.playNextSound()
+    if (!this.isPlaying) {
+      await this.playNextSound()
+    }
   }
 
   public async EnableSound () {
-    this.audio.src = ''
-
-    try {
-      await this.audio.play()
-    } catch {}
+    this.ctx = this.ctx = new window.AudioContext()
 
     this.enabled = true
   }
 
   private async playNextSound () {
-    if (this.isPlaying) {
-      return
-    }
+    this.isPlaying = true
 
-    while (true) {
-      const sound = this.queue.pop()
+    const sound = await this.queue.dequeue()
 
-      if (sound === undefined) {
-        return
-      }
+    const resp: AxiosResponse = await this.api.get(`/sound/sounds/${sound.id}/download/`, { responseType: 'arraybuffer' })
 
-      this.audio.src = `/api/sound/sounds/${sound.id}/download/`
-
-      this.isPlaying = true
-
-      await this.audio.play()
-
-      this.isPlaying = false
-    }
+    const buf = await this.ctx.decodeAudioData(resp.data)
+    const source = this.ctx.createBufferSource()
+    source.buffer = buf
+    source.connect(this.ctx.destination)
+    source.start()
+    source.onended = this.playNextSound
   }
 }