flipscore

Umblättern von Noten

flipscore Version 1.6, Programmentwickung und Beispiele: © Gerhard Schacherl 2020

VORBEMERKUNG
Wenn Sie mit diesem Programm eigene Notenblätter erstellen wollen, sind folgende Kenntnisse von Vorteil:
html und css (Erstellen von Internetseiten), jpg (digitale Bilder), Javascript (Programmiersprache)

INHALT

Features | Demo-Start | Programm-Bedienung | Download | Eigene Notenblätter

Features

Musiker, insbesondere Pianisten haben of das Problem, ein Musikstück mit mehreren Seiten rechtzeitig umzublättern. Wenn man es alleine nicht schafft, braucht man eine zusätzliche Person.

Das Problem lässt sich mit 'flipscore' auf mehrfache Art lösen:

Zur Rechtlichen Seite des Noten-Umblätterns gibt es ein interessantes Statement bei http://www.sheetmusicsolutions.com - Lösungen - Rechtliches
Hier gibt es auch Links zu professioneller Software.

Demo

flipscore - Demo

(Öffnet in neuem Fenster)

Programm - Bedienung

Auswahl der Noten (Mp3's)

  1. Auf der Index-Seite der Demo entweder "Lieder", "Orgelmusik" oder "Diverse" anwählen.
  2. Mit "NOTEN-AUSWAHL" ein Notenblatt auswählen.
  3. Mit "SONG-AUSWAHL" (wenn vorhanden) ein Mp3 auswählen.

ANMERKUNG: Der Auswahlpunkt "Dona nobis pacem (Kanon)" in "Lieder" ist zunächst nicht möglich!
Erst wenn unter '--- PFAD-AUSWAHL ---' der Pfad './donaNobisPacem' eingestellt wird, wird auch dieses Notenblatt geöffnet.
Das heißt: Man kann im Programm auch eigene Pfade verwenden, wenn die Daten nicht im vorgesehenen Ordner liegen (Näheres siehe unten).

Umblättern der Noten

Tastenbedienung

ZURÜCK VOR
PFEIL-LINKS (ArrowLeft)
PFEIL-AUFWÄRTS (ArrowUp)
BILD-AUFWÄRTS (PageUp)
LEERTASTE (Space)
PFEIL-RECHTS (ArrowRight)
PFEIL-ABWÄRTS (ArrowDown)
BILD-ABWÄRTS (PageDown)
EINGABETASTE (Enter)

Presenter od. Pageflip-Pedal

Steuerung ist möglich, wenn der Presenter, Pageflip-Pedal oder ein ähnliches Gerät eine der obigen Tastendrücke simulieren kann.

Maus, bzw. TOUCH-Bedienung

Für die Maus, bzw. Touch-Bedienung ist der Notenbereich virtuell in eine linke und eine rechte Hälfte geteilt.

Mausklick LINKS od. Touch in der linken Hälfte des Notenbereichs blättert zurück. Mausklick LINKS od. Touch in der rechten Hälfte des Notenbereichs blättert vor.
Mausklick RECHTS blättert immer vor, wenn sich der Mauszeiger im Notenbereich befindet.
Die Mausbedienung lässt sich umstellen mit dem Button . Der Button wird zu .
Danach blättert Mausklick LINKS im gesamten Notenbereich zurück.
Mausklick RECHTS blättert immer vor.

Diese zweite Variante ist besonders geeignet, wenn eine 2. Person umblättert.

Beim Blättern scrollt die Seite automatisch um den richtigen Betrag nach unten, bzw. oben.

Weitere Funktionen

Navigations-Bereich

Der Navigationsbereich kann 1-, 2- od. 3-zeilig sein (Buttons ). Mit Button kann die Höhe auch pixelgenau angegeben werden.

Seitenzahl

Die Gesamt-Seitenzahl des geöffneten Songs erscheint in der Beschriftung eines eigenen Buttons.

Pfade

Der dritte Auswahlpunkt "Dona nobis pacem (Kanon)" ist hier nicht direkt erreichbar und zu Demo-Zwecken in einem anderen Ordner gespeichert. Man kann die PFADAUSWAHL benützen und den Pfad './donaNobisPacem/' auswählen. Dann ist über die SONGAUSWAHL auch "Dona nobis pacem" erreichbar.

Zu Demo-Zwecken (für das Erstellen eigener Notenblätter) sind noch ein paar andere Pfade angegeben. Es kann auch ein eigener Pfad benützt werden, wenn die Datenstruktur gleich ist.

Uhr

Sowohl im Inhaltsverzeichnis als auch in den Notenseiten (*.html) ist eine Uhr eingebaut.

DOWNLOAD und lokale Benützung

Wenn 'Dona nobis pacem' auch funktionieren soll:

Zur Klarstellung die Dateistruktur:

Eigene Notenblätter erstellen - Javascript Code

Notenblätter speichern

Eigene Notenblätter müssen als Bilder gespeichert sein, am besten in einem Unterordner des Programmordners.

Startseite 'index.html' erstellen

Die Startseite 'index.html' ist die Menüseite, von der aus einzelne Notenauswahlseiten angewählt werden können.

'index.html' ist in der Demo so gestaltet, dass mit Tasten navigiert werden kann. Dieses Feature muss nicht verwendet werden. Es kann auch eine ganz einfache Datei mit Links zu den einzelnen Notenauswahlseiten erstellt werden.

Notenauswahlseiten (html - Dateien) erstellen

Jede Notenauswahlseite enthält die Verweise zu den Noten (Bildern) und die Technik des Umblätterns.

Es empfiehlt sich, eine Demo-Datei, z.B.: 'diverse.html' zu kopieren, umzubenennen und damit zu experimentieren oder untenstehenden Code aus dem Musterbeispiel zu verwenden.

Änderungen, die der Anwender vornehmen muss, sind in der folgenden Beschreibung und in der Musterdatei mit gleicher Farbe gekennzeichnet:

VARIABLE für die Musikstücke

<script>
var magnificat = ["Pachelbel",
"magnificat01.jpg",
"magnificat02.jpg"
];
</script>

Im oberen Beispiel ist 'magnificat' die Variable für das Musikstück. Diese Variable wird später in der Dropdownliste "Notenauswahl" verwendet.

'Pachelbel' ist der Ordner, in dem "magnificat01.jpg" (= Seite 1) und "magnificat02.jpg" (= Seite 2) gespeichert sind. Im Musterbeispiel unten bestehen die Musikstücke aus jeweils nur einer Seite.

Dropdownliste "Pfadangaben"

Die Standarddatei 'path.js' hat folgenden Inhalt:

document.getElementById("pfadAuswahl").innerHTML = "\
<option value='./' selected='selected'>--- PFAD-AUSWAHL ---</option>\
<option value='./'>./</option>\
<option value='./donaNobisPacem'>./donaNobisPacem</option>\
<option value='file:///C:/flipscore/'>file:///C:/flipscore/</option>\
<option value='file:///D:/flipscore/'>file:///D:/flipscore/</option>\
<option value='file:///E:/flipscore/'>file:///E:/flipscore/</option>\
<option value='pfadFestlegen'>Eigenen Pfad festlegen</option>";

Sie können sie belassen, anpassen oder durch eine eigene ersetzen. Dann muss sie anstelle von 'path.js' eingebaut werden. Siehe Musterbeispiel.

Der endgültige Pfad zu einem Notenblatt setzt sich zusammen aus dem Inhalt der Variablen 'pfad' (diese Variable kann durch die Drowdownliste 'Pfadauswahl' im Programm neu gesetzt werden), einem allfälligen Ordnernamen (in der Musterdatei 'Diverse'), einem automatisch angefügten '/' und dem Dateinamen. Ordnername und Dateiname siehe Musterbeispiel.

Die Dropdownliste "Pfadangaben" kann auch weggelassen werden, wenn man sie nicht benötigt. In diesem Fall müsste sie aus der Datei gelöscht od. als Kommentar belassen werden. Unbedingt notwendig ist jedoch der Standardpfad. Die Variable 'pfad' befindet sich im Musterbeispiel unten.

Dropdownliste "Notenauswahl"

Die Variablen für die Musikstücke und die Titel der Musikstücke müssen eingetragen werden.
Siehe Musterbeispiel

Dropdownliste "Songauswahl"

Die Pfadangaben für die Songs und die Titel der Songs müssen eingetragen werden.
Beachte den Unterschied zur Notenauswahl:
Nach 'value=' steht nun keine Variable, sondern ein relativer Pfad+Dateiname!
Siehe Musterbeispiel

Musikstücke mit mehr als 20 Seiten

flipscore ist auf max. 20 Seiten pro Musikstück ausgelegt.
Wenn mehr Seiten gebraucht werden, müssen zusätzliche <div> erstellt werden:
Im Musterbeispiel hier, auch hier. Eine zusätzliche Variable muss erstellt werden.

Musterbeispiel

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styleX.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</style>
<script>

var flipscoreBlues = ["Diverse", "flipscore_blues.jpg", ]; var turkeyInTheStraw = ["Diverse", "turkeyInTheStraw.jpg", ];
</script> </head> <body onkeydown="myFunction(event)"> <div class="platzhalter" id="platzhalter"></div> <div class="content" id="content"> <img id="bild1" scr=""></img> <img id="abstand1" scr=""></img> <img id="bild2" scr=""></img> <img id="abstand2" scr=""></img> <img id="bild3" scr=""></img> <img id="abstand3" scr=""></img> <img id="bild4" scr=""></img> <img id="abstand4" scr=""></img> <img id="bild5" scr=""></img> <img id="abstand5" scr=""></img> <img id="bild6" scr=""></img> <img id="abstand6" scr=""></img> <img id="bild7" scr=""></img> <img id="abstand7" scr=""></img> <img id="bild8" scr=""></img> <img id="abstand8" scr=""></img> <img id="bild9" scr=""></img> <img id="abstand9" scr=""></img> <img id="bild10" scr=""></img> <img id="abstand10" scr=""></img> <img id="bild11" scr=""></img> <img id="abstand11" scr=""></img> <img id="bild12" scr=""></img> <img id="abstand12" scr=""></img> <img id="bild13" scr=""></img> <img id="abstand13" scr=""></img> <img id="bild14" scr=""></img> <img id="abstand14" scr=""></img> <img id="bild15" scr=""></img> <img id="abstand15" scr=""></img> <img id="bild16" scr=""></img> <img id="abstand16" scr=""></img> <img id="bild17" scr=""></img> <img id="abstand17" scr=""></img> <img id="bild18" scr=""></img> <img id="abstand18" scr=""></img> <img id="bild19" scr=""></img> <img id="abstand19" scr=""></img> <img id="bild20" scr=""></img> <img id="abstand20" scr=""></img> <img id="bild21" scr=""></img> <img id="abstand21" scr=""></img> <!--Bildnummern-DIVs--> <div id="bildnr1" class="bildnr">1</div> <div id="bildnr2" class="bildnr">2</div> <div id="bildnr3" class="bildnr">3</div> <div id="bildnr4" class="bildnr">4</div> <div id="bildnr5" class="bildnr">5</div> <div id="bildnr6" class="bildnr">6</div> <div id="bildnr7" class="bildnr">7</div> <div id="bildnr8" class="bildnr">8</div> <div id="bildnr9" class="bildnr">9</div> <div id="bildnr10" class="bildnr">10</div> <div id="bildnr11" class="bildnr">11</div> <div id="bildnr12" class="bildnr">12</div> <div id="bildnr13" class="bildnr">13</div> <div id="bildnr14" class="bildnr">14</div> <div id="bildnr15" class="bildnr">15</div> <div id="bildnr16" class="bildnr">16</div> <div id="bildnr17" class="bildnr">17</div> <div id="bildnr18" class="bildnr">18</div> <div id="bildnr19" class="bildnr">19</div> <div id="bildnr20" class="bildnr">20</div> <div id="bildnr21" class="bildnr">21</div> </div> </div> <!--content--> <div id="nav" class="nav"> <!-- INDEXBUTTON--> <button id="indexButton" title="Index" onclick="location.href='index.html';">←</button> <!-- UHR --> <span id="uhr" class="label"></span> <!--PFADAUSWAHL--> <select class="dropdownbutton" id="pfadAuswahl" onchange="var wert=this.value; pfadFestlegen(wert)" title=""> <script src="path.js"></script> </select> <button id="einzeilig" class="naviButton" title="NAVI 1-zeilig" onclick="javascript:navHeightFestlegen(32);">⚊</button> <button id="zweizeilig" class="naviButton" title="NAVI 2-zeilig" onclick="javascript:navHeightFestlegen(64);">⚌</button> <button id="dreizeilig" class="naviButton" title="NAVI 3-zeilig" onclick="javascript:navHeightFestlegen(96);">☰</button> <button id="hoehe" onclick="javascript:navHeightFestlegen(true);" title="NAVI-Höhe festlegen">↕</button> <button id="maussteuerung" onclick="maussteuerung();" title="Maus-Steuerung: Bildschirm geteilt">◫</button> <button id="seitenzaehler" title="Seitenanzahl"> </button> <!--NOTENAUSWAHL--> <span class="spanSongauswahl"> <span class="label">Diverse</span> <select class="dropdownbutton" id="songAuswahl" style="background:#e0ffe0" onchange="titel=this.value; einlesen(eval(titel));"> <option value="" selected="selected">--- NOTEN-AUSWAHL ---</option> <option value="flipscoreBlues">Flipscore Blues</option> <option value="turkeyInTheStraw">Turkey In The Straw</option> </select> </span> <!--SONG-AUSWAHL--> <span class="spanSongauswahl"> <span class="label">Mp3</span> <select class="dropdownbutton" id="songAuswahl" style="background:#e0ffe0" onchange="titel=this.value; songEinsetzen(titel);"> <option value="" selected="selected">--- SONG-AUSWAHL ---</option> <option value="Diverse/flipscore_blues.mp3">Mp3: Flipscore Blues</option> <option value="Diverse/turkeyInTheStraw.mp3">Mp3: Turkey In The Straw</option> </select> </span> <!-- AUDIO --> <audio id="audioTag" controls style="display:none;"> <source id="audioSource" src="" type="audio/mpeg"> Your browser does not support the audio tag. </audio> </div> <script src="var_func_X.js"></script> <script> pfad ="./"; maxSeitenzahl = 21; document.getElementById("pfadAuswahl").title = "Aktueller Pfad: " + pfad; </script> </body> </html>