Ich bin Musiklehrer und habe für meine kleine Schule ein Songbook (Übungsplattform...) geschrieben.
Dort gibt es die Möglichkeit mittels Buttons den Song (Text + AKKORDE) in jede Tonart zu transponieren. Dieses Javascript habe ich von Christian Frauscher. Man kann aus den mittlerweise über 500 Songs sein persönliches Songbook zusammen bauen. Nun möchte ich, dass der Schüler den Transposewert zu dem Song abspeichern kann (soweit geht schon alles) und beim Aufruf des Songs der Wert den Akkorde automatisch transponiert.
Der Transposewert wird in einer URL Variablen an den Song gehängt. Kann aber auch in eine : <input type="hidden"> geschrieben werden.
Leider bekomme ich das nicht hin und benötige Hilfe!
Da das Songbook nicht ohne Passwort geht... DEMOSeite:[/B] http://sample.webotto.de/Songbook_demo.php
hier das Script:
// JavaScript Document
$().ready(function() {
var octave = [
"A",
"B",
"H",
"C",
"C#",
"D",
"Eb",
"E",
"F",
"F#",
"G",
"G#"
];
// START Button und Input erstellen:
// hier werden die Buttons hinzugefügt.
var $btnGroup = $("#MyNavi .btn-group");
var $btnDown = $("<button>").addClass("btn btn-lg");
$btnDown.html('<i class="fa fa-chevron-down"></i>');
$btnDown.appendTo ($btnGroup);
var $transpose = $("<input>").addClass("btn btn-lg");
$transpose.val("0").width("3em");
$transpose.appendTo ($btnGroup);
var $btnUp = $("<button>").addClass("btn btn-lg");
$btnUp.html('<i class="fa fa-chevron-up"></i>');
$btnUp.appendTo($btnGroup);
// ENDE Buttons & Input erstellen.
// WENN Buttons & Input im HTML vorhanden reichen stattdessen auch diese drei Zeilen:
//var $transpose = $(".input-transpose");
//var $btnDown = $(".button-transpose-down");
//var $btnUp = $(".button-transpose-up");
// Event-Handler:
$btnUp.click(function(e) {
$transpose.val(parseInt($transpose.val())+1)
.change();
e.preventDefault();
return false;
});
$btnDown.click(function(e) {
$transpose.val(parseInt($transpose.val())-1)
.change();
e.preventDefault();
return false;
});
$transpose.bind("change keyup", function () {
if (this.value > 6) this.value = parseInt(this.value) - 12;
if (this.value < -6) this.value = parseInt(this.value) + 12;
var value = parseInt(this.value);
if (!Number.isNaN(value)) {
updateChords(value);
} else {
this.value = "0";
}
});
// helper functions
function updateChords(trans) {
var $accords = $(".Akkord");
$accords.each(function() {
var $this = $(this);
var value = $this.text();
if ($this.data("original")) {
value = $this.data("original");
} else {
$this.data("original", value);
}
if (trans != 0) {
value = value.replace(/[\s\/]([abcdefgh])/g,normalizeMol).replace(/(A|B|C|D|E|F|G|H)(|[#])?/g,function(chord,tone,mod) {
var newChord = transpose(chord,trans);
return newChord;
});
$this.html(value);
} else {
$this.html($this.data("original"));
}
})
}
function normalizeMol(match) {
return match.toUpperCase() + "m";
}
function transpose(chord,transpose) {
var mod;
if (chord.length > 1) {
mod = chord.substr(1,1);
chord = chord.substr(0,1);
}
var chordNr = parseInt(octave.indexOf(chord));
if (chordNr>=0) {
chordNr += parseInt(transpose);
if (mod=="#") chordNr+=1;
if (mod=="b" && chord !== "B") chordNr-=1;
if (mod == "b" && chord == "B") chordNr = 1 + transpose;
if (chordNr < 0) chordNr = chordNr+12;
if (chordNr >= 12) chordNr = chordNr%12;
return octave[chordNr] + (chordNr==1?"b":"");
}
return false;
}
});
Dort gibt es die Möglichkeit mittels Buttons den Song (Text + AKKORDE) in jede Tonart zu transponieren. Dieses Javascript habe ich von Christian Frauscher. Man kann aus den mittlerweise über 500 Songs sein persönliches Songbook zusammen bauen. Nun möchte ich, dass der Schüler den Transposewert zu dem Song abspeichern kann (soweit geht schon alles) und beim Aufruf des Songs der Wert den Akkorde automatisch transponiert.
Der Transposewert wird in einer URL Variablen an den Song gehängt. Kann aber auch in eine : <input type="hidden"> geschrieben werden.
Leider bekomme ich das nicht hin und benötige Hilfe!
Da das Songbook nicht ohne Passwort geht... DEMOSeite:[/B] http://sample.webotto.de/Songbook_demo.php
hier das Script:
// JavaScript Document
$().ready(function() {
var octave = [
"A",
"B",
"H",
"C",
"C#",
"D",
"Eb",
"E",
"F",
"F#",
"G",
"G#"
];
// START Button und Input erstellen:
// hier werden die Buttons hinzugefügt.
var $btnGroup = $("#MyNavi .btn-group");
var $btnDown = $("<button>").addClass("btn btn-lg");
$btnDown.html('<i class="fa fa-chevron-down"></i>');
$btnDown.appendTo ($btnGroup);
var $transpose = $("<input>").addClass("btn btn-lg");
$transpose.val("0").width("3em");
$transpose.appendTo ($btnGroup);
var $btnUp = $("<button>").addClass("btn btn-lg");
$btnUp.html('<i class="fa fa-chevron-up"></i>');
$btnUp.appendTo($btnGroup);
// ENDE Buttons & Input erstellen.
// WENN Buttons & Input im HTML vorhanden reichen stattdessen auch diese drei Zeilen:
//var $transpose = $(".input-transpose");
//var $btnDown = $(".button-transpose-down");
//var $btnUp = $(".button-transpose-up");
// Event-Handler:
$btnUp.click(function(e) {
$transpose.val(parseInt($transpose.val())+1)
.change();
e.preventDefault();
return false;
});
$btnDown.click(function(e) {
$transpose.val(parseInt($transpose.val())-1)
.change();
e.preventDefault();
return false;
});
$transpose.bind("change keyup", function () {
if (this.value > 6) this.value = parseInt(this.value) - 12;
if (this.value < -6) this.value = parseInt(this.value) + 12;
var value = parseInt(this.value);
if (!Number.isNaN(value)) {
updateChords(value);
} else {
this.value = "0";
}
});
// helper functions
function updateChords(trans) {
var $accords = $(".Akkord");
$accords.each(function() {
var $this = $(this);
var value = $this.text();
if ($this.data("original")) {
value = $this.data("original");
} else {
$this.data("original", value);
}
if (trans != 0) {
value = value.replace(/[\s\/]([abcdefgh])/g,normalizeMol).replace(/(A|B|C|D|E|F|G|H)(|[#])?/g,function(chord,tone,mod) {
var newChord = transpose(chord,trans);
return newChord;
});
$this.html(value);
} else {
$this.html($this.data("original"));
}
})
}
function normalizeMol(match) {
return match.toUpperCase() + "m";
}
function transpose(chord,transpose) {
var mod;
if (chord.length > 1) {
mod = chord.substr(1,1);
chord = chord.substr(0,1);
}
var chordNr = parseInt(octave.indexOf(chord));
if (chordNr>=0) {
chordNr += parseInt(transpose);
if (mod=="#") chordNr+=1;
if (mod=="b" && chord !== "B") chordNr-=1;
if (mod == "b" && chord == "B") chordNr = 1 + transpose;
if (chordNr < 0) chordNr = chordNr+12;
if (chordNr >= 12) chordNr = chordNr%12;
return octave[chordNr] + (chordNr==1?"b":"");
}
return false;
}
});
