nicht angemeldet
was machen diese Funktionen
kann jemand diese Funktionen kurz kommentieren, bzw. beschreiben was wo passiert... hier der Code...
<script language="JavaScript">
<![CDATA[ var note=4;
var word=3;
var notetype;
var verses=1;
var verse=1;
var svgdoc;
function init(event)
{
svgdoc = event.getCurrentNode().getOwnerDocument();
verses = svgdoc.getElementById("song").getAttribute("verses");
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:visible");
PlayNextNote(evt);
}
function PlayNextNote(event)
{
var node;
var nodes;
var textnodes;
var sound;
try
{
nodes = svgdoc.getElementsByTagName("use");
textnodes = svgdoc.getElementsByTagName("text");
// Skip the first 4 "use" elements - they are TrebleClef elements not notes
// Skip the first 3 "text" elements - they are beat info
if(note > 4)
{
nodes.item(note-1).setAttribute("class",notetype);
// There is only 1 text node to skip
textnodes.item(word).setAttribute("class","words");
}
if(note >= nodes.length && verse < verses)
{
note=4;
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:hidden");
verse++;
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:visible");
}
if(note < nodes.length)
{
notetype= nodes.item(note).getAttribute("class");
nodes.item(note).setAttribute("class","highlightednote");
// There is only 1 text node to skip
textnodes.item(word+1).setAttribute("class","highlightedwords");
sound = nodes.item(note).getAttribute("note");
}
else
{
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:hidden");
verse=1;
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:visible");
return;
}
node = svgdoc.getElementById("music");
node.setAttribute("dur",nodes.item(note).getAttribute("dur"));
node.setAttribute("volume","10");
var mp3=svgdoc.getElementById(sound+".mp3").getAttribute("data");
node.setAttribute("xlink:href", mp3);
node.beginElementAt("0s");
note++;
word++;
}
catch(e)
{
alert("Error: "+e.description);
};
}
]]>
</script>
-
kann jemand diese Funktionen kurz kommentieren, bzw. beschreiben was wo passiert... hier der Code...
<script language="JavaScript">
<![CDATA[ var note=4;Die interne Variable "note" wird mit dem Integer-Wert 4 initialisiert.
var word=3;
Die interne Variable "word" wird mit dem Integer-Wert 3 initialisiert.
var notetype;
Die interne Variable "notetype" wird ohne Wert initialisiert.
var verses=1;
Die interne Variable "verses" wird mit dem Integer-Wert 1 initialisiert.
var verse=1;
Die interne Variable "verse" wird mit dem Integer-Wert 1 initialisiert.
var svgdoc;
Die interne Variable "notetype" wird ohne Wert initialisiert.
function init(event)
{
svgdoc = event.getCurrentNode().getOwnerDocument();Die vordefinierte Variable svgdoc wird mit dem Dokument, in dem das von dem Event betroffene Node steckt, befüllt.
verses = svgdoc.getElementById("song").getAttribute("verses");
Die vordefinierte Variable verses wird mit dem "verses"-Attribut des #song-Elements aus dem in svgdoc gespeicherten XML(vermutlich SVG)-Dokument gefüllt.
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:visible");
Das Element #verse1 bekommt das CSS-Attribut visibility:visible zugewiesen, woraus man schlussfolgern kann, dass es vorher mit visibility:hidden ausgeblendet war.
PlayNextNote(evt);
Die Funktion PlayNextNote wird mit der undefinierten globalen Variable window.evt aufgerufen (enthält null) - vielleicht sollte hier lieber event übergeben werden?
}
function PlayNextNote(event)
{
var node;Die interne Variable node wird ohne Wert initialisiert.
var nodes;
Die interne Variable nodes wird ohne Wert initialisiert.
var textnodes;
Die interne Variable textnodes wird ohne Wert initialisiert.
var sound;
Die interne Variable sound wird ohne Wert initialisiert.
try
{Die nachfolgenden Zeilen werden mit try ... catch gekapselt, so dass Fehler abgefangen werden können - offenbar ist sich jemand hier nicht sicher, dass alle Browser diesen Code fehlerfrei unterstützen.
nodes = svgdoc.getElementsByTagName("use");
Die vordefinierte Variable nodes wird mit den use-Elementen aus svgdoc befüllt (Array von Nodes, außer im IE, der ein ganz komisches Iterations-Objekt zurückgibt).
textnodes = svgdoc.getElementsByTagName("text");
Die vordefinierte Variable textnodes wird mit den text-Elementen aus svgdoc befüllt.
// Skip the first 4 "use" elements - they are TrebleClef elements not notes
// Skip the first 3 "text" elements - they are beat info
if(note > 4)Der folgende Code wird nur ausgeführt, wenn die Variable note größer als 4 ist.
{
nodes.item(note-1).setAttribute("class",notetype);Das [note-1]te use-Tag bekommt das class-Attribut mit der im Moment noch uninitialisierten Variable nodetype befüllt.
// There is only 1 text node to skip
textnodes.item(word).setAttribute("class","words");Das [word]te text-Tag (word wurde mit 3 initialisiert) bekommt das class-Attribut "words".
}
Der folgende Code wird auch dann ausgeführt, wenn die Variable note nicht größer als 4 ist.
if(note >= nodes.length && verse < verses)
Der folgende Code wird nur ausgeführt, wenn note größer gleich der Anzahl der Elemente in nodes ist (bzw. beim IE der Inhalt der length-Instanz des seltsamen Objekts) und verse kleiner als verses ist.
{
note=4;Die vordefinierte Variable note wird mit dem Integer-Wert 4 befüllt.
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:hidden");
Ab hier kann mal jemand anders übernehmen :-)
verse++;
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:visible");
}if(note < nodes.length)
{
notetype= nodes.item(note).getAttribute("class");
nodes.item(note).setAttribute("class","highlightednote");
// There is only 1 text node to skip
textnodes.item(word+1).setAttribute("class","highlightedwords");
sound = nodes.item(note).getAttribute("note");
}
else
{
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:hidden");
verse=1;
svgdoc.getElementById("verse"+verse).setAttribute("style","visibility:visible");
return;
}node = svgdoc.getElementById("music");
node.setAttribute("dur",nodes.item(note).getAttribute("dur"));node.setAttribute("volume","10");
var mp3=svgdoc.getElementById(sound+".mp3").getAttribute("data");
node.setAttribute("xlink:href", mp3);
node.beginElementAt("0s");note++;
word++;}
catch(e)
{
alert("Error: "+e.description);
};
}]]>
</script>
Gruß, LX
--
RFC 1925, Satz 8: Es ist komplizierter als man denkt. -
kann jemand diese Funktionen kurz kommentieren, bzw. beschreiben was wo passiert... hier der Code...
Darf man fragen, woher du diesen Code hast?
Mit google finde ich ihn nicht.Offenbar handelt es sich um eine JS gesteuerte XML Verarbeitung.
Die Funktion liest im svg Teilbaum daten zusammen, vor allem Angaben zu note und volum, und ändert dann in einem anderen Element die ressource zu einem gespeicherten mp3 sound für diese Note.
Es handelt sich wohl um eine Art proof of concept code, wie man einen Scoreeditor schreiben kann und dabei für das Editieren eine Klangkontrolle erstellen kann.
Als echter Player im Browser dürfte das so nicht taugen, da enorm viele einzelne Soundquellen gespeichert werden müssen.
Als eingabe-kontrolle dürfte das aber ein möglicher Weg sein.Der Code ist allerdings so schlecht (der Autor dürfte ihn wegen der fehlenden Kommentare wohl selber bald nicht mehr verstehen)
das ich eigentlich keine Analyse machen will.Eine einzige Frage:
node = svgdoc.getElementById("music");
node.setAttribute("dur",nodes.item(note).getAttribute("dur"));node.setAttribute("volume","10");
var mp3=svgdoc.getElementById(sound+".mp3").getAttribute("data");
node.setAttribute("xlink:href", mp3);
node.beginElementAt("0s");Was für ein Element wird hier bedient, das per Standard die Attribute hat:
volume="" dur="" x-link:href=""Und welches Element dient als data Container für Sounddaten?
Offenbar werden hier auch Eigenschaften von SMIL verwendet, eine XML Sprache für Medien-Darstellungen.
Das alles ist reichlich komplex.
SVG, XLINK, SMIL in einem Document.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
es handelt sich um ein xslt-stylesheet, welches ein xml file zu einem svg transformiert, dabei kommen alle dynamischen elemente (Grafik, Töne (eingebettete .mp3-Dateien), usw.) aus dem Stylesheet. Die Javascriptfunktion ist in das Stylesheet im <svg>...</svg>-Teil eingebettet... Hilft die Info.
-
bei Interesse des Gesamtzusammenhangs hier die Dateien:
1. XML
2. XSLT Stylesheet (inkl. Javascript und SVG)
3. SVG in "HTML-Mantel" zum abspielen im Browser
bin für jegliche Kommentierung dankbar...