Partitur auf einer Web-Seite einbetten
scorio ermöglicht, Partituren auf einer anderen Web-Seite einzubetten. Dieser Artikel beschreibt, wie man die dafür nötige Score-Box erzeugt und verwendet.
Was ist eine Score-Box?
Eine Score-Box zeigt eine Partitur an, die auf scorio.com geschrieben und veröffentlicht wurde. Benutzer können blättern und die Partitur abspielen. Man kann eine Score-Box beispielsweise in einem Artikel über ein musikalisches Thema verwenden oder den Besuchern seiner Web-Seite eine neue Komposition zeigen. Eine Score-Box kann überall dort verwendet werden, wo JavaScript erlaubt ist.
Hier ist ein Beispiel einer Score-Box mit einer Seite:
Die Funktionalität der Score-Box ist selbsterklärend:
- In der Mitte wird eine Partiturseite angezeigt.
- Die angezeigte Partiturseite ist mit der zugehörigen Partitur auf scorio.com verlinkt.
- Mit den Buttons oben links und rechts kann man durch die Partitur blättern (falls sie mehr als eine Seite hat).
- Unter der Notenansicht ermöglicht eine Abspielleiste die Wiedergabe der Partitur. Wie diese Leiste aussieht, hängt vom Browser-Plugin ab, das MIDI-Dateien abspielt.
In 10 Schritten zur eigenen Score-Box
Um eine Score-Box in die eigene Web-Seite einzubinden, kopiert man im Wesentlichen den Einbettungs-Code aus dem Teilen-Dialog in die eigene HTML-Seite. Hier ist die ausführliche Anleitung:
- Loggen Sie sich bei scorio.com ein
- Öffnen Sie die Partitur, die Sie einbetten wollen, im Editor. Falls Sie noch Änderungen vornehmen, speichern Sie die Partitur danach.
- Öffnen Sie den Teilen-Dialog: Menü > Datei > Teilen.
- Warten Sie, bis der Dialog eine Vorschau der Partitur anzeigt. Dieser Schritt dauert einen Moment, weil die Bilder für die Score-Box im Hintergrund generiert werden.
- Optional: Legen Sie den Ausschnitt der Partitur, der angezeigt werden soll, mit den Positions-Buttons rechts oben im Dialog fest. Sie können den Ausschnitt auch später manuell anpassen. (siehe "Partiturausschnitt manuell anpassen" weiter unten).
- Kopieren Sie den Einbettungs-Code aus dem Dialog. Wenn Sie diesen Schritt vergessen, können Sie den Teilen-Dialog später wieder öffnen, um das Kopieren nachzuholen. Von der Wahl des Ausschnitts abgesehen, ist der Einbettungs-Code für eine bestimmte Partitur immer gleich.
- Klicken Sie "Aktivieren", um die Score-Box zu aktivieren. Dieser Schritt speichert die Bilder der Partiturseiten, damit sie von anderen Web-Seiten aus verwendet werden können.
- Öffnen Sie Ihre Web-Seite in einem Text-Editor. Wichtig ist, einen richtigen Text-Editor zu verwenden, der den HTML-Quelltext der Seite (z.B. <head>, <body>) anzeigt, und keinen HTML-Editor, der automatisch Zeichen ersetzt.
- Fügen Sie den zuvor kopierten Einbettungs-Code an der Stelle ein, an der die Score-Box angezeigt werden soll.
- Speichern Sie die Datei und testen Sie sie in einem Web-Browser.
Optional: Partiturausschnitt manuell anpassen
Bei einer Partitur mit einer Seite, kann es nützlich sein, nur einen Ausschnitt der Seite anzuzeigen, z.B. eine bestimmte musikalische Phrase. Dies erreicht man, indem man den Ausschnitt vor dem Kopieren des Einbettungs-Codes im Teilen-Dialog festlegt oder indem man den Einbettungs-Code manuell anpasst.
Hier ist der Quell-Code der obigen Score-Box:
<script type="text/javascript"
charset="utf-8"
src="http://www.scorio.com/sharing/embed.js">
</script>
<script type="text/javascript">
shareConfiguration.set(
"/scorio/scores/scorgle/example+-+will+not+win/fb617decea7581bba34496d269ba7381",
"http://www.scorio.com",
"scorio-storage-prod",
1,
7, 7, 350, 200);
</script>
<noscript>
<a href="http://www.scorio.com/scorio/scores/scorgle/
example+-+will+not+win/fb617decea7581bba34496d269ba7381">
www.scorio.com
</a>
</noscript>
Um den Ausschnitt manuell zu ändern, öffnen Sie Datei mit dem Einbettungs-Code und suchen Sie die letzten vier Argumente der Funktion set. Im Beispiel-Code sind diese Argumente orange dargestellt. Die Zahlen definieren die obere und die linke Ecke des angezeigten Ausschnitts sowie die Breite und Höhe.
Wenn man 200 durch 400 ersetzt, verdoppelt man z.B. die Höhe der obigen Score-Box. Die vier Positionsargumente können fast beliebig verändert werden, da die Bilder der Seiten vollständig gespeichert werden. Der Ausschnitt wird nur mit Hilfe von CSS gesetzt. Für Breite und Höhe müssen Werte größer 0 gewählt werden; für die obere, linke Ecke kann man beliebige ganze Zahlen wählen.
Optional: Styling der Score-Box
Wenn Sie sich mit CSS auskennen, können Sie das Aussehen der Score-Box mit Hilfe der vordefinierten Klassen anpassen. Um beispielsweise die Blätter-Buttons blau einzufärben, definiert man eine CSS-Regel, die das Styling von sc-button teilweise überschreibt:
.<class of some top level element on your page> .sc-button { background: #70A8ED; color: #FFFFFF; }
Sie können das Aussehen der Score-Box ganz nach Ihren Wünschen anpassen. Die HTML-Struktur der Score-Box muss dabei aber erhalten bleiben, um Funktionsstörungen zu vermeiden.
Mehrere Partituren auf einer Web-Seite
Es ist möglich, mehrere Partituren auf einer Web-Seite einzubetten. In diesem Fall sollten außer für die erste Score-Box alle Script-Elemente gelöscht werden, die die Einbettungsbibliothek embed.js nachladen:
<script type="text/javascript" charset="utf-8" src="http://scorio-stage/sharing/embed.js"> </script>
Dadurch wird der von Ihrer Seite verursachte Traffic reduziert.
Welche Beschränkungen gibt es beim Einbetten einer Score-Box?
- Die Score-Box benötigt JavaScript. Daher kann sie auf Seiten, die die Verwendung von JavaScript unterbinden, nicht eingesetzt werden. Dazu zählen z.B. viele Foren. Dort können Sie statt der Score-Box den Share-Link aus dem Teilen-Dialog posten, sofern Links zugelassen sind.
- Die Abspielleiste der Score-Box erfordert einen Browser-Plugin, der MIDI abspielen kann. In vielen Browsern übernehmen der Quicktime- oder der Windows Media Player-Plugin diese Aufgabe. Ist kein passender Plugin verfügbar, so bietet der Browser dem Benutzer an, einen solchen zu installieren.
- Für Safari auf iOS (etwa auf dem iPad) gibt es keinen MIDI-fähigen Browser-Plugin. Daher wird die Abspielleiste dort versteckt.