Jazz-Soft.net
We make it sound!
<!DOCTYPE html>
<html>
<head>
<title>Karaoke</title>
<script src="JZZ.js"></script>
<script src="JZZ.midi.SMF.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
<script src="JZZ.gui.Player.js"></script>
<script src="JZZ.gui.Karaoke.js"></script>
<style type="text/css">
.karaoke { background-color: #eef; padding: .5em; }
.karaoke .t { font-size: 110%; font-weight: bold; }
.karaoke p { margin: 0; padding: .5em; }
.karaoke p.current { background-color: #ffe; }
.karaoke div.current { text-decoration: underline; }
.karaoke span.current { color: #f00; }
.karaoke span.past { color: #d0c; }
.karaoke .k, .karaoke .v, .karaoke .i, .karaoke .l, .karaoke .w { display: none; }
</style>
</head>
<body>
<h1>Karaoke</h1>
<p id=player></p>
<pre id=log></pre>
<p id=karaoke></p>
<script><!--
var log = document.getElementById('log');
function report(s) { return function() { log.innerHTML = s; }; }
JZZ.synth.Tiny.register('Web Audio');
JZZ().or(report('Cannot start MIDI engine!')).openMidiOut().or(report('Cannot open MIDI Out!'));
var player = new JZZ.gui.Player({ at: 'player', file: true });
var karaoke = new JZZ.gui.Karaoke('karaoke');
player.connect(karaoke);
player.onEnd = function() { karaoke.reset(); };
player.onStop = function() { karaoke.reset(); };
player.onLoad = function(smf) { karaoke.load(smf); };
player.onJump = function(t) { karaoke.jump(t); };
var data='\
TVRoZAAAAAYAAQADAGRNVHJrAAAAGgD/AwtMaXR0bGUgTGFtZQD/UQMKLCsA/y8ATVRyawAAAPMA/wMG\
THlyaWNzAP8BGEBUTWFyeSBXYXMgQSBMaXR0bGUgTGFtZWT/AQNcTWFL/wEDcnkgGf8BBHdhcyAy/wEC\
YSAy/wEDbGl0Mv8BBHRsZSAy/wEFbGFtZSxk/wEEL0xpdDL/AQR0bGUgMv8BBWxhbWUsZP8BBC9MaXQy\
/wEEdGxlIDL/AQVsYW1lLGT/AQMvTWFL/wEDcnkgGf8BBHdhcyAy/wECYSAy/wEDbGl0Mv8BBHRsZSAy\
/wEFbGFtZSwy/wEDL0EgMv8BA2xpdDL/AQR0bGUgMv8BBWxhbWUgMv8BBHdhcyAy/wEEc2hlIQD/LwBN\
VHJrAAAA8gD/AwVNdXNpYwDAC2SQQH9LgEBAAJA+fxmAPkAAkDx/MoA8QACQPn8ygD5AAJBAfzKAQEAA\
kEB/MoBAQACQQH9agEBACpA+fzKAPkAAkD5/MoA+QACQPn9agD5ACpBAfzKAQEAAkEN/MoBDQACQQ39a\
gENACpBAf0uAQEAAkD5/GYA+QACQPH8ygDxAAJA+fzKAPkAAkEB/MoBAQACQQH8ygEBAAJBAfzKAQEAZ\
kEB/GYBAQACQPn8ygD5AAJA+fzKAPkAAkEB/MoBAQACQPn8ygD5AAJA8f2RAZABDZABIf1qAPEAAQEAA\
Q0AASEAK/y8A';
player.load(new JZZ.MIDI.SMF(JZZ.lib.fromBase64(data)));
--></script>
</body>
</html>