Random Commander

index.html

<div ng-app="RandomCommander">

  <div ng-controller="RandomCommanderCtrl as main">
    <div ng-if="browser.firefox || browser.ie">
      <h1 class="masthead">Random Commander uses Web Oscillators which<br> are only supported well enough in Chrome and Safari.</h1>
    </div>

    <div ng-if="!browser.firefox && !browser.ie">

      <h1 class="masthead">Random Commander<br>
        <small>Full Editable Version at <a href="http://jakealbaugh.github.io/random_commander/" target="blank">jakealbaugh.github.io/random_commander/</a></small>
      </h1>

      <div class="triggers-wrapper">
        <div class="container">
          <div class="triggers">
            <div class="triggers-left">
              <button ng-click="togglePerformance()" class="button-play-stop" ng-class="{stop: playing, play: !playing}">Performance</button>
              <button ng-click="generatePerformance()" class="button-randomize">Randomize</button>
            </div>
            <div class="triggers-right" ng-if="!browser.safari">
              <button ng-click="toggleMetronome()" class="button-metronome" ng-class="{stop: metronome, play: !metronome}">Metronome</button>
            </div>
          </div>
        </div>
      </div>

      <main ng-controller="DisplayCtrl">
        <div class="outer-notation">
          <div class="container">
            <div class="notation beats-{{composition.beats}}-per-measure beats-{{composition.resolution}}-resolution">
              <div class="staff"
                ng-class="{treble: $index == 0, bass: $index == 1}"
                ng-repeat="staff in performance track by $index">
                <div class="beat beat-{{chord.note_width}}"
                  ng-repeat="chord in staff track by $index"
                  ng-class="{null: chord == 0, sustain: chord == 'sus', chord: chord.notes}"
                  style="width: {{100 / staff.length}}%">
                  <span class="note-interval ni-{{note.int + (12 * (note.octave - 1))}} ni-sustain-{{chord.sustain_classname}}"
                    ng-repeat="note in chord.notes track by $index"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

  </div>

</div>

Random Commander.markdown

Random Commander

A random music generator. I can't make the parameters editable here. View the full version at jakealbaugh.github.io/random_commander/ or you can Fork it on Github

A Pen by Jake Albaugh on CodePen.

License.

script.js

// randomcommander.io
// http://github.com/jakealbaugh/random_commander

scripts

<script src="http://jakealbaugh.github.io/random_commander/js/app.min.js"></script>

style.css

// randomcommander.io
// http://github.com/jakealbaugh/random_commander

.triggers-wrapper {
  bottom: 20px;
}
h1.masthead { a {text-decoration: underline; } }

styles

<link href="http://jakealbaugh.github.io/random_commander/css/main.min.css" rel="stylesheet" />