JZZ.gui.Karaoke

Displaying and highlighting text when playing MIDI files in .kar format.

Construction

JZZ.gui.Karaoke(parent) - create a new Karaoke Player widget; works with or without the new keyword.

parent - parent; can be a DOM object itself, or its id as string.

load()

karaoke.load(smf) - load the MIDI data.

smf is a JZZ.MIDI.SMF object.

jump()

karaoke.jump(t) - jump to MIDI tick t.

reset()

karaoke.reset() - reset the highlighted text.

Example

<script src="JZZ.js"></script>
<script src="JZZ.midi.SMF.js"></script>
<script src="JZZ.gui.Karaoke.js"></script>
<style type="text/css">...</style>

<div id=kar></div>

<script><!--
  var midiout = JZZ().openMidiOut().or('Cannot open MIDI Out');
  var data = ... // load the .kar file as string
  var smf = new JZZ.MIDI.SMF(data);
  var karaoke = new JZZ.gui.Karaoke('kar');
  var player = smf.player();
  karaoke.load(smf);
  player.connect(karaoke);
  player.connect(midiout);
  player.onEnd = function() { karaoke.reset(); };
  player.play();
--></script>

CSS

It's up to the user how to style the Karaoke.

Generated Karaoke DOM tree looks like the following:

<div class=karaoke> // parent element
  <div> // one for each track that has text
    <div class=t>...</div> // Title and oter special text events:
    // t for @T..., k for @K..., v for @V..., i for @I..., l for @L..., w for @W...
    // most of these except the title are best to set invisible.
    <p class=past> // past verses
    ...
    </p>
    <p class=current> // current verse
      <div class=past> // past line
      ...
      </div>
      <div class=current> // current line
        <div class=past>Ma</div> // past span
        <div class=current>ry </div> // current span
        <div>was </div> // future spans - no class
        ...
      </div>
      <div> // future lines - no class
      ...
      </div>
    </p>
    <p> // future verses - no class
    ...
    </p>
  </div>
</div>