diff --git a/frontend/src/app/components/sequencer/sequencer.component.html b/frontend/src/app/components/sequencer/sequencer.component.html
index 3f290bc..f53a179 100644
--- a/frontend/src/app/components/sequencer/sequencer.component.html
+++ b/frontend/src/app/components/sequencer/sequencer.component.html
@@ -28,7 +28,12 @@
-
{{ track.name }}
+
+
+ {{ track.name }}
+
+
+
diff --git a/frontend/src/app/components/sequencer/sequencer.component.ts b/frontend/src/app/components/sequencer/sequencer.component.ts
index 3deed8b..3e5661b 100644
--- 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
index b7b9a28..c1648b6 100644
--- 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();
+ }
}