ajout ebm et prise en compte des 16 temps (#25)

Author: Babali42

src/app/components/sequencer/sequencer.component.ts

@@ -28,6 +28,7 @@ export class SequencerComponent implements OnInit {
         this.soundService.reset();
         this.soundService.setBpm(this.beat.bpm);
         this.soundService.setTracks(this.beat.tracks);
+        this.soundService.setStepNumber(this.beat.tracks[0].steps.length);
       });
     });
   }

src/app/components/sequencer/track/track.component.html

@@ -2,7 +2,8 @@
   <div class="track-name">
     <div>{{ this.name }}</div>
   </div>
-  <div id="track">
-    <div *ngFor="let step of steps; let i = index" class="step" [class.active]="step" [class.current]="i === this.currentStepIndex"></div>
+  <div id="track" [ngClass]="this.steps.length == 16 ? 'sixteen-steps' : 'thirty-two-steps'">
+    <div *ngFor="let step of steps; let i = index" class="step" [class.active]="step"
+         [class.current]="i === this.currentStepIndex"></div>
   </div>
 </div>

src/app/components/sequencer/track/track.component.scss

@@ -7,11 +7,18 @@
 
 #track {
   display: grid;
-  grid-template-columns: repeat(16, 1fr);
   grid-template-rows: repeat(1, 1fr);
   gap: 4px;
 }
 
+.sixteen-steps {
+  grid-template-columns: repeat(16, 1fr);
+}
+
+.thirty-two-steps {
+  grid-template-columns: repeat(32, 1fr);
+}
+
 .step {
   height: 40px;
   width: 40px;

src/app/services/sound.service.ts

@@ -13,6 +13,7 @@ export class SoundService {
   private context: AudioContext;
   private tracks: Track[] = [];
   private playbackSource: AudioBufferSourceNode;
+  private stepNumber: number = 16;
 
   constructor() {
     this.context = new AudioContext();
@@ -46,7 +47,7 @@ export class SoundService {
 
     const updateDisplay = () => {
       const currentTime = this.context.currentTime - startTime;
-      this.index = Math.trunc(((currentTime * 1000) / this.getMillisStepFromBpm()) % 16);
+      this.index = Math.trunc(((currentTime * 1000) / this.getMillisStepFromBpm()) % this.stepNumber);
       if (this.isPlaying)
         requestAnimationFrame(updateDisplay);
     };
@@ -72,7 +73,7 @@ export class SoundService {
   //Used to avoid sound clip ;)
   async getRenderedBuffer() {
     const tickLength = this.getTickLength();
-    const offlineContext: OfflineAudioContext = new OfflineAudioContext(1, 16 * 2 * tickLength * 44100, 44100);
+    const offlineContext: OfflineAudioContext = new OfflineAudioContext(1, this.stepNumber * 2 * tickLength * 44100, 44100);
     this.tracks.forEach((track: Track) => {
       const trackSteps = this.getDuplicatedTrackSteps(track);
       trackSteps.forEach((beat: boolean, i: number) => {
@@ -140,4 +141,8 @@ export class SoundService {
   private getTickLength() {
     return 60 / this.bpm / 4;
   };
+
+  setStepNumber(length: number) {
+    this.stepNumber = length;
+  }
 }

src/assets/beats/ebm.json

@@ -0,0 +1,31 @@
+{
+  "name": "ebm",
+  "bpm": 120,
+  "tracks": [
+    {
+      "name": "Clap",
+      "fileName": "ebm/clap.wav",
+      "steps": [" ", " ", "X", " ", "X", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", "X", " ", " ", "X", "X", "X", "X", " ", " ", " ", "X", " ", "X", " ", " ", "X", " "]
+    },
+    {
+      "name": "Open High-Hat",
+      "fileName": "ebm/open-hihat.wav",
+      "steps": [" ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " "]
+    },
+    {
+      "name": "Closed High-Hat",
+      "fileName": "ebm/closed-hihat.wav",
+      "steps": ["X", "X", " ", " ", "X", "X", " ", " ", "X", "X", " ", " ", "X", "X", " ", " ", "X", "X", " ", " ", "X", "X", " ", " ", "X", "X", " ", " ", "X", "X", " ", " "]
+    },
+    {
+      "name": "Snare",
+      "fileName": "ebm/snare.wav",
+      "steps": [" ", " ", " ", " ", "X", " ", " ", " ", " ", " ", " ", " ", "X", " ", " ", " ", " ", " ", " ", " ", "X", " ", " ", " ", " ", " ", " ", " ", "X", " ", "X", "X"]
+    },
+    {
+      "name": "Kick",
+      "fileName": "ebm/kick.wav",
+      "steps": ["X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " ", "X", " ", " ", " "]
+    }
+  ]
+}

src/assets/genres.json

@@ -50,5 +50,14 @@
         "fileName": "psytrance"
       }
     ]
+  },
+  {
+    "label": "Indus",
+    "subGenres" : [
+      {
+        "label": "EBM",
+        "fileName": "ebm"
+      }
+    ]
   }
 ]