In HTML5 hält die Audio API Einzug. Die API erlaubt es einem Audiodateien im Browser abzuspielen, zu kontrollieren und auf Events zu reagieren. Möchte man nicht direkt mit der API arbeiten, so kann man auch das <audio> Element benutzen
 
   1: <audio src="file.mp3" controls preload>
   2:     Your browser does not support Audio
   3: </audio>
 
Ich für meinen Teil benutze für die Demo allerdings die JavaScript API und erzeuge das Audio Objekt direkt. Die Demo spielt den Song “Seek & Destroy” von Metallica (Midi Version) und zeigt, wie bei einer Karaoke Maschine, die momentane Song-Strophe an.

Demo

Den Song-Text habe ich in ein JSON Objekt Array gepackt mit der Einzel-Objekt Signatur
{ “time” : “0”, “verse” : “bla bla bla” }
Die Zeiten für die einzelnen Strophen habe ich aus einer .LRC Datei herauskopiert, es gibt diverse im Netz, einfach mal danach suchen. Das hat mir das rausschreiben mit einer Stoppuhr erspart.
 
Der Rest ist simpel. Ein Audio Objekt instanzieren starten und auf die Methode
timeupdate
eine Funktion setzen die die Zeit mit den Zeiten im Array vergleicht und dabei die momentane Strophe ausgibt. Im folgenden der Code der bei document.ready ausgeführt wird:
 
   1: $(function(){
   2:     var position = 0;
   3:     player = new Audio();
   4:     player.src = "media/seek.mp3";
   5:     player.addEventListener("timeupdate", function() {
   6:         if( player.currentTime > lines[position].time )
   7:         {
   8:             if( position == 0 )
   9:             {
  10:                 $("#previousLine").html("&nbsp;");
  11:                 $("#currentLine").html(lines[position++].verse);
  12:             }
  13:             else
  14:             {
  15:                 var previous = position - 1;
  16:                 $("#previousLine").html(lines[previous].verse);
  17:                 $("#currentLine").html(lines[position++].verse);
  18:             }
  19:             $("#nextLine").html(lines[position].verse);
  20:         }
  21:     });
  22:     
  23:     $("#playButton").click(function(){
  24:         player.play();
  25:         $("#playButton").fadeOut("fast");
  26:     });
  27: });

Viel Spaß beim Mitsingen.

Ach ja, falls jemand das Original nicht kennt, gesungen wird erst so ab einer Minute und 20 Sekunden.

DotNetKicks-DE Image