index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TonnetzViz | Online MIDI Visualization</title>

    <meta name="description" content="TonnetzViz is a web-based music visualizer that receives MIDI input and visualizes it in real time using a tonal network called the Tonnetz.">
    <meta name="keywords" content="tonnetz, online, midi, visualizer, visualization, generator">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fullwidth">
      <nav class="navbar navbar-inverse navbar-static-top" id="navbar">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">TonnetzViz</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav" role="tablist">
            <li>
              <a href="#controls" data-toggle="tab" role="tab" aria-controls="controls">
                <i class="fa fa-fw fa-gamepad" aria-hidden="true"></i>
                Controls<span class="caret"></span>
              </a>
            </li>
            <li>
              <a href="#appearance" data-toggle="tab" role="tab" aria-controls="appearance">
                <i class="fa fa-fw fa-eye" aria-hidden="true"></i>
                Appearance<span class="caret"></span>
              </a>
            </li>
            <li>
              <a href="#sound" data-toggle="tab" role="tab" aria-controls="sound">
                <i class="fa fa-fw fa-volume-off" aria-hidden="true"></i>
                Sound<span class="caret"></span>
              </a>
            </li>
            <li>
              <a href="#about" data-toggle="tab" role="tab" aria-controls="about">
                <i class="fa fa-fw fa-question-circle" aria-hidden="true"></i>
                Help<span class="caret"></span>
              </a>
            </li>
            <li class="hidden">
              <a href="#" data-toggle="tab" role="tab" id="dummy-tab"></a>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>

      <div class="tab-content collapse col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2" id="tabs">
        <div role="tabpanel" class="tab-pane" id="controls">
          <div class="panel panel-default">
            <div class="panel-heading">MIDI</div>
            <div class="panel-body">
              <div class="form-group">
                <div class="row">
                  <div class="col-xs-6 col-sm-5 col-md-6 col-sm-offset-1">
                    <label for="midi-port" class="control-label">MIDI port</label>
                    <select class="form-control" name="midi-port" id="midi-port"></select>
                  </div>

                  <div class="col-xs-6 col-sm-5 col-md-4">
                    <label for="midi-channel" class="control-label">MIDI channel</label>
                    <select class="form-control" name="midi-channel" id="midi-channel">
                      <option value="-1">All</option>
                      <option value="-10">All except drums (10)</option>
                      <option value="0">1</option>
                      <option value="1">2</option>
                      <option value="2">3</option>
                      <option value="3">4</option>
                      <option value="4">5</option>
                      <option value="5">6</option>
                      <option value="6">7</option>
                      <option value="7">8</option>
                      <option value="8">9</option>
                      <option value="9">10</option>
                      <option value="10">11</option>
                      <option value="11">12</option>
                      <option value="12">13</option>
                      <option value="13">14</option>
                      <option value="14">15</option>
                      <option value="15">16</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="row">
                  <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="checkbox">
                      <label><input name="enable-sustain" id="enable-sustain" type="checkbox" checked> Enable sustain pedal</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">Computer keyboard</div>
            <div class="panel-body">
              <div class="form-group">
                <div class="row">
                  <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="radio">
                      <label><input type="radio" name="kbd-layout" value="piano" checked>Piano</label>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <div class="keyboard">
                      <span class="white key"><span>A</span></span>
                      <span class="black key"><span>W</span></span>
                      <span class="white key"><span>S</span></span>
                      <span class="black key"><span>E</span></span>
                      <span class="white key"><span>D</span></span>
                      <span class="white key"><span>F</span></span>
                      <span class="black key"><span>T</span></span>
                      <span class="white key"><span>G</span></span>
                      <span class="black key"><span><sup>Y</sup>/<sub>Z</sub></span></span>
                      <span class="white key"><span>H</span></span>
                      <span class="black key"><span>U</span></span>
                      <span class="white key"><span>J</span></span>
                      <span class="white key"><span>K</span></span>
                      <span class="black key"><span>O</span></span>
                      <span class="white key"><span>L</span></span>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="radio">
                      <label><input type="radio" name="kbd-layout" value="riemann">Tonnetz-like</label>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
                    <img src="images/keyboard-layout.svg" width="100%">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
              <button type="button" id="panic" class="btn btn-danger btn-block" data-toggle="tooltip" title="All notes off">
              <i class="fa fa-fw fa-lg fa-exclamation-circle" aria-hidden="true"></i>
              Panic</button>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="appearance">
          <div class="panel panel-default">
            <div class="panel-heading">Appearance</div>
            <div class="panel-body">
              <div class="form-horizontal">
                <div class="form-group">
                  <label for="color-scheme" class="control-label col-xs-5 col-sm-4 col-md-3">Colour scheme</label>
                  <div class="col-xs-6 col-sm-4">
                    <select class="form-control" name="color-scheme" id="color-scheme">
                    </select>
                    <div class="help-block">
                        <div>
                          <i class="fa fa-fw fa-pencil" aria-hidden="true"></i>
                          <a href="#" id="clone-scheme">Clone<span> and edit</span></a><span>,
                            <a href="#" id="edit-scheme">edit</a> or <a href="#" id="delete-scheme">delete</a></span> this scheme
                        </div>
                        <div>
                          <i class="fa fa-fw fa-code-fork" aria-hidden="true"></i>
                          <a href="#" id="scheme-github">Add</a> this scheme on GitHub
                        </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="layout" class="control-label col-xs-5 col-sm-4 col-md-3">Layout</label>
                  <div class="col-xs-6 col-sm-7 col-md-8">
                    <label class="radio-inline"><input type="radio" name="layout" value="riemann" checked>Riemannian</label>
                    <label class="radio-inline"><input type="radio" name="layout" value="sonome">Sonome</label>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-xs-5 col-sm-4 col-md-3">Show/hide</label>
                  <div class="col-xs-6 col-sm-7 col-md-8">
                    <div class="checkbox">
                      <label><input name="show-note-names" id="show-note-names" type="checkbox" checked> Tone names</label>
                    </div>
                    <div class="checkbox">
                      <label><input name="show-triad-names" id="show-triad-names" type="checkbox"> Triad names</label>
                    </div>
                    <div class="checkbox">
                      <label><input name="show-unit-cell" id="show-unit-cell" type="checkbox"> Unit cell</label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="ghost-duration" class="control-label col-xs-5 col-sm-4 col-md-3">'Ghost' tone duration</label>
                  <div class="col-xs-6 col-sm-4 col-md-3">
                    <div class="input-group">
                      <input type="number" class="form-control" id="ghost-duration" min="0" step="50" value="500">
                      <div class="input-group-addon">ms</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="alert alert-info" role="alert"><strong>Tip:</strong> Use your mouse wheel to zoom in or out.</div>
        </div>
        <div role="tabpanel" class="tab-pane" id="sound">
          <div class="panel panel-default">
            <div class="panel-heading">Sound</label></div>
            <div class="panel-body">
              <div class="form-horizontal">
                <div class="form-group">
                  <label class="control-label col-xs-5 col-sm-4 col-md-3">Enable sound</label>
                  <div class="col-xs-6 col-sm-7 col-md-8">
                    <div class="checkbox">
                      <label><input name="sound-on" id="sound-on" type="checkbox"> <i class="fa fa-lg fa-fw fa-volume-off"  style="text-align: left"></i></label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="gain" class="control-label col-xs-5 col-sm-4 col-md-3">Gain</label>
                  <div class="col-xs-6 col-sm-4 col-md-3">
                    <input type="number" class="form-control" id="gain" min="0" max="1" step="0.1" value="0.3">
                  </div>
                </div>
                <div class="form-group">
                  <label for="synth-type" class="control-label col-xs-5 col-sm-4 col-md-3">Synth type</label>
                  <div class="col-xs-6 col-sm-4 col-md-3">
                    <select class="form-control" name="synth-type" id="synth-type">
                      <option value="sine">Sine</option>
                      <option value="square">Square</option>
                      <option value="sawtooth">Sawtooth</option>
                      <option value="triangle">Triangle</option>
                    </select>
                  </div>
                </div>
		<div class="form-group">
                  <label for="tuning" class="control-label col-xs-5 col-sm-4 col-md-3">Tuning</label>
                  <div class="col-xs-6 col-sm-4 col-md-3">
                    <select class="form-control" name="tuning" id="tuning">
                      <option value="et">Equal Temperament</option>
                      <option value="pyth">Pythagorean tuning</option>
                      <option value="js">Just Intonation</option>
                    </select>
                  </div>
                </div>
		<div class="form-group">
                  <label for="base_tuning" class="control-label col-xs-5 col-sm-4 col-md-3">Base note of the tuning</label>
                  <div class="col-xs-6 col-sm-4 col-md-3">
                    <select class="form-control" name="base_tuning" id="base_tuning">
                      <option value=36>C</option>
                      <option value=37>C#</option>
                      <option value=38>D</option>
                      <option value=39>D#</option>
                      <option value=40>E</option>
                      <option value=41>F</option>
                      <option value=42>F#</option>
                      <option value=43>G</option>
                      <option value=44>G#</option>
                      <option value=45>A</option>
                      <option value=46>A#</option>
                      <option value=47>B</option>
                    </select>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="about">
          <div class="panel panel-default">
            <div class="panel-heading">What is TonnetzViz?</div>
            <div class="panel-body">
              <p>TonnetzViz is an app that visualizes music in real time using the Tonnetz.</p>

              <p>The <a href="https://en.wikipedia.org/wiki/Tonnetz" class="external" data-popup="true">Tonnetz</a> is a diagram representing tonal space.
              It can be used to visualize harmonic relationships in music. Each node in the diagram corresponds to one of the 12 tones and is connected
              to 6 adjacent nodes. The &lsquo;neighbours&rsquo; of each tone are related to it either by a third (major or minor), or by a perfect fifth, depending
              on their relative position in the diagram.</p>

              <p>One of the interesting properties of the Tonnetz is that
              any combination of tones (e.g. a chord or a melodic idea)
              forms a &lsquo;shape&rsquo; that is unchanged by transposition.
              For instance, in the default layout, every major triad is a downward-pointing triangle,
              and every minor triad is an upward-pointing triangle.</p>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">How to use</div>
            <div class="panel-body">
              <p>You can use TonnetzViz with any MIDI-enabled instrument (as long as your browser supports the Web MIDI
              API). Just connect the instrument to your computer, go to <a href="#controls" class="tab-link">Controls</a>, select
              the appropriate MIDI port and play. You can also connect TonnetzViz to a software sequencer using a
              virtual loopback MIDI port.</p>

              <p>If you don't have a MIDI device, you can use your computer keyboard to control the app
              (see <a href="#controls" class="tab-link">Controls</a>). You can also turn on
              <a href="#sound" class="tab-link">sound</a> to hear what you are playing.</p>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">About the project</div>
            <div class="panel-body">
              <ul class="fa-ul">
                <li><i class="fa-li fa fa-lg fa-flask"></i>Created by
                  <a href="https://ondrej.cifka.com" class="external" data-popup="true">Ondřej Cífka</a> in 2016</li>
                <li><i class="fa-li fa fa-lg fa-users"></i>Contributions by
                  <a href="https://github.com/Aknin" class="external" data-popup="true">Achille Aknin</a> and <a href="https://github.com/chumo" class="external" data-popup="true">Jesús Martínez-Blanco</a></li>
                <li><i class="fa-li fa fa-lg fa-code"></i>Source code:
                  <a href="https://github.com/cifkao/tonnetz-viz" class="external" data-popup="true">GitHub</a></li>
                <li><i class="fa-li fa fa-lg fa-youtube-play"></i>Videos:
                  <a href="https://www.youtube.com/playlist?list=PLPdw6Kin7U86ccF4atsm7E9HkWPwFGKvj" class="external" data-popup="true">YouTube</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container" id="messages-container">
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2" id="messages">
        </div>
      </div>
    </div>

    <div class="modal fade" id="scheme-editor" tabindex="-1" role="dialog" aria-labelledby="scheme-editor-label"
      data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="scheme-editor-label">Edit colour scheme</h4>
          </div>
          <div class="modal-body">
            <div id="scheme-editor-holder">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" id="save-scheme">Save</button>
          </div>
        </div>
      </div>
    </div>

    <div id="tonnetz">
      <div id="note-labels" class="labels"></div>
      <div id="triad-labels" class="labels"></div>
      <canvas id="canvas">
      </canvas>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jsoneditor.min.js"></script>

    <script type="text/javascript" src="js/storage.js"></script>
    <script type="text/javascript" src="js/audio.js"></script>
    <script type="text/javascript" src="js/tonnetz.js"></script>
    <script type="text/javascript" src="js/midi.js"></script>
    <script type="text/javascript" src="js/keyboard.js"></script>

    <script type="text/javascript" src="js/colorscheme.js"></script>
    <script type="text/javascript" src="color-schemes/default.js"></script>
    <script type="text/javascript" src="color-schemes/greenonblack.js"></script>
    <script type="text/javascript" src="color-schemes/apollo.js"></script>

    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>