scoreSvgObject v1.00, © Gerhard Schacherl, 2025

Freeware-Programm zum Umblättern von Musiknoten

Für Computer- und Grafik-Freaks!

Features

Umblättern der Notenblätter mit Mausklick und Pfeiltasten
Anzeigen/Verbergen von diversen versteckten Elementen einer SVG-Grafik durch Querystring
Funktioniert lokal nur eingeschränkt wegen Sicherheitseinschränkungen der Browser. Umgehen möglich
(siehe: disable CORS).

Demo und Bedienung

Demo "Perger Präludium" (1 Seite, gleiche Datei!)

Demo "Ave Maria" (3 Seiten)

ave-maria_schubert-fuerOrgel001.html Ave Maria, Fr. Schubert, Orgelfassung - Nur Musikstück als SVG-Grafik

Der Bildschirm ist (virtuell) zweigeteilt

zurückblättern	vorblättern
Mausklick links in linker Hälfte	Mausklick links in rechter Hälfte
Taste Pfeil links	Taste Pfeil rechts
Mausklick rechts blättert immer (!) zurück
Button 'index' (wenn sichtbar), führt auf die Index-Seite
Sonstiges
Taste 'i' zeigt die ID's, die im Querystring verwendet werden können

ave-maria_schubert-fuerOrgel001.html?info=pichling Ave Maria, Fr. Schubert, Orgelfassung - Musikstück mit Grafikelementen (Registrierung für Orgel Pichling)

Demo "Wechselbass" (4 Seiten, mehrere Gruppen mit ID's)

wechselbass001.html Wechselbass ohne Anmerkungen

wechselbass001.html?info=ton Wechselbass der Tonika (ID 'ton') gekennzeichnet

wechselbass001.html?info=dom Wechselbass der Dominante (ID 'dom') gekennzeichnet

wechselbass001.html?info=sub Wechselbass der Subdominante (ID 'sub') gekennzeichnet

wechselbass001.html?info=ton,dom,sub Alle Wechselbässe gekennzeichnet

Beachte: auf allen Seiten (hier nur 2) wird der Querystring beibehalten!

Erstellen eigener Notenblätter

SVG-GRAFIK mit Noten

Das Erstellen von Notenblättern als SVG-Grafik nicht ganz trivial, eher für Computerfreaks geeignet!

Der Vorgang ist beschrieben im Programm abcsvg2svgedit

HTML-Datei

Der Prototyp einer HTML-Datei sieht so aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--
<link rel="icon" href="favicon.svg" type="image/x-icon"/>
-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>


<body>
<!-- in object data das SVG einsetzen -->
<object id="svg-object" data=".svg"  type="image/svg+xml">
</object>

<script src="readQuerystringObject.js"></script>

<script>
var next = ".html";
var previous = ".html";
var index = ".html";
</script>

</body>
</html>

In object - data den Dateinamen der SVG-Datei einsetzen

Im script nur die notwendigen Variablen belassen und mit Dateinamen ergänzen

JS-Datei und CSS-Datei

Folgende Dateien müssen im selben Ordner wie die HTML-Datei sein:

readQuerystringObject.js

Versieht ein SVG mit einem viewBox - Attribut, kontrolliert die ID's der Gruppen, setzt unsichtbare Button für Navigation

style.css

Formatiert object und Buttons