/    Sign up×
Community /Pin to ProfileBookmark

How to view what key is being pressed ?

Hello,I’m new to this forum.

so I’m trying to making a web app piano, how to view what key is being pressed in javascript ?
and I’m making this key on html5 canvas and want to show the information on the canvas too.

here’s my code for the keyboard

window.addEventListener(“keypress”,onKeyPress);
function onKeyPress(e)
{
console.log(e.keyCode);
var str = String.fromCharCode(e.keyCode);
console.log(str+”:”+e.keyCode);
var tune = new Audio();

if (e.keyCode == 113)
{
tune = new Audio(“Assets/Tune/C.mp3”);
tune.play();
}
else if ( e.keyCode == 119)
{
tune = new Audio(“Assets/Tune/D.mp3”);
tune.play();
}
else if ( e.keyCode == 101)
{
tune = new Audio(“Assets/Tune/E.mp3”);
tune.play();
}
}

Thanks.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@rootDec 28.2015 — If you post code, in future please use code tags. See my signature for a clue. AND, you need to read up about reserved words... which are names you should not use as variable names in any scripting.

You will need to output any keys pressed to Canvas by using for example: http://www.w3schools.com/canvas/canvas_text.asp

As for your existing code, I see allot of repetition going on, your script code here for example,

[code[window.addEventListener("keypress", onKeyPress);

function onKeyPress(e){

console.log(e.keyCode);

var str = String.fromCharCode(e.keyCode);

console.log(str+":"+e.keyCode);

var tune = new Audio();

if (e.keyCode == 113){
tune = new Audio("Assets/Tune/C.mp3");
tune.play();
}else if ( e.keyCode == 119){
tune = new Audio("Assets/Tune/D.mp3");
tune.play();
}else if ( e.keyCode == 101){
tune = new Audio("Assets/Tune/E.mp3");
tune.play();
}

}[/code]

IMHO would be better off as with a few less items

for example, this block
function key_press(e){
var tune = new Audio();
var key = e.keyCode;
switch( key ){
case 113: tune = "C.mp3"; break;
case 119: tune = "D.mp3"; break;
case 101: tune = "E.mp3"; break;
default:
tune = false;
}

if( tune ){ // will be false if one of the key conditions is not met despite any audio object that is made.
var audio = new Audio("Assets/Tune/"+tune);
audio.play(); <br/>
}

}

I suggest that you look at a library (*chokes on own words*), a search will find sites like this https://dmauro.github.io/Keypress/ and it will likely take the headache of the differences that are between Mozilla and MSIE and others like Opera or Safari.
Copy linkTweet thisAlerts:
@kite123Dec 31.2015 — hey,check this out:

<script type="text/javascript">

document.onkeydown = ShowKeyCode;

function ShowKeyCode(evt) {

alert(evt.keyCode);

}

</script>
×

Success!

Help @canonic2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...