music/demos/recorder.html

<!-- Copyright 2018 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <link rel="stylesheet" href="./style.css">

  <!-- Note that you need to load the WebMidi polyfill for this to work-->
  <script src='http://cwilso.github.com/WebMIDIAPIShim/build/WebMIDIAPI.min.js'></script>
  <title>mm.Recorder</title>
  <style>
    input {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <h1>mm.Recorder</h1>
  <p>
    <code>mm.Recorder</code> allows you to record MIDI from a MIDI instrument,
    and converts it to a  <code>NoteSequence</code>. Note that these demos won't work
    unless you actually have a MIDI instrument connected to your computer.
  </p>

  <h2>Basic usage</h2>
  <p> Once you create an <code>mm.Recorder</code>, it will connect to any MIDI inputs
    visible. You can use <code>start()</code> and <code>stop()</code> to record
    a <code>NoteSequence</code>:
  </p>
  <section>
    <button id="record" disabled>Record</button>
    <button id="stop" disabled>Stop</button>
    <b>Play click</b> <input type="checkbox" id="playClick"></label>
    <b>Only play count-in</b> <input type="checkbox" id="countInOnly"></label>
    <b>Tempo:</b>
    <input type="range" id="tempo" min="20" max="240" value="120" step="1"
    oninput="tempoValue.value = tempo.value">
    <output id="tempoValue">120</output>
    <div id="output"></div>
  </section>

  <h2>Streaming</h2>
  <p> You can also enable the <code>mm.Recorder</code> to record in streaming mode.
    In this case, the recorder will emit a new <code>NoteSequence</code> every time a new
    note is recorded, rather than just the entire sequence at the end of the recording:
    </p>
  <section>
    <button id="startStream" disabled>Record Stream</button>
    <button id="stopStream" disabled>Stop</button>
    <div class="visualizer-container" id="container">
      <svg class="svg"></svg>
    </div>
    <div id="streamOutput"></div>
  </section>

</body>
  <script src="recorder_bundle.js"></script>
</html>