JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,096 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,015 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Using Keyboard Input

Using Keyboard Input, With <embed> elements

Options

kewlkreator
Group Icon

26 Aug, 2009 - 01:40 PM

Post #1

Hi!
Hello, in this tutorial, I'm going to show you how to make an keyboard audio player. This will integrate JavaScript (should have basic knowlege of) and HTML (same). We'll use the keyboard to play and pause audio.

Other Uses
In this tutorial, I'm going to use a <embed> element to mess around with. You could use this with others like making a button dissapear or other actions. I'll show you how to do this at the end.

Step 1 The Template
Lets start out with our template. Yes I do this in all my other tutorials but just do it anyway.

HTML

<html>
<head>
<title>Using Keyboard Input</title>
<script></script>
</head>
<body>
<embed></embed>
<p></p>
<form></form>
</body>
</html>

I added some elements in their. We have the <script> tags for our functions and JS. The <embed> is for the audio player. The <p> elements are for the instructions. Finally, the <form> elements are for our play/pause selection.

Step 2 Filling it In
Now, lets fill in some of our template. Don't fill in the script yet though!
---<embed>
Fill this with the source of your audio/video file. Use the parameters:

CODE

I advise you to set the loop to true if you have a short sound.
---<p>
This isn't really nessacary but if you want others to use this, it's a must. I wrote some instructions:

QUOTE

Select a action in the form. Press space to do the action.

Really, this is kinda korny. Feel free to change!

---<form>
Yay! The good stuff. This is where the user will select their action that they want to take when the space bar is pressed.

CODE

<form><p>
<input type="radio" id="cbplay" name="cb" checked="true" accesskey="1"/>Play (press Alt+1)<br />
<input type="radio" id="cbpause" name="cb" accesskey="2"/>Pause (press Alt+2)</br />
</p></form>

If you don't know, this will create two radio buttons for our actions, play and pause. I added an accesskey parameter for the user to do everything from a keyboard!

Step 3 The Good Stuff
Alright! I'm ready to fill that script!

JavaScript

var key1 = "32";
//Your key. 32 is the ASCII number for the space bar.
var x = '';
//Blank right now
function handler(e) {
if (document.all) {
//Grabs all
var evnt = window.event;
//All events 
x = evnt.keyCode;
//More specific
} else {
x = e.charCode;
}
if (x == key1) {
//Checks the keypress
if (document.getElementById('cbplay').checked == true) {
//Checks the form
document.getElementById('sound').play();
//If the play button is checked, play when pressed
} else {
document.getElementById('sound').pause();
//Otherwise, pause
}
//What you want to happen
}
}
if (!document.all) {
window.captureEvents(Event.KEYPRESS);
window.onkeypress = handler;
} else {
document.onkeypress = handler;
}

Wow. That was a lot. But with that aside, lets put it together!

Step 4 All Together Now!
We have our template:

CODE

<html>
<head>
<title>Using Keyboard Input</title>
<script></script>
</head>
<body>
<embed></embed>
<p></p>
<form></form>
</body>
</html>

With the instructions:

CODE

<html>
<head>
<title>Using Keyboard Input</title>
<script></script>
</head>
<body>
<embed></embed>
<p>Select a action in the form. Press space to do the action</p>
<form></form>
</body>
</html>

With the form elements:

CODE

<html>
<head>
<title>Using Keyboard Input</title>
<script></script>
</head>
<body>
<embed></embed>
<p>Select a action in the form. Press space to do the action</p>
<form><p>
<input type="radio" id="cbplay" name="cb" checked="true" accesskey="1"/>Play (press Alt+1)<br />
<input type="radio" id="cbpause" name="cb" accesskey="2"/>Pause (press Alt+2)</br />
</p></form>
</body>
</html>

And... *drumroll* the script!

CODE

<html>
<head>
<title>Using Keyboard Input</title>
<script>var key1 = "32";
//Your key. 32 is the ASCII number for the space bar.
var x = '';
//Blank right now
function handler(e) {
if (document.all) {
//Grabs all
var evnt = window.event;
//All events
x = evnt.keyCode;
//More specific
} else {
x = e.charCode;
}
if (x == key1) {
//Checks the keypress
if (document.getElementById('cbplay').checked == true) {
//Checks the form
document.getElementById('sound').play();
//If the play button is checked, play when pressed
} else {
document.getElementById('sound').pause();
//Otherwise, pause
}
//What you want to happen
}
}
if (!document.all) {
window.captureEvents(Event.KEYPRESS);
window.onkeypress = handler;
} else {
document.onkeypress = handler;
}
</script>
</head>
<body>
<embed></embed>
<p>Select a action in the form. Press space to do the action</p>
<form><p>
<input type="radio" id="cbplay" name="cb" checked="true" accesskey="1"/>Play (press Alt+1)<br />
<input type="radio" id="cbpause" name="cb" accesskey="2"/>Pause (press Alt+2)</br />
</p></form>
</body>
</html>

Wooo!

Afterward
Yay! It worked. Now, childeren, what can we use this for? Well, it doesn't have to be a <embed> element. It could call a function or hide an element or hundreds of other uses. The main idea isn't really to make a keyboard audio player. Honestly, the idea is how to use keyboard events. Put it to use guys.

Different Keys
If you want to use different keys, change key1 to another number. This number is an ASCII key code. A list of them can be found here.

Resources
If you didn't understand the HTML here, try going to W3CSchools. They have lots of HTML tutorials. link
If you didn't understand the JS, again, W3C is probably the place to go. link

Thanks!
Thanks guys! Glad you read this tutorial!

~kewlkreator