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(); + } }