play track sample on click wip

Babali42 · Jan 10, 2025 · e0a8eca · e0a8eca
1 parent 66e6fc6
commit e0a8eca
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/frontend/src/app/components/sequencer/sequencer.component.html b/frontend/src/app/components/sequencer/sequencer.component.html
@@ -28,7 +28,12 @@
       </div>
   </div>
   <div class="tracks-name">
-    <h3 *ngFor="let track of beat.tracks" class="track-name">{{ track.name }}</h3>
+    <div *ngFor="let track of beat.tracks" class="flex">
+      <h3 class="track-name">
+        {{ track.name }}
+      </h3>
+      <button style="height: fit-content" (click)="playTrack(track.name)">play</button>
+    </div>
   </div>
   <section class="tracks-container">
     <article *ngFor="let track of beat.tracks">

diff --git a/frontend/src/app/components/sequencer/sequencer.component.ts b/frontend/src/app/components/sequencer/sequencer.component.ts
@@ -112,5 +112,9 @@ export class SequencerComponent implements OnInit {
     const beatToSelect = this.genres.find(x => x.label === this.selectedGenreLabel)?.beats.find(x => x.label === $event);
     this.selectBeat(beatToSelect);
   }
+
+  playTrack(trackName: string) {
+    this.soundService.playTrack(trackName);
+  }
 }
 
diff --git a/frontend/src/app/services/sound/sound.service.ts b/frontend/src/app/services/sound/sound.service.ts
@@ -135,4 +135,12 @@ export class SoundService {
       return;
     this.playSound(this.loopBuffer);
   }
+
+  playTrack(trackName: string) {
+    const source = this.context.createBufferSource();
+    const fileName = this.tracks.find(x => x.name == trackName)?.fileName;
+    source.buffer = this.samples.find(x => x.fileName === fileName)!.sample!;
+    source.connect(this.context.destination);
+    source.start();
+  }
 }