Guided: Build a Drum Machine with Vue

1. Use the v-for directive to loop over trackList.
2. Bind each track's name to the key attribute to ensure uniqueness.
3. Assign the class track to each generated div.

In Vue, the v-for directive allows you to iterate over items in an array and render a block of code for each item.

<div v-for="track in trackList" :key="track.name" class="track">
</div>

1. Inside the div from the previous task, use the {{ }} syntax to bind and display the track's name.
2. Use JavaScript string methods to capitalize the first letter of the name.
3. Follow the name with a colon.

You can capitalize the first character of a string and add the rest of the string using string manipulation methods like charAt() and slice().

<span>{{ track.name.charAt(0).toUpperCase() + track.name.slice(1) }}:</span>

1. Inside the main track div, use another v-for to loop over track.pattern.
2. Bind the index of each beat to the key attribute.
3. Conditionally assign the active class if the beat equals 'x' using the object-syntax for class bindings.

Vue allows nested loops using v-for. For conditional class bindings, Vue's class binding syntax { 'class-name': condition } can be useful.

<div v-for="(beat, index) in track.pattern" 
     :key="index"
     :class="['step', { 'active': beat === 'x' }]"
     @click="toggleStep(track.name, index)">
</div>

1. Use the v-model directive to bind the BPM value.
2. Specify the input type as number.
3. Assign an ID to the input for possible further referencing.

v-model in Vue provides two-way data binding on an input form control.

<input v-model="bpm" type="number" id="bpmInput" />

1. Create two button elements.
2. Assign click events using the @click directive to call startDrumMachine and stopDrumMachine methods respectively.

In Vue, the @click directive is a shorthand for v-on:click, which is used to listen to DOM events and execute some JavaScript when they're triggered.

<button @click="startDrumMachine">Start</button>
<button @click="stopDrumMachine">Stop</button>

1. Declare a data function that returns an object.
2. Initialize drumInterval to null. This will store the interval reference for the drum machine.
3. Set up a trackList array that contains objects with information on each drum track.
4. Initialize bpm (Beats Per Minute) to 120.

In a Vue component, the data function returns an object that holds the initial values for the properties.

data() {
  return {
    drumInterval: null,
    trackList: [
      { name: 'kick', pattern: 'x-------x-------', sample: new Audio('/kick.wav') },
      { name: 'snare', pattern: '----x-------x---', sample: new Audio('/snare.wav') },
      { name: 'hihat', pattern: 'x-x-x-x-x-x-x-x-', sample: new Audio('/hihat.wav') }
    ],
    bpm: 120
  };
}

1. Declare a toggleStep method that accepts trackName and index as parameters.
2. Find the specified track in trackList.
3. Modify the track's pattern at the specified index.

Use the find method on arrays to locate the desired track based on its name.

toggleStep(trackName, index) {
  let track = this.trackList.find(t => t.name === trackName);
  let pattern = track.pattern;
  let active = pattern[index] === 'x' ? '-' : 'x';
  track.pattern = `${pattern.slice(0, index)}${active}${pattern.slice(index + 1)}`;
}

1. First, stop any running drum machine using the stopDrumMachine method.
2. Calculate the time between each drum beat using the bpm.
3. Use setInterval to loop through each drum track and play the associated sample if its pattern has an 'x' at the current step.
4. Update the step counter and loop it back to the start when it reaches the end.

Remember to use this to refer to the component's data and methods within the methods.

startDrumMachine() {
  this.stopDrumMachine();

  const step_time = 60000 / this.bpm;

  let step = 0;
  this.drumInterval = setInterval(() => {
    this.trackList.forEach(track => {
      if (track.pattern[step] === 'x') {
        track.sample.currentTime = 0;
        track.sample.play();
      }
    });
    step = (step + 1) % this.trackList[0].pattern.length;
  }, step_time);
}

1. Check if drumInterval is not null.
2. Use clearInterval to stop the currently running drum machine.
3. Reset drumInterval to null.

clearInterval is a built-in JavaScript function that stops an interval started by setInterval.

stopDrumMachine() {
  if (this.drumInterval) {
    clearInterval(this.drumInterval);
    this.drumInterval = null;
  }
}