Karaoke MIDI Player
npm install jzz-gui-karaoke --save
or yarn add jzz-gui-karaoke
or get the full development version and minified scripts from GitHub
node karaoke.js
or node karaoke.js filename.kar
<script src="JZZ.js"></script>
<script src="JZZ.midi.SMF.js"></script>
<script src="JZZ.gui.Karaoke.js"></script>
//...<script src="https://cdn.jsdelivr.net/npm/jzz"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-midi-smf"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-gui-karaoke"></script>
//...<script src="https://unpkg.com/jzz"></script>
<script src="https://unpkg.com/jzz-midi-smf"></script>
<script src="https://unpkg.com/jzz-gui-karaoke"></script>
//...var JZZ = require('jzz');
require('jzz-midi-smf')(JZZ);
require('jzz-gui-karaoke')(JZZ);
//...import { JZZ } from 'jzz';
import { SMF } from 'jzz-midi-smf';
import { Karaoke } from 'jzz-gui-karaoke';
SMF(JZZ);
Karaoke(JZZ);
//...require(['JZZ', 'JZZ.midi.SMF', 'JZZ.gui.Karaoke'], function(JZZ, smf, kar) {
// ...
});Please check the API Reference !
<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>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>Please visit https://jazz-soft.net for more information.