ganze Partitur als Einzeiler-Grafik zum horizontalen Rollen?

• Nov 20, 2022 - 11:26

Moin,

mit Musescore erzeuge ich mp3-Dateien zum Üben für Chöre. Jede Stimme hat eine Datei, alle Dateien biete ich zum synchronen Abspielen auf einer Webseite an. Jede Stimme kann ihre Spur lauter stellen und dabei die anderen Stimmen hören. Außer einem Browser keine Software bei den Sängern erforderlich.

Für die optische Unterstützung wäre es ein Highlight, das System (die zusammengehörenden Stimmen) als Grafik unter einem Marker ablaufen zu lassen (nach links verschieben).

Habe aber keine Möglichkeit gefunden, die Breite einer Seite auf vielleicht 2m (Meter) einzustellen, um sie dann als Grafik zu exportieren.

Gibt es da einen Trick? Very nice to have.

Zur Zeit mache ich das sehr grob mit einer Blockgrafik, über die ein Zeiger Läuft (Anlage). Und der ist ungenau.

Lieben Gruß und danke fürs Mitdenken,
Shanty-Kalle

Attachment Size
Bildschirmfoto vom 2022-11-20 12-24-56.png 76.45 KB

Comments

• Nov 20, 2022 - 21:09

Hast du die Webseite selbst erstellt?
In der Regel kannst du benutzerdefinierte Seitenstellungen ja unter Formatierungen->Seiteneinstellungen... angeben. In der Tat scheinen Maximalangaben dort aber begrenzt zu sein, so dass du vermutlich für "Übergrößen" wie zwei Meter plus analoge Länge externe Hilfsmittel benötigst.
Mit dem, was ich gerade auf meinem Rechner installiert habe, habe ich eine Partitur als SVG exportiert, Größe und Skalierung mit Inkscape geändert und als PNG-Datei exporitiert (erster Anhang).
Da diese Bildadatei aber meine Rechnerleistung auffraß, habe ich die geänderte SVG-Datei mit Inkscape noch einmal gespeichert (zweiter Anhang) und mit Gimp als jpg-Datei gespeichert (dritter Anhang).
Kann aber gut sein, dass dies auf aktuellen Rechnern flüssiger läuft oder professionellere Grafikwerkzeuge gibt.

Attachment Size
Skalieren.png 2.56 MB
Skalieren1.svg 82.9 KB
Skalieren1.jpg 1.69 MB

Reply

• Nov 21, 2022 - 02:22

Ich glaube, für das Skalieren einer von Musescore exportierten SVG bedarf es kein Programm wie Inkscape.
Da Musescore viewBox verwendet genügt die SVG-Datei in einem Texteditor zu öffnen und width und height anzupassen (ok und ein klein wenig rechnen). In der Skalieren1.svg wäre das width in Zeile 10 und height in Zeile 11. Alle anderen Werte sind relativ zu den viewBox-Einstellungen.
Wie gesagt, ich glaube das es so war. Ein schneller Test scheint meinen Glauben zu bestätigen.

Reply

• Nov 21, 2022 - 12:06

Hallo tuxan,

in Zeile 10 ist doch schon width="200cm" eingetragen. Das vergrößert aber offenbar nur die Ansicht und schafft keinen Platz für viele Takte. Habs auf 30cm geändert, nun passt es verkleinert auf den Bildschirm.

Okay, jetzt könnte ich einzelne Systeme ausschneiden, aber das erste und letzte hat Takte mit anderer Breite, das zerschießt mir die Prozentangabe, mit der ich die „Notenrolle“ weiterrollen muss. Die Audio-Spur liefert mir 04:03 min, das sind 100% auf der (zusammengestzen) Grafik, die muss knallhart gleichmäßig sein.

Ja, ich kann messen und Breiten pro Einzelgrafik verstellen, aber irgendwann ist meine Bereitschaft zu Kompromissen erschöpft. Und das dann beim nächsten Lied wieder ...

Reply

• Nov 21, 2022 - 15:45

Ich hatte ja weiter unten einen Tip für gleichlange Takte, der allerdings bei ungeraden n-Tolen nicht funktioniert.
Aber eine Idee habe ich noch:
Wenn Du die Musescoredatei als MusicXML exportierst und mit musicxml2ly ¹) in eine Liliypond-Datei verwandelst, kannst Du proportionale Notation ²) generieren und als SVG, PNG, etc. ausgeben ³).

¹) https://lilypond.org/doc/v2.23/Documentation/usage/invoking-musicxml2ly
²) https://lilypond.org/doc/v2.23/Documentation/notation/proportional-nota…
³) https://lilypond.org/doc/v2.23/Documentation/notation/alternative-outpu…

Reply

• Nov 21, 2022 - 14:48

Vereinfacht gesagt: Alle Angaben der Elemente beziehen sich auf die Größe der viewBox. Mit den width und height der SVG gibst Du die Größe in der Ausgabe an. Die viewBox skaliert dann zu dieser Angabe.
Bei Ausgabe auf einen Bildschirm sollten cm wohl die falsche Größenangabe sein. Pixel, Em oder Prozent sind da wohl sinnvoller.
Evtl. bekommst Du da ein paar Tipps: https://www.drweb.de/svg/

Zur Breite der Takte habe ich weiter unten (im Edit) einen Tip für Dich.

Ja, es macht nur Sinn, wenn man das automatisieren kann, sonst ist der Aufwand einfach zu groß.
Ein Tip, wobei ich nicht weiß, ob es Dir hilft. SVG kann man mit JS animieren. Von daher kommt es Dir entgegen. Ab die schiere Menge an Elementen spricht dann aber auch wieder dagegen.
Man müßte die Struktur analysieren.
Ich sehe gerade, das jeder Takt als Notenlinie eine taktbreite Polylinie ist. Das bringt mich auf die arbeitsaufwändige Idee, in einem Vektorgrafikprogramm die Takte in der senkrechten zu gruppieren (und benennen). Denen könnte man dann schonmal eine andere Hintergrundfarbe, wenn aktiv, vergeben. Ist aber nicht massentauglich.
Ich würde die Grafik nur horizontal unter einem festen 'Zeiger' durchschieben.

Reply

• Nov 21, 2022 - 09:25

Danke für die Antwort, die drei Grafiken sehe ich per Firefox nicht, muss sie erstmal runterladen und mit Gimp anschauen.

> Hast du die Webseite selbst erstellt?

Ja, ich bin Softwareentwickler und Webmaster. Seit Jahren nehme ich an Chorprojekten teil, organisiere „Singen unter Segeln”, Wochentörns für Shanty-Sänger und -Musikanten und habe immer schon Textblätter und Liederbücher gemacht mit einer Audio-Spur, meist aus youtu.be generiert.

Im trostlosen Corona-Jahr 2020 hatte ich die Zeit, mich näher mit MuseScore zu beschäftigen und stellte fest, dass die einzelnen Stimmen genau gleichlange und gleichgroße mp3-Dateien ergeben. Hatte ich nicht erwartet, ich dachte, Pausen werden zum Komprimieren genutzt.

Dann der Versuch, mehrere Audio-Dateien auf einer Webseite gleichzeitig ablaufen zu lassen. Ob ein Browser das überhaupt schafft? Ja, kein Problem beim Firefox. Nächster Schritt: Per Javascript die Audios gleichzeitig zu starten, zu stoppen, auf Anfang zurücksetzen.

Das klappte auch, nun war noch zu klären, wie man Teile üben kann, ohne immer ganz von vorn anzufangen. HTML5 / Javascript bietet für den Audio-Tag sehr viele Möglichkeiten, auch die Zeit abzurufen und irgendwo aufzusetzen mit Zeitangabe. Da kann man nicht nur - wie bei Karaoke - den Text markieren, sondern auch auf den Text klicken, um an der Stelle die Audio-Dateien zu starten.

Leider habe ich das in meinem Hobby-Chor-Umkreis nicht wirklich weitergeben können, das gemeinsame Singen war ja für mehr als zwei Jahre verboten. Vielleicht bekomme ich jetzt eine zweite Chance.

Sehr, sehr gerne möchte ich mit Chorleitern in Kontakt kommen zwecks Erfahrungsaustausch. Nicht gelöst ist etwa der vierstimmige Gesang mit versetzten Texten. Dafür könnte der angefragte „Notenstreifen“ (mit Texten) gute Dienste leisten, vergleichbar mit Rollen in mechanischen Musikinstrumenten.

Hier mal zwei Live-Beispiele zum Ausprobieren:
http://osmer.de/musik/liedtexte/siyahamba.htm (Online-Chor)
http://osmer.de/musik/liedtexte/dance_the_night_away.htm (Karaoke)

Reply

• Nov 21, 2022 - 11:45

Hallo kuwitt,

herzlichen Dank für deine Mühe.

Kann die Datei „Skalieren1.svg“ mit Firefox sehen. Da sind vier Takte horizontal, darunter die nächsten vier. Die stärkste FF-Verkleinerung [Strg][-] reicht nicht, um die vier Takte nebeneinander zu sehen. Dann könnte ich sie als Schnappschuß vom Display schießen und auf der Webseite hintereinander einfügen. Leider geht beim Schnappschuss die wunderbare SVG-Komprimierung verloren.

Gimp öffnet die Datei mit 6,25% „Vergrößerung“, macht erstmal den Eindruck, als ob alle Notenzeilen auf einer Seite stehen. Bei Umstellung auf 100% muss ich horizonzal und vertikal scrollen. Leider kann Gimp SVG nur importieren, nicht wieder ausgeben.

Vielleicht hat doch noch jemand einen Trick, dass MuseScore eine Partitur als eine SVG-Grafik exportiert ohne Umbruch.

Wichtig: Alle Takte müssen gleiche Breite haben, sonst kann ich deren Ablauf nicht mit der Audio-Masterspur synchronisieren. Ich muss ja Sekunden in Prozent der Grafik umrechnen.

Reply

• Nov 21, 2022 - 01:50

Leider schreibst Du nicht, was für Grafik Du am Ende haben willst. Vektor oder Bitmap.

Gibt es da einen Trick? Very nice to have.

Naja, vielleicht.
Ich habe gerade eine Partitur mit ca. 200 Takten als eine Grafik erstellen können.
Probiere mal folgendes:
- kontinuierliche Ansicht
- Bilderfassung umschalten
- <durchstrichen> den entstehenden Auswahlrahmen über die ganze Partitur ziehen (Ansicht kleiner machen, und dann mit der gedrückten mittleren Maustaste die Ansicht verschieben)</durchstrichen>
besser
rechte Maustaste -> automatisch auf Seitengröße einstellen
- Strg-C (rechte Maustaste -> kopieren)
- ins Grafikprogramm (als neues Bild) einfügen

Mit Gimp hat das gut funktioniert, bei Inkscape hatte ich alles schwarz. Vielleicht nur eine Einstellungssache. Ist zu spät für weitere Tests.

Reply

• Nov 21, 2022 - 10:22

Ergänzung: Lang ist's her, da habe ich eine Partitur in einzelne Takte zerschnitten, jeder Takt eine Grafik. Ziel: Die Partitur auch auf einem Smartphone sichtbar zu machen.

In einer HTML-Datei hat das den Vorzug, dass man vergrößern kann und die Takte neu umgebrochen werden, also nicht über den rechten Rand verschwinden wie etwa beim PDF.

Das Interesse beim damaligen Chor war mäßig bis saumäßig, hab da auch nicht lange ausgehalten.

Reply

• Nov 21, 2022 - 12:44

HEUREKA! Hab was gefunden

viel zu einfach, um wahr zu sein. Die „Schnappschuss“-Schaltfläche (Kamera-Symbol in der Wrkzeugleiste) ist mein Freund, wenn ich zuvor die „kontinuierliche Ansicht” gewählt habe.

Da kann man ein Rechteck aufziehen, zwischendurch waagerecht scrollen und das Rechteck bis zum Schluss des Liedes vergrößern.

Dann rechte Maustaste > Speichern als (Bildmodus) > Skalierbare Vektorgrafiken > Save

Tatsächlich, die ganze Partitur in einer Zeile.

Nun muss ich nur noch den Trick finden, alle Takte gleich breit zu machen ...

Reply

• Nov 21, 2022 - 14:04

Was soll man sagen. Jede Beschreibung hat seinen Umfang. Und es sind sehr, sehr viele Elemente zu beschreiben. SVG Dateien sind reine Textdateien. Schau mal rein.
Wenn Du das in brauchbarer Ansicht mit Pixelbildern machen willst, sollte die Dateigröße komprimiert bei so 15, 20, 50 MB liegen.
Deine PNG war vielleicht auch nur so klein, weil zum einen vielleicht die Hälfte fehlt und die Einstellungen für den Export zu klein waren.
Wobei 7MB ist doch inzwischen nichts mehr. Du muß nur sicherstellen, das die vor den MP3s geladen wird und dann kannst Du die mit CSS und JS waagerecht durch den Screen rollen.
Tipp: Wenn Du immer gleichbreite Takte brauchst, erstelle Dir eine 1-Zeile Instrument, fülle jeden Takt mit der kleinsten Note auf (z.B. 1/16). Entweder als Pause oder stummer Note. Alle Elemente mit Hintergrundfarbe versehen (unsichtbar sollte nicht funktionieren), damit sie nicht sichtbar sind. Ich hoffe, Du verstehst, was ich meine.

Übrigens, Du machst es etwas zu umständlich. Ich habe auf der schnelle ein Video erstellt, wie man es am besten macht: https://youtu.be/1Ea9D70vcdk
Achso, noch ein paar Dateigrößen dazu:
SVG-Datei: 4,7M
PNG: 1,2M
MSCZ: 77.7k

Die PNG-Datei ist brauchbar geworden (bis auf das Fehlende, siehe Video). Die Daten dazu:
~> identify Porhys_v1-0.png
Porhys_v1-0.png PNG 76451x1595 76451x1595+0+0 8-bit sRGB 1.19402MiB 0.000u 0:00.000

Edit: Zur Taktbreite hat Kuwitt und ich hier schon einmal einen Tip gegeben: https://musescore.org/de/node/305987
Edit2: Sobald ungerade n-Tolen drin sind, werden die Takte nicht gleich lang. In dem erwähnten Tip-Beispiel habe ich jetzt 64-tel und die Zeiten stehen nicht untereinander, nur die Dateigröße nimmt drastisch zu. :-(

Reply

• Nov 23, 2022 - 22:46

Hallo tuxan,
habe ein Einzeilen-Instrument hinzugefügt und die Takte mit 32stel Pausen gefüllt. Damit kann ich Takte mit wenig Noten dehnen, aber einige sind dennoch breiter. Okay, ich habe größere Schrift für die Liedtexte gewählt und die Notenrolle ist bei 20em Höhe (CSS-Angabe) 36.159px breit.

Das Prinzip des Rollens funtioniert nun, aber es ruckelt und es ist nicht taktgenau.

Das Ruckeln - die Anzeige fließt nicht, sondern springt - kommt womöglich daher, dass ich versuche, 50 mal pro Sekunde die Rolle etwas weiter nach links zu schieben. Da wird wohl die ganze Breite jedesmal neu berechnet anstatt nur der sichtbare Bereich und nur jeder zweite oder dritte Schiebe-Takt ausgeführt.

Dass die erklingenden Noten zwar in der Nähe, aber nicht genau unter dem Marker sind, stört natürlich, aber bei der variablen Taktbreite habe ich keine Chance. Mal sehen, ob mir noch was einfällt.

Reply

• Nov 24, 2022 - 13:27

Das mit den gleichbreiten Takten ist so eine Sache. Musescore legt verständlicherweise das Augenmerk auf ästhetisches Druckbild, was die Taktbreite variable macht. Bei dem Tipbeispiel (das eine andere Aufgabenstellung hatte) hatte ich glücklicherweise eine Triole drin und sah dadurch, das sich die Taktbreite anders ändert, als erwartet. Für gleichbreite Takte kommt man wohl nicht um proportionaler Notation herum.

Achja, das habe ich nicht explizit erwähnt. Das Hilfsinstrument natürlich nach dem Export aus der SVG löschen, da die die Dateigröße nochmal stark erhöht.

Zum Ruckeln:
Hast Du das mit dem SVG oder mit einem PNG oder mit beiden getestet? Wenn letzteres, gibt es Unterschiede beim ruckeln?
Wird es besser, wenn Du den Aktualisierungsintervall vergrößerst? Du schriebst etwas von 20ms. Das entspräche einem Video mit 50fps. ich denke die 24/25fps von Filmaufnahmen sind im Grunde ausreichend, so das ein Intervall von 40ms völlig ausreichend ist (ist ja optisch und nicht akustisch, wo man unter 12ms sein sollte).

Wie ist die Grafik eingebunden? Als Hintergrundgrafik per CSS? {background-image: url(./images/partitur.svg);} und dann mit background-position-x verschieben? (https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x)
Diese Variante verändert nicht die Anordnung der Elemente im Browserfenster und sollte imho damit nicht zur Neuberechnung des Layouts führen.

Evtl. doch die Grafik zerschneiden und die (vorgeladenen) Einzrelgrafiken entsprechend weiterverarbeiten.
Man könnte natürlich auch noch über eine Layoutänderung nachdenken. So daß Du die fertigen Seiten, die Du aus Musescore bekommst, verwendest. Eine Kurzbeschreibung:
Musescorenotenblatt als Hintergrundgrafik anzeigen. Im Vordergrund eine PNG-Grafik als Zeiger waagerecht per JS bewegen (PNG wegen transparenz, falls der Zeiger etwas überstreicht, was keinen Zeiger zeigen soll). Und im Hintergrund die Grafik nach X-Takten per JS senkrecht bewegen. Das hat den Vorteil, das der Aktualisierungsintervall hauptsächlich auf einer kleineren Grafik angewendet wird. Wenn der Zeiger nach links springt, die Partitur nach oben verschieben. Bleibt noch das Problem der Taktbreite: In Musescore nach X Takten einen Zeilenumbruch und dann mit stauchen/stretchen die Taktstriche annähernd untereinander bringen.

Oder, ...
Viel Spaß

Edit:
Ähm, habe ich gerade entdeckt: Using CSS animations
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_C…
Könnte mir vorstellen, das dadurch der Browser auf die Animation vorbereitet ist und das etwas anders handhabt.

Reply

• Nov 26, 2022 - 11:20

Hallo tuxan,

danke für deine Tipps. Habe den momentanen Stand (26.11.2022) meines Experiments ins Netz gestellt:
http://osmer.de/musik/liedtexte/you_took_the_words_right_out_of_my_mout…

Der Firefox hat offenbar ein Grafik-Limit von ca. 32.000 pixel Breite, darüber zeigt er die Grafik nicht an. Falls sie fehlt, die Darstellung der Webseite mit [Strg][-] verkleinern.

Im SelfHTML Forum hat jemand festgestellt:

„MuseScore ist übrigens nicht gut geeignet für deine Zwecke. Es ist kostenlos, sicher. Die Autoren haben vielleicht Ahnung von Musik, aber keine gute Ahnung von SVG und das Ergebnis ist ein 6,3MB großes Datenmonster voller Redundanzen und mit Zahlenwerten mit unsinnigster Wahl der Nachkommastellen.“
Quelle: https://forum.selfhtml.org/self/2022/nov/26/ff-7m-breite-grafik-wird-lo…

„Using CSS animations“ kannte ich noch nicht, wäre vielleicht für ein anderes Projekt brauchbar. Doch hier gibt ja eine MP3 Datei den Fortschritt vor. Da man MP3 anhalten und neu aufsetzen kann (sonst müsste man beim Üben jedesmal vorne anfangen), ist ein selbstständiges Schieben der Grafik leider nicht brauchbar. Wäre so einfach umzusetzen ...

Das Ruckeln ist weg, denn ich nutze window.requestAnimationFrame( movePartitur ) statt setInterval

Liebe Grüße, Shanty-Kalle

Reply

• Nov 26, 2022 - 13:06

Sieht ja schonmal gut aus.
Hatte Anfangs Probleme beim Abspielen (FF mit NoScript und uBlock Origin). Das Verkleinern der Seite war ein hilfreicher Tip, sollte mit auf der Seite erwähnt werden. Anfänglich wurde die Grafik nicht am Anfang gezeigt, warum auch immer. Es läuft allerdings nicht synchron.
Bei "Alle zum Start" wird der Positionszeiger an den Anfang der Grafik gesetzt, statt zwischen Taktangabe und der ersten Pause, bei klick auf "Intro" landet der Zeiger zwischen 1und bis 2. Du solltest bei der Berechnung das erste Stück der Grafik rausrechnen.

Zu der SVG-Aussage kann ich nichts sagen, da ich da nur marginale Kenntnisse habe (zum Generieren kleiner Grafiken reichts).

Die "Using CSS animations" hatte ich nur gesehen, als ich auf background-position verweisen wollte. Da ich das nicht brauche, habe ich mich da auch nicht eingelesen und nur einen Hinweis darauf gegeben.

Abschließend sei noch gesagt. Schöne und originelle Arbeit.

Reply

• Nov 26, 2022 - 14:47

Neuer Versuch für Proportionaltakt in Musescore.
Siehe Anhang. Erklärung in der Seitenansicht sichtbar.
Zum testen habe ich noch eine weiße SVG-Datei angehängt. Größe und Farbe läßt sich mit einem Editor einstellen. Die Größe läßt sich dann auch in Musescore noch anpassen.
Ist etwas Mehraufwand, aber mit C&P schnell zu machen.

Edit: Vergessen zu erwähnen. Es gibt immer noch kleinere Abweichungen.

Attachment Size
Proportionaltakt.mscz 17.34 KB
blank_mini.svg 215 bytes

Reply

Do you still have an unanswered question? Please log in first to post your question.