13.10.2016 | International Summer School

Webbasierte Notendarstellung

Von kodierten Noten zum Notensatz

Slides: https://slides-iss.adwmainz.net/visualisierung/notendarstellung/

Anna Neovesky | @digicademy | digicademy | CC-BY 4.0

Überblick

1. Digitale Musikwissenschaft
2. Kodierung von Noten
3. Notendarstellung mit Verovio
4. Praxisbeispiel

01

Digitale Musikwissenschaft

Bereiche und Forschunsgfelder der Digitalen Musikwissenschaft

• Digitale Musikeditionen
• Entwicklung von Software und Tools
• Entwicklung von Markup Standards
• OMR (Optical Music Recognition)
• Music Information Retrieval
• Algorithmische Notenanalyse
• Überschneidungen mit Musikinformatik, Medieninformatik

Notensatz (Druck)

• in Forschung und für musikalische Praxis
• freie und komerzielle Software
• z.B. Lilypond, Sibelius
• LaTex Paket MusiXTex

Frescobaldi Lilypond Musik- und Texteditor. Bild: lilypond.org

Notendarstellung im Web

• Zentral für Digitale Editionen
• Bilddarstellung vs. "on the fly" generierte Inhalte
• Softwarebibliothek zur graphischen Darstellung von Noten im Web: Verovio
• Grundlage für Notendarstellung: Kodierung

Screenshot Website beethovens-werkstatt.de

03

Kodierung von Noten

Standards

• musicXML
• MEI (Music Encoding Initiative)
• Plaine and Eaise Code

musicXML

• von Unternehmen publiziert, frei lizenziert
• unterstützt von allen gängigen Notensatzprogrammen

Beispiel für Kodierung

Dokumentation und Beispiele: musicxml.com

MEI

• Standard für kritische Musikeditionen (analog zu TEI für Text)
• Dokumentation und Einführung:
  music-encoding.org
• MEISE Editor für MEI

Plaine and Easie

				@clef:G-2
@data:'A
				
			

Weitere Formate

• Humdrum
• Notation Interchange File Format (NIFF)
• Musical Instrument Digital Interface (MIDI)

Formate und Einsatzgebiete

• Austauschormat
• Erstellung Digitaler Editionen
• Erstellung von Noten für die musikalische Praxis
• Auszeichnung von kurzen Sequenzen

03

Notendarstellung mit Verovio

Verovio

Music notation engraving library

• "Verovio is a fast, portable and lightweight open-source library for engraving Music Encoding Initiative (MEI) music scores into SVG"
• Entwickelt von Laurent Pugin / RISM Schweiz

Screenshot verovio.org

Überblick über Funktionalitäten

• Notendarstellung
  • im Webbrowser (JavaScript Toolkit)
  • für lokale Erstellung von Notensatz (Python library, Command line tool)
• Audio Ausgabe
• Konvertierungstools zwischen verschiedenen Kodierungen

Code Repository: github

Verovio JavaScript Toolkit

Was macht es?

SVG

Scalable Vector Graphics

• XML-basiertes Format
• vom W3C empfohlene Spezifikation zur Beschreibung von Vektorgraphiken
• Bildbeschreibung: Pfade

Codebeispiel SVG

SVG

Vorteile

Einbindung in die Website

Screenshot verovio.org

05

Praxisbeispiel

Code

• codepen oder .txt
• Minimale Einbindung des JavaScript Toolkits

Plaine and Easie Code

Werte

					var data = "@clef:\n\
@keysig:\n\
@timesig:\n\
@data";
				

Initialisierung

• nötige Eingabe: Notenwerte

• @data:'A/

Notenschlüssel

clef

Kodierung

						@clef:G-2
					

Verovio Anzeige

• Typ des Notenschlüssels
• moderne Notation: + mensurale Notation: -
• Wert von 1-5 für Position (beginnend von unterster Notenlinie)

Versetzungszeichen

keysig

Kodierung

						@clef:G-2
@keysig:xFC
					

Verovio Anzeige

• x für Kreuz, b für Be
• Angabe der Noten in Großbuchstaben

Takt

timesig

Kodierung

						@clef:G-2
@keysig:xFC
@timesig:4/4
					

Verovio Anzeige

• Taktangaben mit / als Trennungszeichen
• Mensuralzeichen mit Kleinbuchstaben

Noten

data

Kodierung

						@clef:G-2
@keysig:xFC
@timesig:4/4
@data:'AA''CDE'CDD

Verovio Anzeige

• Oktavensymbol: ' für eingestrichene Oktave (c'-b') für höhere jeweils '' für tiefere Komma ,
• Notenwerte: Großbuchstaben (C,D,E,F,G,A,B)

Noten - Rhythmus

data

Kodierung

						
@clef:G-2
@keysig:xFC
@timesig:
@data:'2A4A''CD4.E'8CDD/"
						
					

Verovio Anzeige

• Standardwert: Viertelnote
• rythmische Angabe vor den Notenwert
• einstellige Zahl
• z.B. 2 für halbe Note, 4 für Viertelnote, 8 für Achtelnote, 6 für 16tel Note
• Punktierung nach Zahlenwert (z.B. 4.)
• jeweils gültig bis zur nächsten Angabe

Noten - Versetzungszeichen

data

Kodierung

						@clef:G-2
@keysig:xFC
@timesig:
@data:'2A4A''nCD4.E'8CDD/
					

Verovio Anzeige

• x für Raute, b für Be
• n für Auflösungszeichen

Noten - Pausen

data

Kodierung

						@clef:G-2
@keysig:xFC
@timesig:
@data:'2A8-4A''nCD4.E'8CDD/=2/
					

Verovio Anzeige

• Notenpause: Wert für Länge gefolgt von - (z.B. 8- für Achtelnotenpause 2- für Halbnotenpause)
• Taktpause: = gefolgt von Zahlenwert für Pause mit x Takten (z.B. =1)

Noten - Bögen und Bindungen

data

Kodierung

						@clef:G-2
@keysig:xFC
@timesig:
@data: '2A8-4A''nCD4.E'{8CD+D}/=2/
					

Verovio Anzeige

• Bogen + nach erstem Notenwert
• Bindungen: {}

Noten - Takt und weitere Elemente

data

Aufgabe

Materialien

• Codebeispiel auf codepen oder als Text
• Dokumentation PAE
• Hilfe: Oktaven

Notenbeispiel 1

Christoph Willibald Gluck: Prologo

Christoph Willibald Gluck: Prologo, No. 5 Coro: "Lo splendor di sì bel giorno" (Auszug)

Notenbeispiel 2

Christoph Willibald Gluck: Antigono

Christoph Willibald Gluck: Antigono, No. 1 Introduzione (Auszug)

Zusammenfassung

• Verovio JavaScript Toolkit für Notendarstellung im Web
• verschiedene Möglichkeiten der Kodierung für verschiedene Anwendungsfälle

Literature & Software

Literature

• Musikwissenschaft im Digitalen Zeitalter. Symposium der Virtuellen Fachbibliothek Musikwissenschaft, Göttingen 2012, hrsg. von Judith I. Haug. München, Münster und Berlin: Virtuelle Fachbibliothek Musikwissenschaft 2013
• Ruth Reiche, Rainer Becker, Michael Bender, Matthew Munson, Stefan Schmunk, Christof Schöch: "Verfahren der Digital Humanities in den Geistes- und Kulturwissenschaften". DARIAH-DE Working Papers Nr. 4. Göttingen: DARIAH-DE, 2014, S. 19. URN: urn:nbn:de:gbv:7-dariah-2014-2-6
• Verovio: www.verovio.org
• Dokumentation Plaine & Easie Code

Software

• verovio.org

Download

• Präsentation
• License: CC-BY 4.0, Anna Neovesky

Notenbeispiele

Auflösung

var data = "@clef:G\n\
@keysig:\n\
@timesig:3/8\n\
@data:''4C'8B/''4C'8B/8''C8{GF}/4E8D/q6F8EE-/";

 var data = "@clef:G\n\
@keysig:xF\n\
@timesig:3/8\n\
@data:''8{GD}-6-3{GF}{8.G6B}/{B'''C''xGA}4A-/";