<commit_before><div class="content">
  <h2>Drum Machine</h2>

  <p class="well">
    This is a really great example of how performant the Web Audio API is. Try
    turning the tempo up to something ridiculous like 1200. The audio artifacts
    ("glitches") that you're likely hearing are not caused by your pc/browser
    "not keeping up," but by an acoustic property called "phase cancellation"
    and it's happening because there is only a single sample for each drum.
  </p>

    {{#if isLoading}}
      <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
    {{else}}
      <div class="controls">
        <button class="btn btn-primary" {{action 'play'}}>PLAY</button>

        <div>
          <label>Tempo {{input value=bpm}}</label>
        </div>
      </div>

      <div class="beat-machine">
        {{#each beatTracks as |beatTrack|}}
          <div class="beat-lane">
            <p class="text">{{beatTrack.name}}</p>

            {{#each beatTrack.beats as |beat|}}
              <div class="beat-pad" {{action 'toggleActive' beat}}>
                <span class="pad {{if beat.active 'active'}} {{if beat.isPlaying 'playing'}} {{if beat.currentTimeIsPlaying 'highlighted'}}"></span>
              </div>
            {{/each}}
          </div>
        {{/each}}
      </div>
    {{/if}}
  </div>

  <div class="content">
    {{#code-block language='handlebars'}}
    \{{#if isLoading}}
      \{{!-- Some loading indicator... --}}
    \{{else}}
      &lt;div class="controls">
        &lt;button class="btn btn-primary" \{{action 'play'}}>PLAY&lt;/button>

        &lt;div>
          &lt;label>Tempo \{{input value=bpm}}&lt;/label>
        &lt;/div>
      &lt;/div>

      &lt;div class="beat-machine">
        \{{#each beatTracks as |beatTrack|}}
          &lt;div class="beat-lane">
            &lt;p class="text">\{{beatTrack.name}}&lt;/p>

            \{{#each beatTrack.beats as |beat|}}
              &lt;div class="beat-pad" \{{action 'toggleActive' beat}}>
                &lt;span class="pad \{{if beat.active 'active'}} \{{if beat.isPlaying 'playing'}} \{{if beat.currentTimeIsPlaying 'highlighted'}}">&lt;/span>
              &lt;/div>
            \{{/each}}
          &lt;/div>
        \{{/each}}
      &lt;/div>
    \{{/if}}
    {{/code-block}}

    {{#code-block language='javascript'}}
    export default Ember.Whatever.extend({
      audio: Ember.inject.service(),
      beatTracks: null,
      isLoading: true,
      bpm: 120,

      initBeats: Ember.on('init', function() {
        Ember.RSVP.all([
          this._loadBeatTrackFor('kick'),
          this._loadBeatTrackFor('snare'),
          this._loadBeatTrackFor('hihat')
        ])
        .then((beatTracks) => {
          // default is 4 beats, but we're going to use 8
          beatTracks.map((beatTrack) => beatTrack.set('numBeats', 8));
          this.set('isLoading', false);
          this.set('beatTracks', beatTracks);
        });
      }),

      _loadBeatTrackFor(name) {
        return this.get('audio').load(`${name}.wav`).asBeatTrack(name);
      },

      actions: {
        play() {
          this.get('beatTracks').map((beatTrack) => {
            // playActiveBeats() optionally accepts "noteType" which defaults to "1/4"
            // notes, but we want to use eighth notes
            beatTrack.playActiveBeats(this.get('bpm'), 1/8);

            // /* playActiveBeats() is a convenience method. For more control, you could do:
            // http://bradthemad.org/guitar/tempo_explanation.php */
            // const eighthNoteDuration = (240 * 1/8) / this.get('bpm');
            // beatTrack.get('beats').map((beat, beatIndex) => {
            //   /* whatever else you need to do */
            //   beat.ifActivePlayIn(beatIndex * eighthNoteDuration);
            // });
          });
        },

        toggleActive(beat) {
          if (beat.get('active')) {
            beat.set('active', false);
          } else {
            beat.play();
            beat.set('active', true);
          }
        }
      }
    });
    {{/code-block}}
</div><commit_msg>fix indentation on drum machine example<commit_after><div class="content">
  <h2>Drum Machine</h2>

  <p class="well">
    This is a really great example of how performant the Web Audio API is. Try
    turning the tempo up to something ridiculous like 1200. The audio artifacts
    ("glitches") that you're likely hearing are not caused by your pc/browser
    "not keeping up," but by an acoustic property called "phase cancellation"
    and it's happening because there is only a single sample for each drum.
  </p>

  {{#if isLoading}}
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  {{else}}
    <div class="controls">
      <button class="btn btn-primary" {{action 'play'}}>PLAY</button>

      <div>
        <label>Tempo {{input value=bpm}}</label>
      </div>
    </div>

    <div class="beat-machine">
      {{#each beatTracks as |beatTrack|}}
        <div class="beat-lane">
          <p class="text">{{beatTrack.name}}</p>

          {{#each beatTrack.beats as |beat|}}
            <div class="beat-pad" {{action 'toggleActive' beat}}>
              <span class="pad {{if beat.active 'active'}} {{if beat.isPlaying 'playing'}} {{if beat.currentTimeIsPlaying 'highlighted'}}"></span>
            </div>
          {{/each}}
        </div>
      {{/each}}
    </div>
  {{/if}}
</div>

<div class="content">
  {{#code-block language='handlebars'}}
  \{{#if isLoading}}
    \{{!-- Some loading indicator... --}}
  \{{else}}
    &lt;div class="controls">
      &lt;button class="btn btn-primary" \{{action 'play'}}>PLAY&lt;/button>

      &lt;div>
        &lt;label>Tempo \{{input value=bpm}}&lt;/label>
      &lt;/div>
    &lt;/div>

    &lt;div class="beat-machine">
      \{{#each beatTracks as |beatTrack|}}
        &lt;div class="beat-lane">
          &lt;p class="text">\{{beatTrack.name}}&lt;/p>

          \{{#each beatTrack.beats as |beat|}}
            &lt;div class="beat-pad" \{{action 'toggleActive' beat}}>
              &lt;span class="pad \{{if beat.active 'active'}} \{{if beat.isPlaying 'playing'}} \{{if beat.currentTimeIsPlaying 'highlighted'}}">&lt;/span>
            &lt;/div>
          \{{/each}}
        &lt;/div>
      \{{/each}}
    &lt;/div>
  \{{/if}}
  {{/code-block}}

  {{#code-block language='javascript'}}
  export default Ember.Whatever.extend({
    audio: Ember.inject.service(),
    beatTracks: null,
    isLoading: true,
    bpm: 120,

    initBeats: Ember.on('init', function() {
      Ember.RSVP.all([
        this._loadBeatTrackFor('kick'),
        this._loadBeatTrackFor('snare'),
        this._loadBeatTrackFor('hihat')
      ])
      .then((beatTracks) => {
        // default is 4 beats, but we're going to use 8
        beatTracks.map((beatTrack) => beatTrack.set('numBeats', 8));
        this.set('isLoading', false);
        this.set('beatTracks', beatTracks);
      });
    }),

    _loadBeatTrackFor(name) {
      return this.get('audio').load(`${name}.wav`).asBeatTrack(name);
    },

    actions: {
      play() {
        this.get('beatTracks').map((beatTrack) => {
          // playActiveBeats() optionally accepts "noteType" which defaults to "1/4"
          // notes, but we want to use eighth notes
          beatTrack.playActiveBeats(this.get('bpm'), 1/8);

          // /* playActiveBeats() is a convenience method. For more control, you could do:
          // http://bradthemad.org/guitar/tempo_explanation.php */
          // const eighthNoteDuration = (240 * 1/8) / this.get('bpm');
          // beatTrack.get('beats').map((beat, beatIndex) => {
          //   /* whatever else you need to do */
          //   beat.ifActivePlayIn(beatIndex * eighthNoteDuration);
          // });
        });
      },

      toggleActive(beat) {
        if (beat.get('active')) {
          beat.set('active', false);
        } else {
          beat.play();
          beat.set('active', true);
        }
      }
    }
  });
  {{/code-block}}
</div>
{'fraction_non_alphanumeric': 0.17871825876662636, 'fraction_numerical': 0.006287787182587666, 'mean_word_length': 2.1762672811059907, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 123, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2645219', 'n_tokens_mistral': 2684, 'n_tokens_neox': 2566, 'n_words': 594}