Playing Audio Using Keystrokes: Is It Possible?

[Annabelle5893]

I'm wondering, how would I make an app that plays audio files using the keys on the number pad? Specifically, I want to make an app that triggers "Rotary Pulse 1" by pressing 1 on the numeric keypad, all the way up to "Rotary Pulse 0" on the 0 key. A dial tone will be toggled on by pressing the spacebar, which will begin with a "receiver pickup" noise. The dial tone turns off when digits are dialed via the numeric keypad. If you press the spacebar either when the dial tone is on, or after dialing a number, a "Receiver Hang Up" noise will be triggered. With the rotary dial sounds, the dial turning to the fingerhole is triggered at key down, and the release of the dial returning to the resting position will be triggered by releasing of the number corresponding to the fingerhole (1, 2, 3, 4, 5, 6, 7, 8, 9, 0). This will be accompanied by the internal sound of the dial pulses as heard in a telephone. What is the code I would use to make this audio app using HTML?

 

[Johna]

Hi @Annabelle5893,
Use the keydown (or keyup) event listener in JavaScript:

document.addEventListener("keydown", () => {
  console.log("key pressed");
});

Then using keyCode, you can find which key was pressed and play a sound accordingly:

document.addEventListener("keydown", (e) => {
  let audio;

  switch (e.keyCode) {
    // keycodes can be found online: https://www.toptal.com/developers/keycode/table
    case 48:
      audio = new Audio("keypad0.mp3");
      break;
    case 49:
      audio = new Audio("keypad1.mp3");
      break;
    case 50:
      audio = new Audio("keypad2.mp3");
      break;
    case 51:
      audio = new Audio("keypad3.mp3");
      break;
    case 52:
      audio = new Audio("keypad4.mp3");
      break;
    case 53:
      audio = new Audio("keypad5.mp3");
      break;
    case 54:
      audio = new Audio("keypad6.mp3");
      break;
    case 55:
      audio = new Audio("keypad7.mp3");
      break;
    case 56:
      audio = new Audio("keypad8.mp3");
      break;
    case 57:
      audio = new Audio("keypad9.mp3");
  }

  if (audio != undefined) {
    audio.loop = false;
    audio.play();
  }
});

I've only done for the keypad, you can continue for the spacebar or any other keys.

I haven't actually tried this code, but I think it should work.
Lmk if it's not working, or if you have any questions/problems.

 

[Annabelle5893]

Hi @Annabelle5893,
Use the keydown (or keyup) event listener in JavaScript:

document.addEventListener("keydown", () => {
  console.log("key pressed");
});

Then using keyCode, you can find which key was pressed and play a sound accordingly:

document.addEventListener("keydown", (e) => {
  let audio;

  switch (e.keyCode) {
    // keycodes can be found online: https://www.toptal.com/developers/keycode/table
    case 48:
      audio = new Audio("keypad0.mp3");
      break;
    case 49:
      audio = new Audio("keypad1.mp3");
      break;
    case 50:
      audio = new Audio("keypad2.mp3");
      break;
    case 51:
      audio = new Audio("keypad3.mp3");
      break;
    case 52:
      audio = new Audio("keypad4.mp3");
      break;
    case 53:
      audio = new Audio("keypad5.mp3");
      break;
    case 54:
      audio = new Audio("keypad6.mp3");
      break;
    case 55:
      audio = new Audio("keypad7.mp3");
      break;
    case 56:
      audio = new Audio("keypad8.mp3");
      break;
    case 57:
      audio = new Audio("keypad9.mp3");
  }

  if (audio != undefined) {
    audio.loop = false;
    audio.play();
  }
});

I've only done for the keypad, you can continue for the spacebar or any other keys.

I haven't actually tried this code, but I think it should work.
Lmk if it's not working, or if you have any questions/problems.

I wonder, how would I make a menu that lets you switch between "Rotary Phone", "Touchtone Phone", Virtual Bluebox", "SF Tones", "1-slot payphone", "Three-slot Payphone" and "Five Slot Payphone"? With "N" for "Nickel" (which generates a nickel tone), "D" for "Dime" (which generates a dime tone), "Q" for "Quarter" (which generates a quarter tone), "H" for "Half Dollar" (which generates a half dollar tone), and "$" for "dollar" (which generates a dollar tone). If a phone number is not dialed within 30 seconds (I think that's the average amount of a dial tone) after receiver pickup, one will hear the "Receiver Off Hook" tone. Does that sound complicated to set up, I wonder?

 

[Johna]

Does that sound complicated to set up, I wonder?

It depends on how strong your knowledge in code (especially JavaScript) is.
If you don't know much JavaScript, you may need to learn some more, otherwise I don't think it should be too difficult.

 

[Annabelle5893]

It depends on how strong your knowledge in code (especially JavaScript) is.
If you don't know much JavaScript, you may need to learn some more, otherwise I don't think it should be too difficult.

I wonder if any coding from this site could help me with this app setup. HTML Audio
The program I'm creating this app with is "HTML Help Workshop", which not only can be used to make help files (.chm) but also can make full projects (.hhp), tables of contents (.toc), indexes (.hhk), HTML files (.htm or .html), and even plain text files (.txt).

 

[Annabelle5893]

What does this "Case 48", "Case 49", "Case 50", "case 51", and so on, stand for?

 

[Antero360]

What does this "Case 48", "Case 49", "Case 50", "case 51", and so on, stand for?

Hey, so in what you have there is a switch-case statement, where your trigger event would go inside of the parenthesis at the keyword switch, and each condition would be your case statement. In this example, case 48, refers to the trigger being equal to the number 48... if your trigger is e.keycode, if the keycode == 48, your output/result will be whatever is inside of "case 48".. and so forth.

As a reference, here is a full list of event keycodes when dealing with the keyboard

KeyboardEvent: keyCode property - Web APIs | MDN

The deprecated KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.

developer.mozilla.org

 

[Annabelle5893]

So I wonder, how do I assign, for example, the keys "N", "D", and "Q" to the "Nickel Tone.ogg", "Dime Tone.ogg", and "Quarter Tone.ogg" files?

 

[Antero360]

So I wonder, how do I assign, for example, the keys "N", "D", and "Q" to the "Nickel Tone.ogg", "Dime Tone.ogg", and "Quarter Tone.ogg" files?

Same as @Johna 's example.
//Find the keycode for N, D,Q
//set up a switch case loop
//set your cases to the appropriate outcomes


if it helps, you can use if-else statements rather than a switch case loop

if(event.keycode == Number ){
//this outcome
}
else if(event.keycode == otherNumber) {
//other outcome
}

 

[Annabelle5893]

In the keycode table, it lists a "key code", a "key", a "code", and a "unicode". For example:

48	0	Digit0	⓪	0
48	’	Digit0	’	apostrophe
48	º	Digit0	º	ordinal indicator

Now I'm confused! How can three keys be assigned to the same code?

 

[Deleted member 2829]

And it gets worse! Look for example at keycode 50 with four keys:

50	2	Digit2	②	2 Key
50	@	Digit2	@	at sign
50	²	Digit2	²	sqaure
50	™	Digit2	™	trademark

But fear not, What this table fails to mention is that a keyboard event does not just have a keycode, but also the modifiers shift, ctrl, and alt.
You see here that the second value is shift-2, which is the at-sign @. The other two are likely to be combinations of modifiers, I'm not sure. You'll need to find a more complete table describing all that in detail. HTH.

 

[Annabelle5893]

I think it was @Antero360 who gave me the reference to that table of keycodes. Also, I wonder, how do they tell the keys on the number row apart from the numpad keys when it seems as though they're the same numbers?

 

[Deleted member 2829]

Also, I wonder, how do they tell the keys on the number row apart from the numpad keys when it seems as though they're the same numbers?

They don't ! The number keys 0..9 on the numpad work exactly the same (when NumLock is on, that is!) as those on the keyboard top row. It makes no difference which ones you use. The numpad is just a convenience for users who have to type a lot of digits so they can use one hand.

 

[Annabelle5893]

I wonder, to which keys should I route the "star" and "pound" tones?

 

[Deleted member 2829]

I'm not sure what you mean with "star tone". As for "pound tone" I assume you mean the UK pound sterling symbol ? On a UK keyboard this is shift-3 (which would give you # on a US keyboard. Symbols not on your keyboard can be generated by Alt sequences, e.g. Alt0163 gives you the pound sign. I personally would leave it at that, and not bother with mapping keys.

 

[Annabelle5893]

Here's what I mean by "Star" tone and "pound" tone.

 

[Deleted member 2829]

Oh I see. You had me confused. Which keys to use to play these tones is entirely up to you.

 

[Annabelle5893]

How would I assign the "On/Off Hook Status" toggle to the spacebar?

 

[Johna]

The same way as the other keys, get the keyCode of the spacebar, and use that code instead.

 

[Annabelle5893]

I think I found the keycode for Spacebar. 32. However, what I want to have happen is: The first press of the spacebar toggles the "switchhook status" "Off-Hook" when it's set to "On-hook", and vise versa when it's set to "off-hook". Would that be in an "If/Else" statement?