diff --git a/piano/index.html b/piano/index.html
index 4f8ebf2..80c665a 100644
--- a/piano/index.html
+++ b/piano/index.html
@@ -1,7 +1,9 @@
+
+ Piano Web
diff --git a/piano/svg/PianoSvg.mjs b/piano/svg/PianoSvg.mjs
index fde9c9e..c9ecb74 100644
--- a/piano/svg/PianoSvg.mjs
+++ b/piano/svg/PianoSvg.mjs
@@ -27,6 +27,8 @@ const strokeWidth = 1;
class PianoKeySvg {
+ pressed = false;
+
constructor(data, piano) {
this.data = data;
this.piano = piano;
@@ -41,17 +43,22 @@ class PianoKeySvg {
this.element.addEventListener('mousedown', () => this.onClickStart());
this.element.addEventListener('mouseup', () => this.onClickEnd());
this.element.addEventListener('mouseout', () => this.onClickEnd());
+ this.element.addEventListener('touchstart', () => this.onClickStart());
+ this.element.addEventListener('touchend', () => this.onClickEnd());
+ this.element.addEventListener('touchcancel', () => this.onClickEnd());
this.element.classList.add(this.data.typeClass);
}
onClickStart() {
- if (this.piano.onKeyPress)
+ if (!this.pressed && this.piano.onKeyPress)
this.piano.onKeyPress(this);
+ this.pressed = true;
}
onClickEnd() {
- if (this.piano.onKeyRelease)
+ if (this.pressed && this.piano.onKeyRelease)
this.piano.onKeyRelease(this);
+ this.pressed = false;
}
addHighlight() {