@H5:::
Und warum sollte das Importieren weiterer HTML-Bestandteile Clientseitig durchgeführt werden?
Abgesehen von dem bereits genannten, kannst du deinen Code noch weiter verbessern.
Statt die weißen und schwarzen Tasten separat zu handhaben
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$('.white').mouseenter(function() {
$(this).addClass('highlighted_white');
});
$('.white, .black').mouseleave(function() {
$(this).removeClass('highlighted_white');
});
$('.black').mouseenter(function() {
$(this).addClass('highlighted_black');
});
$('.black').mouseleave(function() {
$(this).removeClass('highlighted_black');
});
|
kannst du dies auch einheitlch machen
|
Quellcode
|
1
2
3
4
5
6
|
$('.white, .black').mouseenter(function() {
$(this).addClass('highlighted');
});
$('.white, .black').mouseleave(function() {
$(this).removeClass('highlighted');
});
|
Oder noch besser: verwende CSS für Hovereffekte
|
Quellcode
|
1
|
.white:hover { [...] }
|
Statt jeden Ton in einer separaten Zeile zu laden und in jeder Zeile separat den richtigen callback zuzuweisen, könntest du eine Datenstruktur anlegen, die die notwendigen Informationen beinhält
|
Quellcode
|
1
2
3
4
5
6
|
var keys = [
{id: 'w_A0', fileName: 'A0'},
{id: 'A0', fileName: 'Bb0'},
{id: 'w_B0', fileName: 'B0'},
[...]
}
|
Über diese muss dann nur einmal iteriert werden, um für jedes Element die Taste zu initialisieren. (Besser wäre es, wenn die IDs der Tasten sich nicht von den Dateinamen unterscheiden würden, da die IDs ohnehin nicht sinnvoll gewählt aussehen.) Da die Pfade der Sound-Dateien sich nur im Dateinamen unterscheiden, kann man diesen aus einem konstanten Teil und dem variablen Teil des Dateinamens beim Iterieren zusammensetzen.
Für die Usability wäre es vielleicht besser, die Töne schon beim Drücken der Taste zu spielen, nicht erst beim Loslassen.
Und weiterhin klingen die Tasten viel zu lange nach. An einem richtigen Klavier bekommt man ein solches Verhalten nur durch das rechte Pedal, welches man aber nicht permanent gedrückt hält.