music/demos/player.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">
  <title>mm.Player</title>
  <style>
    td {
      min-width: 100px;
      vertical-align: top;
    }
    #currentTime, #totalTime {
      width: 35px;
      text-align: right;
      display: inline-block;
    }
  </style>
</head>

<body>
  <h1>mm.Player</h1>
  <p>An <code>mm.Player</code> is a class that plays <code>NoteSequences</code>.
    Below you can play the same melody using each of the available players</p>

  <h2>Controls</h2>
  <section>
    <p>You can start, stop, pause and unpause a Player: </p>
    <button id="play">Play</button>
    <button id="stop" disabled>Stop</button>
    <button id="pause" disabled>Pause</button>
    <button id="resume" disabled>Resume</button>
    <b>Play state: </b><span id="playState"></span>

    <p>You can also seek to a point in the NoteSequence:</p>
    <b id="currentTime">0</b>s
    <input type="range" id="slider" min="0" value="0" step="0.5">
    <b id="totalTime">0</b>s
  </section>

  <h2 id="soundfonts">SoundFonts</h2>
  <section>
    <p>There are several SoundFonts that you can use with the
      <code>mm.SoundFontPlayer</code>, for more realistic sounding instruments:</p>
    <table>
      <thead>
        <td><b>Instrument</b></td>
        <td><b>Name</b></td>
        <td></td>
        <td>License</td>
      </thead>
      <tbody>
        <tr>
          <td>Piano</td>
          <td>salamander</td>
          <td><button id="playSF_0">Play</button></td>
          <td>Audio samples from <a href="https://archive.org/details/SalamanderGrandPianoV3">Salamander Grand Piano</a></td>
        </tr>
        <tr>
          <td>Multi</td>
          <td>sgm_plus</td>
          <td><select id="select" class="button"></select><button id="playSF_1">Play</button></td>
          <td>Audio samples from <a href="https://www.polyphone-soundfonts.com/en/files/27-instrument-sets/256-sgm-v2-01">SGM</a> by Shan</td>
        </tr>
        <tr>
          <td>Percussion</td>
          <td>jazz_kit</td>
          <td><button id="playSF_2">Play</button></td>
          <td>Audio samples from <a href="https://musical-artifacts.com/artifacts/686">Jazz Kit (EXS)</a> by Lithalean</td>
        </tr>
      </tbody>
    </table>
  </section>


  <h2>Unquantized NoteSequences</h2>
  <section>
    <b>Base player</b>
    <div id="unq-player"></div>
    <b>SoundFont player</b>
    <div id="unq-soundfont"></div>
  </section>

  <h2>Quantized NoteSequences</h2>
  <section>
    <b>Base player (with or without click)</b>
    <div id="q-player"></div>
    <b>SoundFont player</b>
    <div id="q-soundfont"></div>
  </section>

  <h2>Quantized Drum NoteSequences</h2>
  <section>
    <b>Base player (with or without click)</b>
    <div id="d-player"></div>
    <b>SoundFont player</b>
    <div id="d-soundfont"></div>
  </section>

  <h2>Changing the tempo</h2>
  <p>You can update the tempo at which a <code>mm.Player</code> is playing a
    <code>NoteSequence</code> by calling <code>setTempo()</code>. To see this,
    start one of the melodies below, and adjust the tempo slider.
  </p>

  <section>
    <div>
      <button id="playBtn">Play</button>
      <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>
    <div class="visualizer-container" id="container">
      <svg class="svg"></svg>
    </div>
  </section>

  <h2>NoteSequences with velocities</h2>
  <p>They work!</p>
  <section>
    <b>SoundFont player</b>
    <div id="s-v-player"></div>
    <b>Base player (with or without click)</b>
    <div id="v-player"></div>
    <b>Drum player (with or without click)</b>
    <div id="d-v-player"></div>
  </section>

  <h2>Controlling the attack or release of a note</h2>
  <p>Using the SoundFont player, you can control the timing of the attack
    or the release of a key. This is useful if you need real-time note
    playing, rather than of a predetermined NoteSequence.</p>
  <section>
    <button id="attackSoundFont">Attack</button>
    <button id="releaseSoundFont">Release</button>
  </section>

  <h2>Using WebMIDI</h2>
  <p>If you want to use a connected MIDI output, you can use a <code>MIDIPlayer</code>
  to output to it:</p>
  <section>
    MIDI Outputs: <select id="midi-outputs"></select>
    <button id="midi-play">Play</button>
  </section>

  <script src="player_bundle.js"></script>
</body>

</html>