Quick context: I made an svg image with a script inside that is a playable keyboard that plays notes based on keypresses, and space bar acts as sustain pedal. I built it on windows where it works perfectly, I recently tried it on 2 separate macs and I get the same really weird result from both macs, basically it seems like certain keypress events are not emitted properly on mac when certain other keys are pressed. i've scaled the code way back to only the part that causes problems:
it has no graphics and only logs to the console.
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript"> <![CDATA[
document.documentElement.addEventListener("keydown",function(evt){handleKeyPress(evt.keyCode)},false);
document.documentElement.addEventListener("keyup",function(evt){handleKeyUp(evt.keyCode)},false);
let KEY = {a:65, w:87, s:83, e:69, d:68, f:70, t:84, g:71, y:89, h:72, u:85, j:74,k:75, o:79, l:76, p:80, spc:32};
isPressed = {}
function handleKeyUp(keyCode) {
switch (keyCode){
case KEY.a:
isPressed[KEY.a] = false
break;
case KEY.w:
isPressed[KEY.w] = false
break;
case KEY.s:
isPressed[KEY.s] = false
break;
case KEY.e:
isPressed[KEY.e] = false
break;
case KEY.d:
isPressed[KEY.d] = false
break;
case KEY.f:
isPressed[KEY.f] = false
break;
case KEY.t:
isPressed[KEY.t] = false
break;
case KEY.g:
isPressed[KEY.g] = false
break;
case KEY.y:
isPressed[KEY.y] = false
break;
case KEY.h:
isPressed[KEY.h] = false
break;
case KEY.u:
isPressed[KEY.u] = false
break;
case KEY.j:
isPressed[KEY.j] = false
break;
case KEY.k:
isPressed[KEY.k] = false
break;
case KEY.o:
isPressed[KEY.o] = false
break;
case KEY.l:
isPressed[KEY.l] = false
break;
case KEY.p:
isPressed[KEY.p] = false
break;
case 186: // ;
isPressed[186] = false
break;
case 222: // [
isPressed[222] = false
break;
case 221: // ]
isPressed[221] = false
break;
case 13: // enter
isPressed[13] = false
break;
case KEY.spc:
break;
}
}
function handleKeyPress(keyCode) {
let note;
switch (keyCode){
case KEY.a:
if(isPressed[KEY.a]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.a] = true
break;
case KEY.w:
if(isPressed[KEY.w]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.w] = true
break;
case KEY.s:
if(isPressed[KEY.s]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.s] = true
break;
case KEY.e:
if(isPressed[KEY.e]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.e] = true
break;
case KEY.d:
if(isPressed[KEY.d]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.d] = true
break;
case KEY.f:
if(isPressed[KEY.f]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.f] = true
break;
case KEY.t:
if(isPressed[KEY.t]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.t] = true
break;
case KEY.g:
if(isPressed[KEY.g]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.g] = true
break;
case KEY.y:
if(isPressed[KEY.y]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.y] = true
break;
case KEY.h:
if(isPressed[KEY.h]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.h] = true
break;
case KEY.u:
if(isPressed[KEY.u]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.u] = true
break;
case KEY.j:
if(isPressed[KEY.j]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.j] = true
break;
case KEY.k:
if(isPressed[KEY.k]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.k] = true
break;
case KEY.o:
if(isPressed[KEY.o]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.o] = true
break;
case KEY.l:
if(isPressed[KEY.l]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.l] = true
break;
case KEY.p:
if(isPressed[KEY.p]) {return}
console.log(keyCode, "pressed")
isPressed[KEY.p] = true
break;
case 186:
if(isPressed[186]) {return}
console.log(keyCode, "pressed")
isPressed[186] = true
break;
case 222:
if(isPressed[222]) {return}
console.log(keyCode, "pressed")
isPressed[222] = true
break;
case 221:
if(isPressed[221]) {return}
console.log(keyCode, "pressed")
isPressed[221] = true
break;
case 13:
if(isPressed[13]) {return}
console.log(keyCode, "pressed")
isPressed[13] = true
break;
case KEY.spc:
console.log(keyCode, "spacebar")
break;
}
}
]]></script>
</svg>
examples: if you press "a", "s", "d" at the same time, then press space bar, the space bar press is recorded.
if you press "h", "k", ";" and the do the same thing, space bar press is not logged. same for "s", "f", "h", but "s", "f", "g" and "s", "f", "j" work
if you press "j", "l", " ' " the last one wont log until either "j" or "l" are released.
same thing for "s", "e", "d"... but "s", "e", "f" works
its really strange, on windows you can press any combination of keys you want, they are all logged in the console and space bar always works as well. I've tried 2 macs, 2 PCs different browsers etc. I also tried if statements instead of switch case. No idea whats going on.
heres a base64 encoded uri if you want to test quickly in the browser:
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CgoKPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPiA8IVtDREFUQVsKCiAKCiAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigia2V5ZG93biIsZnVuY3Rpb24oZXZ0KXtoYW5kbGVLZXlQcmVzcyhldnQua2V5Q29kZSl9LGZhbHNlKTsKICAgIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCJrZXl1cCIsZnVuY3Rpb24oZXZ0KXtoYW5kbGVLZXlVcChldnQua2V5Q29kZSl9LGZhbHNlKTsKCgogICAgbGV0IEtFWSA9ICB7YTo2NSwgdzo4Nywgczo4MywgZTo2OSwgZDo2OCwgZjo3MCwgdDo4NCwgZzo3MSwgeTo4OSwgaDo3MiwgdTo4NSwgajo3NCxrOjc1LCBvOjc5LCBsOjc2LCBwOjgwLCBzcGM6MzJ9OwoKICAgIGlzUHJlc3NlZCA9IHt9CiAgICBmdW5jdGlvbiBoYW5kbGVLZXlVcChrZXlDb2RlKSB7CiAgICAgICAgc3dpdGNoIChrZXlDb2RlKXsKCiAgICAgICAgICAgIGNhc2UgS0VZLmE6CiAgICAgICAgICAgIAogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLmFdID0gZmFsc2UKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS53OgogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLnddID0gZmFsc2UKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS5zOgogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLnNdID0gZmFsc2UgICAgICAgICAgICAKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS5lOgogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLmVdID0gZmFsc2UKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS5kOgogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLmRdID0gZmFsc2UKICAgICAgICAgICAgYnJlYWs7CgoKICAgICAgICAgICAgY2FzZSBLRVkuZjoKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS5mXSA9IGZhbHNlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkudDoKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS50XSA9IGZhbHNlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkuZzoKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS5nXSA9IGZhbHNlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkueToKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS55XSA9IGZhbHNlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkuaDoKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS5oXSA9IGZhbHNlCiAgICAgICAgICAgIGJyZWFrOyAKCiAgICAgICAgICAgIGNhc2UgS0VZLnU6CiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkudV0gPSBmYWxzZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLmo6CiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkual0gPSBmYWxzZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLms6CiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkua10gPSBmYWxzZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLm86CiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkub10gPSBmYWxzZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLmw6CiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkubF0gPSBmYWxzZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLnA6CiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkucF0gPSBmYWxzZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgMTg2OiAvLyAgOwogICAgICAgICAgICBpc1ByZXNzZWRbMTg2XSA9IGZhbHNlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSAyMjI6IC8vIFsKICAgICAgICAgICAgaXNQcmVzc2VkWzIyMl0gPSBmYWxzZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgMjIxOiAvLyBdCiAgICAgICAgICAgIGlzUHJlc3NlZFsyMjFdID0gZmFsc2UKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIDEzOiAvLyBlbnRlcgogICAgICAgICAgICBpc1ByZXNzZWRbMTNdID0gZmFsc2UKICAgICAgICAgICAgYnJlYWs7CgoKICAgICAgICAgICAgY2FzZSBLRVkuc3BjOgogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgICAgICAKCiAgICAgICAgfQoKICAgIH0KICAgIAoKICAgIGZ1bmN0aW9uIGhhbmRsZUtleVByZXNzKGtleUNvZGUpIHsKICAgICAgICBsZXQgbm90ZTsKICAgICAgICBzd2l0Y2ggKGtleUNvZGUpewogICAgICAgICAgICBjYXNlIEtFWS5hOgogICAgICAgICAgICBpZihpc1ByZXNzZWRbS0VZLmFdKSB7cmV0dXJufQogICAgICAgICAgICBjb25zb2xlLmxvZyhrZXlDb2RlLCAicHJlc3NlZCIpCiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkuYV0gPSB0cnVlCgogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLnc6CiAgICAgICAgICAgIGlmKGlzUHJlc3NlZFtLRVkud10pIHtyZXR1cm59CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJwcmVzc2VkIikKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS53XSA9IHRydWUKICAgICAgICAgICAgYnJlYWs7CiAgICAgICAgICAgIAogICAgICAgICAgICBjYXNlIEtFWS5zOgogICAgICAgICAgICBpZihpc1ByZXNzZWRbS0VZLnNdKSB7cmV0dXJufQogICAgICAgICAgICBjb25zb2xlLmxvZyhrZXlDb2RlLCAicHJlc3NlZCIpCiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkuc10gPSB0cnVlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkuZToKICAgICAgICAgICAgaWYoaXNQcmVzc2VkW0tFWS5lXSkge3JldHVybn0KICAgICAgICAgICAgY29uc29sZS5sb2coa2V5Q29kZSwgInByZXNzZWQiKQogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLmVdID0gdHJ1ZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLmQ6CiAgICAgICAgICAgIGlmKGlzUHJlc3NlZFtLRVkuZF0pIHtyZXR1cm59CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJwcmVzc2VkIikKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS5kXSA9IHRydWUKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS5mOgogICAgICAgICAgICBpZihpc1ByZXNzZWRbS0VZLmZdKSB7cmV0dXJufQogICAgICAgICAgICBjb25zb2xlLmxvZyhrZXlDb2RlLCAicHJlc3NlZCIpCiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkuZl0gPSB0cnVlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkudDoKICAgICAgICAgICAgaWYoaXNQcmVzc2VkW0tFWS50XSkge3JldHVybn0KICAgICAgICAgICAgY29uc29sZS5sb2coa2V5Q29kZSwgInByZXNzZWQiKQogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLnRdID0gdHJ1ZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLmc6CiAgICAgICAgICAgIGlmKGlzUHJlc3NlZFtLRVkuZ10pIHtyZXR1cm59CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJwcmVzc2VkIikKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS5nXSA9IHRydWUKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS55OgogICAgICAgICAgICBpZihpc1ByZXNzZWRbS0VZLnldKSB7cmV0dXJufQogICAgICAgICAgICBjb25zb2xlLmxvZyhrZXlDb2RlLCAicHJlc3NlZCIpCiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkueV0gPSB0cnVlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkuaDoKICAgICAgICAgICAgaWYoaXNQcmVzc2VkW0tFWS5oXSkge3JldHVybn0KICAgICAgICAgICAgY29uc29sZS5sb2coa2V5Q29kZSwgInByZXNzZWQiKQogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLmhdID0gdHJ1ZQogICAgICAgICAgICBicmVhazsKICAgICAgICAgICAgCiAgICAgICAgICAgIGNhc2UgS0VZLnU6CiAgICAgICAgICAgIGlmKGlzUHJlc3NlZFtLRVkudV0pIHtyZXR1cm59CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJwcmVzc2VkIikKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS51XSA9IHRydWUKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS5qOgogICAgICAgICAgICBpZihpc1ByZXNzZWRbS0VZLmpdKSB7cmV0dXJufQogICAgICAgICAgICBjb25zb2xlLmxvZyhrZXlDb2RlLCAicHJlc3NlZCIpCiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkual0gPSB0cnVlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkuazoKICAgICAgICAgICAgaWYoaXNQcmVzc2VkW0tFWS5rXSkge3JldHVybn0KICAgICAgICAgICAgY29uc29sZS5sb2coa2V5Q29kZSwgInByZXNzZWQiKQogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLmtdID0gdHJ1ZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgS0VZLm86CiAgICAgICAgICAgIGlmKGlzUHJlc3NlZFtLRVkub10pIHtyZXR1cm59CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJwcmVzc2VkIikKICAgICAgICAgICAgaXNQcmVzc2VkW0tFWS5vXSA9IHRydWUKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS5sOgogICAgICAgICAgICBpZihpc1ByZXNzZWRbS0VZLmxdKSB7cmV0dXJufQogICAgICAgICAgICBjb25zb2xlLmxvZyhrZXlDb2RlLCAicHJlc3NlZCIpCiAgICAgICAgICAgIGlzUHJlc3NlZFtLRVkubF0gPSB0cnVlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSBLRVkucDoKICAgICAgICAgICAgaWYoaXNQcmVzc2VkW0tFWS5wXSkge3JldHVybn0KICAgICAgICAgICAgY29uc29sZS5sb2coa2V5Q29kZSwgInByZXNzZWQiKQogICAgICAgICAgICBpc1ByZXNzZWRbS0VZLnBdID0gdHJ1ZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgMTg2OgogICAgICAgICAgICBpZihpc1ByZXNzZWRbMTg2XSkge3JldHVybn0KICAgICAgICAgICAgY29uc29sZS5sb2coa2V5Q29kZSwgInByZXNzZWQiKQogICAgICAgICAgICBpc1ByZXNzZWRbMTg2XSA9IHRydWUKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIDIyMjoKICAgICAgICAgICAgaWYoaXNQcmVzc2VkWzIyMl0pIHtyZXR1cm59CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJwcmVzc2VkIikKICAgICAgICAgICAgaXNQcmVzc2VkWzIyMl0gPSB0cnVlCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgY2FzZSAyMjE6CiAgICAgICAgICAgIGlmKGlzUHJlc3NlZFsyMjFdKSB7cmV0dXJufQogICAgICAgICAgICBjb25zb2xlLmxvZyhrZXlDb2RlLCAicHJlc3NlZCIpCiAgICAgICAgICAgIGlzUHJlc3NlZFsyMjFdID0gdHJ1ZQogICAgICAgICAgICBicmVhazsKCiAgICAgICAgICAgIGNhc2UgMTM6CiAgICAgICAgICAgIGlmKGlzUHJlc3NlZFsxM10pIHtyZXR1cm59CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJwcmVzc2VkIikKICAgICAgICAgICAgaXNQcmVzc2VkWzEzXSA9IHRydWUKICAgICAgICAgICAgYnJlYWs7CgogICAgICAgICAgICBjYXNlIEtFWS5zcGM6CiAgICAgICAgICAgIGNvbnNvbGUubG9nKGtleUNvZGUsICJzcGFjZWJhciIpCiAgICAgICAgICAgIGJyZWFrOwoKICAgICAgICAgICAgICAgIAoKICAgICAgICB9CgoKICAgIH0KCgoKICBdXT48L3NjcmlwdD4KCgo8L3N2Zz4=
I tried to describe it as best i can with out writing too much, i can clarify or give more examples if you need! Anyone have any idea?
Thanks!