cache loopBuffer in sound service to shorten load time in play pause …

…(re)play event
Babali42 · Jan 4, 2025 · 6d7f4fb · 6d7f4fb
1 parent a57d9cf
commit 6d7f4fb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/frontend/src/app/services/sound/sound.service.spec.ts b/frontend/src/app/services/sound/sound.service.spec.ts
@@ -36,7 +36,9 @@ describe("sound", () => {
   });
 
   it("should call the soundGenerator once when play twice", async () => {
-    await soundService.playPause();
+    await soundService.playPause();//play
+    await soundService.playPause();//pause
+    await soundService.playPause();//play
     // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(soundGeneratorService.getRenderedBuffer).toHaveBeenCalledTimes(1);
   });

diff --git a/frontend/src/app/services/sound/sound.service.ts b/frontend/src/app/services/sound/sound.service.ts
@@ -18,6 +18,7 @@ export class SoundService {
   private playbackSource: AudioBufferSourceNode;
   private stepNumber: number = 16;
   private audioFilesService = new AudioFilesService();
+  private loopBuffer: AudioBuffer | null = null;
 
   constructor(
     private soundGeneratorService: SoundGeneratorService,
@@ -30,8 +31,15 @@ export class SoundService {
   async playPause(): Promise<void> {
     this.isPlaying = !this.isPlaying;
     if (this.isPlaying) {
-      const loopBuffer = await this.soundGeneratorService.getRenderedBuffer(this.tracks, this.samples, this.bpm, this.stepNumber);
-      this.playSound(loopBuffer);
+      if (!this.loopBuffer) {
+        this.loopBuffer = await this.soundGeneratorService.getRenderedBuffer(
+          this.tracks,
+          this.samples,
+          this.bpm,
+          this.stepNumber
+        );
+      }
+      this.playSound(this.loopBuffer);
     } else {
       this.pause();
     }