Noten (.ttf) im HTML-Dokument

[Linuchs]

Hallo,

ich habe eine zunehmende Sammlung von Liedertexten als HTML-Dokumente.

Nun möchte ich mit Noten experimentieren. Ich habe den Font notes-normal.ttf heruntergeladen und eingebunden:

@font-face { font-family: 'notes'; src: url('css/notes-normal.ttf') format('truetype'); font-weight: normal; font-style: normal; } .nt { font-family: 'notes'; color: #00f; }

Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:

<p>notes-normal.ttf</p>

<p class=nt>abcdefghijklmnpqrstuvwxyz</p>

Doch die sind alle in einer Ebene. Ich muss nun noch die Tonhöhen bestimmen.

Bevor ich das musikalische Rad neu erfinde: Wer hat schon sowas gemacht? Suche Erfahrungsaustausch.

Mein erstes Lied zum Testen: Samoa-Song

Gruß, Linuchs

[Auge]

Hallo

Nun möchte ich mit Noten experimentieren. Ich habe den Font notes-normal.ttf heruntergeladen und eingebunden:

Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:

<p>notes-normal.ttf</p>

<p class=nt>abcdefghijklmnpqrstuvwxyz</p>

Doch die sind alle in einer Ebene. Ich muss nun noch die Tonhöhen bestimmen.

Erwartest du ernsthaft, dass HTML von sich aus mit Noten umgehen kann? Es gibt zwar tatsächlich einen passenden XML-Dialekt (MusicXML), mir ist aber nicht bekannt, dass irgendein Browser damit umgehen kann.

Wenn es nur um eine passende Darstellung geht, ist vielleicht (und rein spekulativ!) SVG die passende Wahl. Ob das nämlich sinnvoll skaliert (Viewportgrößen zu Notenzeilenlänge etc.), solltest du erst ausprobieren, so niemand anders mit besseren Ideen daherkommt.

Tschö, Auge

[Jörg Reinholz]

Moin!

Wenn es nur um eine passende Darstellung geht, ist vielleicht (und rein spekulativ!) SVG die passende Wahl.

Kann man ja probieren. MuseScore steht unter der GPL und kann den SVG-Export. Das Skalieren ist dann eine Frage des Einbaus im HTML.

Jörg Reinholz

[Linuchs]

zum zweiten Mal (erster Versuch im Nirwana verschwunden):

Jörg Reinholz 30.03.2015 18:49 "antworten"

MuseScore habe ich, aber wie funtioniert der Export als .svg?

Habe dem Dateinamen .svg angehängt und MuseScore setzt sein .mscz noch dahinter.

Linuchs

jetzt "speichern"

[Jörg Reinholz]

Moin!

MuseScore habe ich, aber wie funtioniert der Export als .svg?

Handbuch: http://musescore.org/en/node/38926

beachte den Unterschied zwischen "speichern" und "exportieren"

Jörg Reinholz

[Linuchs]

beachte den Unterschied zwischen "speichern" und "exportieren"

Habe MuseScore 1.2 vor ein paar Monaten auf Ubuntu installiert.

Logo habe ich nach "Datei" - "exportieren" gesucht, gibt's aber nicht.

Linuchs

[Jörg Reinholz]

Moin!

http://wiki.ubuntuusers.de/MuseScore

1. ppa:mscore-ubuntu/mscore-stable hinzufügen,
2. MuseScore 2.0 installieren.

Jörg Reinholz

[Linuchs]

zum zweiten Mal (erster Versuch im Nirwana verschwunden):

Jörg Reinholz 30.03.2015 18:49 "antworten"

MuseScore habe ich, aber wie funtioniert der Export als .svg?

Habe dem Dateinamen .svg angehängt und MuseScore setzt sein .mscz noch dahinter.

Linuchs

jetzt "speichern"

[Linuchs]

ich habe auge geantwortet und auf "speichern" geklickt. Mein Text ist verschollen. Was ist hier lo?

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

ja!

ich habe auge geantwortet und auf "speichern" geklickt. Mein Text ist verschollen. Was ist hier lo?

Wo ist das 's'?

Ach, ich fühl's, es ist verschwunden

Spirituelle Grüße
Euer Robert

[Felix Riesterer]

Lieber robertroth,

Wo ist das 's'?

Ach, ich fühl's, es ist verschwunden

nice pun. Macht sie aber sehr schön die Kirsten. Stimmlich gefällt mir das sehr. Aber für die Rolle fehlt noch der inhaltliche Bezug. So ist es einfach nur schön gesungen... aber da schlägt gerade der Musiklehrer in mir wieder durch. grr

Liebe Grüße,

Felix Riesterer.

[robertroth]

Lieber Felix, liebe Mitdenker, liebe Wissende, liebe Neugierige,

ja!

Wo ist das 's'?

Ach, ich fühl's, es ist verschwunden

nice pun. Macht sie aber sehr schön die Kirsten. Stimmlich gefällt mir das sehr. Aber für die Rolle fehlt noch der inhaltliche Bezug. So ist es einfach nur schön gesungen... aber da schlägt gerade der Musiklehrer in mir wieder durch. grr

Davon las ich doch schon jüngst :-)

Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben? Bitte korrigiere mich gleich, wenn es nicht stimmt, wie ich ihn verstanden habe:

Er will in HTML Noten darstellen auf Notenlinen. Aber die will er nicht selber malen und dann daws Bild davon reinsetzen, sondern HTML (der Browser) soll z.B. mittelst eines speziellen Fonts Noten darstellen, so dass die Noten auch in einer (eigenen) Beschreibungssprache vorliegen und z.B. von eine Synthy sofort verstanden werden können.

Hab ich das so richtig verstanden?

Spirituelle Grüße
Euer Robert

[Auge]

Hallo

Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben?

Er will in HTML Noten darstellen auf Notenlinen.

Nein, er will Noten auf Notenlinien in einem HTML-Dokument darstellen (ohne, dass das HTML-Noten (die es nicht gibt) sein müssten).

Aber die will er nicht selber malen und dann daws Bild davon reinsetzen, sondern HTML (der Browser) soll z.B. mittelst eines speziellen Fonts Noten darstellen, …

Bis auf die Erwähnung von HTML ist das soweit korrekt. Mittels eines Fonts will er die Notation von Liedern in der Website darstellen.

… so dass die Noten auch in einer (eigenen) Beschreibungssprache vorliegen und z.B. von eine Synthy sofort verstanden werden können.

Das ist, soweit es seine Beschreibung hergibt, keine Anforderung.

Da es also, soweit bekannt, nur um die (optische) Ausgabe von Noten in einem HTML-Dokument geht, sollte ein Notensatzprogramm mit Export nach SVG, welches wiederum in einem HTML-Dokument nutzbar ist, die beste Wahl sein.

Tschö, Auge

[Felix Riesterer]

Lieber robertroth,

Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben?

so etwas wie VexFlow.

Liebe Grüße,

Felix Riesterer.

[Tabellenkalk]

Hallo,

Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben?

so etwas wie VexFlow.

Und ich dachte es geht um Noten?

The score below was rendered in your browser.
options space=20 tabstave notation=true key=A time=4/4 notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 | notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4 text :w, |#segno, ,|, :hd, , #tr options space=25 tabstave notation=true notes :q (5/4.5/5) (7/4.7/5)s(5/4.5/5) ^3^ notes :8 7-5/4 $.a./b.$ (5/4.5/5)h(7/5) =:| notes :8 (12/5.12/4)ds(5/5.5/4)u 3b4/5 notes :h (5V/6.5/4.6/3.7/2) $.italic.let ring$ =|= text :h, ,.font=Times-12-italic, D.S. al coda, |#coda text :h, ,.-1, .font=Arial-14-bold,A13 text ++, .23, #f

pre-pre-pre-alpha halt...

Gruß
Kalk

[Felix Riesterer]

Lieber Tabellenkalk,

pre-pre-pre-alpha halt...

ist es das? Diese Demo und das dahinter stehende System (sieht mir etwas nach social networking feature aus) scheint schon etwas mehr als pre-pre-pre-alpha zu sein.

Liebe Grüße,

Felix Riesterer.

[Tabellenkalk]

Hallo,

ist es das? Diese Demo und das dahinter stehende System (sieht mir etwas nach social networking feature aus) scheint schon etwas mehr als pre-pre-pre-alpha zu sein.

"pre-pre-pre-alpha" ist von der Webseite zitiert. Aber mit aktiviertem JS sieht's aus, als könnte man ein pre schon mal streichen.

Gruß
Kalk

[Jörg Reinholz]

Moin!

ich habe auge geantwortet und auf "speichern" geklickt. Mein Text ist verschollen. Was ist hier lo?

Vielleicht hast Du auf "Vorschau" geklickt und meinst, dass Du auf "speichern" geklickt hast.

Jörg Reinholz

[Linuchs]

Vielleicht hast Du auf "Vorschau" geklickt und meinst, dass Du auf "speichern" geklickt hast.

Jetzt: "antworten" Jörg Reinholz 30.03.2015 19:04

Name eingetragen - speichern ...

[Jörg Reinholz]

Moin!

Vielleicht hast Du auf "Vorschau" geklickt und meinst, dass Du auf "speichern" geklickt hast.

Jetzt: "antworten" Jörg Reinholz 30.03.2015 19:04

Name eingetragen - speichern ...

... und geht!

Jörg Reinholz

[Gunnar Bittersmann]

@font-face { font-family: 'notes'; src: url('css/notes-normal.ttf') format('truetype'); font-weight: normal; font-style: normal; } .nt { font-family: 'notes'; color: #00f; }

<p class=nt>abcdefghijklmnpqrstuvwxyz</p>

Bevor ich das musikalische Rad neu erfinde:

Wenn das alte Rad eckig ist, ist es sinnvoll, ein neues zu erfinden.

Dir von die ausgesuchte Schriftart stellt irgendwelche Zeichen (hier Kleinbuchstaben), die nichts mit musikalischen Zeichen zu tun haben, als musikalische Zeichen dar. Das Rad läuft nicht rund.

Sinnvoller ist es, für musikalische Zeichen nicht andere Zeihen (Buchstaben) zu missbrauchen, sondern musikalische Zeichen als solche zu codieren. Aber auch dieses Rad ist bereits erfunden: der Unicodeblock Musical Symbols U+1D100 bis U+1D1FF

Diese Zeichen sind für musikalische Zeichen zu verwenden – und eine Schriftart, die das richtig darstellt.

Doch die sind alle in einer Ebene. Ich muss nun noch die Tonhöhen bestimmen.

Man könnte die Noten mit <span style="vertical-align: -0.42em">&#x1D15F;</span> vertikal verschieben.

Aber sinnvoller ist wohl – wie schon gesagt wurde – ein Notensatzprogramm, dass die Partitur in einem entsprechenden Format ausgibt. Vorzugsweise SVG.

LLAP

[Tabellenkalk]

Hallo,

Nun möchte ich mit Noten experimentieren.
Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:

so ganz hab ich dein Ziel noch nicht erkannt, aber kennst du Lilypond? Die stellen in ihrer Doku natürlich auch sämtliche Beispiele im HTML eingebettet dar. Vielleicht findet man raus, wie die das anstellen.

Gruß
Kalk

[Linuchs]

habe ausführlich auf deine Frage geantwortet.

Beim Klick auf "speichern" zuckt diese Schaltfläche weg. Soll das ein Schutz gegen Spam sein?

Beim zweiten Versuch scheint der Beitrag verloren zu sein. Was ist das?

Opear 12.16 unter Ubuntu

Linuchs

[Der Martin]

Hallo,

Beim Klick auf "speichern" zuckt diese Schaltfläche weg.

kann ich bestätigen, ebenfalls mit Opera 12.16 unter Linux. Das Zucken tritt auf, wenn man bis ans Seitenende scrollt und dann mit der Maus irgendwelche Links hovert (Threadbaum, Tread-Icons). Nach einem Moment scrollt die Seite dann aus heiterm Himmel ein paar Zeilen nach oben.

Soll das ein Schutz gegen Spam sein?

Interessante These. ;-)

Beim zweiten Versuch scheint der Beitrag verloren zu sein. Was ist das?

Merkwürdig ist das. Das hatte ich noch nicht. Wohl aber den Effekt (mit demselben Opera), dass die Seite beim Klicken auf "Vorschau" gleich wieder zum Text-Eingabefeld springt. Zur Posting-Vorschau darüber wäre schlauer.

Ciao,
Martin

[Auge]

Hallo

Beim Klick auf "speichern" zuckt diese Schaltfläche weg.

kann ich bestätigen, ebenfalls mit Opera 12.16 unter Linux.

Mit Firefox unter Windows 7 kann ich das nicht beobachten.

Beim zweiten Versuch scheint der Beitrag verloren zu sein. Was ist das?

Merkwürdig ist das. Das hatte ich noch nicht. Wohl aber den Effekt (mit demselben Opera), dass die Seite beim Klicken auf "Vorschau" gleich wieder zum Text-Eingabefeld springt. Zur Posting-Vorschau darüber wäre schlauer.

Das trifft auch auf den Firefox zu. Allgemein halte ich es nicht für günstig, den Threadbaum zwischen Posting(vorschau) und Eingabefeld anzuzeigen. In der Vorschau ist es zudem völlig falsch, zum Formular zu scrollen/springen, wenn ich doch explizit die Vorschau sehen will. Bei längeren Threads wird das schnell zur Scrollorgie.

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

Das trifft auch auf den Firefox zu. Allgemein halte ich es nicht für günstig, den Threadbaum zwischen Posting(vorschau) und Eingabefeld anzuzeigen. In der Vorschau ist es zudem völlig falsch, zum Formular zu scrollen/springen, wenn ich doch explizit die Vorschau sehen will. Bei längeren Threads wird das schnell zur Scrollorgie.

Dafür gibt es schon eine issue.

Bis demnächst
Matthias

[Auge]

Hallo

Das trifft auch auf den Firefox zu. Allgemein halte ich es nicht für günstig, den Threadbaum zwischen Posting(vorschau) und Eingabefeld anzuzeigen. In der Vorschau ist es zudem völlig falsch, zum Formular zu scrollen/springen, wenn ich doch explizit die Vorschau sehen will. Bei längeren Threads wird das schnell zur Scrollorgie.

Dafür gibt es schon eine issue.

Apropos Threadbaum in der Seite mit dem Postingformular und damit auch in der Vorschau. Kann es sein, dass in diesen Seiten der Threadbaum eine andere HTML- und/oder Klassenstruktur hat, als „draußen“? Mit ist nämlich folgendes aufgefallen. Ich habe das in einem Thread vorgeschlagene User-CSS, mit dem das aktuelle und die bereits gelesenen Postings stärker hervorgehoben werden, eingebaut und angepasst.

header.visited, header.visited h3 a{color:#d4d4d4} /* besuchte Beiträge ausgrauen */
header.visited .author{color:#d4d4d4} /* besuchte Beiträge ausgrauen */
header.visited .details>a{color:#d4d4d4 !important;} /* besuchte Beiträge ausgrauen */
.thread header .votes{color:#666;} /* besuchte Beiträge ausgrauen */

li.cf-tag{background: #eaf7fb !important; border-color: #89b3cb !important} /*tags unauffälliger */

article.thread.posting header.active {border:1px solid #49939b;} /* aktuell geöffneten Beitrag hervorheben */

Das funktioniert in den Übersichten und das funktioniert in der Ansicht des Postings. Wo die Regeln nicht angewendet werden, ist die Seite mit dem Formular und mit der Vorschau. Das mag so gewollt sein. Die endgültige Struktur steht ja auch noch nicht felsenfest fest, wie hier an mehreren Stellen zu lesen war. Gibt es einen Zeitplan, mit dem ich abschätzen kann, wann es sich lohnt, die nötigen Änderungen (einmalig) durchzuführen?

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

Apropos Threadbaum in der Seite mit dem Postingformular und damit auch in der Vorschau. Kann es sein, dass in diesen Seiten der Threadbaum eine andere HTML- und/oder Klassenstruktur hat, als „draußen“?

Ja, und auch dafür gibt es die issue schon.

Gibt es einen Zeitplan, mit dem ich abschätzen kann, wann es sich lohnt, die nötigen Änderungen (einmalig) durchzuführen?

Nein. Ich finds schade, dass viele schon mit dem User-CSS arbeiten. Viele Hinweise und Anregungen werden mit Sicherheit in das allgemeine CSS eingearbeitet werden, die dann gar nicht von allen wahrgenommen werden.

edit bzw. sind schon eingearbeitet, nur noch nicht online

Vielleicht sollten wir bei jeder CSS-Änderung die User-CSSe auskommentieren. /* wegen Änderungen am allgemeinen CSS deaktiviert */ Aber da man Kommentare nicht schachteln kann, ist die einfachste Lösung löschen ;-)

Bis demnächst
Matthias

[Auge]

Hallo

Gibt es einen Zeitplan, mit dem ich abschätzen kann, wann es sich lohnt, die nötigen Änderungen (einmalig) durchzuführen?

Nein. Ich finds schade, dass viele schon mit dem User-CSS arbeiten.

Da der Threadbaum in mancher Hinsicht (momentan) wirklich unleserlich ist, war das echt notwendig.

Viele Hinweise und Anregungen werden mit Sicherheit in das allgemeine CSS eingearbeitet werden, die dann gar nicht von allen wahrgenommen werden.

edit bzw. sind schon eingearbeitet, nur noch nicht online

Solange es nicht online ist, möchte ich auch mein Behelfs-User-CSS behalten.

Vielleicht sollten wir bei jeder CSS-Änderung die User-CSSe auskommentieren. /* wegen Änderungen am allgemeinen CSS deaktiviert */ Aber da man Kommentare nicht schachteln kann, ist die einfachste Lösung löschen ;-)

Wenn die Änderungen ausreichend dokumentiert werden, sollte das nicht nötig sein. Dazu würde es mMn reichen, wenn nach einer Änderung der Struktur und/oder des CSS in einem Posting auf die Commitmessages samt den dazugehörigen Diffs verwiesen wird. Wer ein User-CSS benutzt, sollte damit etwas anfangen können und wer zu dieser Zeit abwesend ist, kann auf Rückfrage auf den entsprechenden Thread verwiesen werden.

Tschö, Auge

[Camping_RIDER]

Aloha ;)

Vielleicht sollten wir bei jeder CSS-Änderung die User-CSSe auskommentieren. /* wegen Änderungen am allgemeinen CSS deaktiviert */ Aber da man Kommentare nicht schachteln kann, ist die einfachste Lösung löschen ;-)

User-CSSe löschen, wie? Hehe, ich hör schon den Mob mit den Mistgabeln aufziehen xD

Grüße,

RIDER

[Tabellenkalk]

Hallo,

Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:

Sogar Mediawiki unterstützt Lilypond

Gruß
Kalk

[Linuchs]

Hallo,

es geht auch ohne ein Fremd-Programm wie MuseScore. Kleiner Gag: Ohne Probleme können die Noten farbig sein. Es gibt Kinder-Instrumente, z.B. Xylofone, da haben die Töne Farben. Aber nicht genormt ;-)

In einen Container setze ich Noten-Schlüssel und -Linien. Darunter in einem Absatz den Liedtext. Jede Silbe bekommt eine Note, die zum Text absolut positioniert ist (z.B. top:-12pt) und somit in die Notenlinien ragt.

Für Firefox habe ich die Feinabstimmung gemacht, schon bei Opera sitzen die Noten nicht in der richtigen Höhe. Jeder Browser hat eben so seine eigenen Vorstellungen, was 12pt sind. Keine Ahnung, ob auf px mehr Verlass ist.

Mir geht es zunächst darum, die Lieder selbst auszudrucken. Für das Internet kann ich immer noch grafisch das gelungene Ergebnis abgreifen.

Bitte schaut mal den Code an. Kann man die Noten-Platzierung vereinfachen? Dies ist im Editor ganz schlecht lesbar:

M<b><b class=g0>q</b></b>ein s<b><b class=g0>q</b></b>chö-n<b><b class=c1>q</b></b><b><b class=e0>q</b></b>es ...

Linuchs

[Linuchs]

Link vergessen: Samoa-Song

[Auge]

Hallo

Mit Verlaub, ich halte die Lösung für Mist.

Das HTML-Dokument ist wegen der Verwendung des Fonts, der Buchstaben umdeutet, ohne das dazugehörige CSS eine unleserliche Buchstabensuppe.

In einen Container setze ich Noten-Schlüssel und -Linien. Darunter in einem Absatz den Liedtext. Jede Silbe bekommt eine Note, die zum Text absolut positioniert ist (z.B. top:-12pt) und somit in die Notenlinien ragt.

Für Firefox habe ich die Feinabstimmung gemacht, schon bei Opera sitzen die Noten nicht in der richtigen Höhe. Jeder Browser hat eben so seine eigenen Vorstellungen, was 12pt sind. Keine Ahnung, ob auf px mehr Verlass ist.

Du bist keineswegs ein Frischling und solltest wissen, dass pt als Größeneinheit wunderbar als Einheit für Angaben zum Ausdruck geeignet ist aber am und für den Bildschirm nichts taugt. Der hat nämlich „Pixel inside“.

Bitte schaut mal den Code an. Kann man die Noten-Platzierung vereinfachen? Dies ist im Editor ganz schlecht lesbar:

M<b><b class=g0>q</b></b>ein s<b><b class=g0>q</b></b>chö-n<b><b class=c1>q</b></b><b><b class=e0>q</b></b>es ...

… nicht nur im Editor.

Tschö, Auge

[Tabellenkalk]

Hallo,

es geht auch ohne ein Fremd-Programm wie MuseScore.

Die sind aber spezialisiert darauf und haben vermutlich im Durchschnitt mehr Jahre Erfahrung im Notensetzen, als du alt bist.

Kleiner Gag: Ohne Probleme können die Noten farbig sein.

Das kriegt jedes vernünftige Notenprogramm auch hin.

In einen Container setze ich Noten-Schlüssel und -Linien. Darunter in einem Absatz den Liedtext. Jede Silbe bekommt eine Note, die zum Text absolut positioniert ist (z.B. top:-12pt) und somit in die Notenlinien ragt.

Murx, was ist mit Silben auf die mehrere Noten kommen? Und umgekehrt?

Für Firefox habe ich die Feinabstimmung gemacht, schon bei Opera sitzen die Noten nicht in der richtigen Höhe. Jeder Browser hat eben so seine eigenen Vorstellungen, was 12pt sind. Keine Ahnung, ob auf px mehr Verlass ist.

Browser sind einfach das falsche Werkzeug dafür.

Mir geht es zunächst darum, die Lieder selbst auszudrucken.

Also nicht Bastelei, sondern zielorientiert.

Für das Internet kann ich immer noch grafisch das gelungene Ergebnis abgreifen.

Z.B. PDF-Dateien?

Bitte schaut mal den Code an.

Nö. Bitte schau mein anderes Posting in diesem Thread an.

Gruß
Kalk

[Gunnar Bittersmann]

Bitte schaut mal den Code an.

Hab ich kurz. Es kam weder <ruby> noch <table> vor. Wieder weggeschaut.

LLAP

[Felix Riesterer]

Lieber Linuchs,

kennt Dein Verständnis von musikalischer Notation auch Rhythmus...?

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber Linuchs,

es geht auch ohne ein Fremd-Programm wie MuseScore.

ja, sogar mit live anhören und mitlesen im Browser.

Liebe Grüße,

Felix Riesterer.

[mark]

Hi,

eine Schrift stößt bei Musiknotation schnell an ihre Grenzen. Ich habe mal vor einigen Jahren die Entwicklung ein wenig beobachtet. Meiner Erfahrung nach gibt es da aber nichts brauchbares, außer, du zeigst die Partitur als Vektorgrafik an.

Es gibt ein paar Javascript-Anwendungen, die versuchen, mit mehr oder weniger Erfolg, das Musicxml-Format zu rendern. Der Vorteil ist hier, dass die meisten Musikschreibprogramme (Finale, Sybelius, Coda... Musicxml-Export nativ unterstützen). http://www.musicxml-viewer.com/

oder eine Library: https://code.google.com/p/score-library/downloads/list

Für ABC-Notation gibt es http://www.vexflow.com/

Dann gibt es noch die aufwendige Variante: http://scorerender.abelcheung.org/demo/demo-lilypond/. Zugleich ist es aber auch die Variante mit den besten Ergebnissen und unterstützt ABC-Notation, MusicXML-Notation, GUIDO und wie sie sonst noch alle heißen. Lyrics werden somit ebenfalls unterstützt. Diese Anwendung benötigt externe Renderer wie z.B.: http://lilypond.org/ Du brauchst also Admin-Rechte auf deinem Server, oder dein Serverbetreiber muss so nett sein und dir Lilypond installieren.

... aber, wie gesagt, richtig brauchbares gibt es in diesem Bereich leider noch nicht.