Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Playing Audio Using Keystrokes: Is It Possible?

Annabelle5893

Gold Coder
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?
 
Hi @Annabelle5893,
Use the keydown (or keyup) event listener in JavaScript:
JavaScript:
document.addEventListener("keydown", () => {
  console.log("key pressed");
});

Then using keyCode, you can find which key was pressed and play a sound accordingly:
JavaScript:
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.
 
Hi @Annabelle5893,
Use the keydown (or keyup) event listener in JavaScript:
JavaScript:
document.addEventListener("keydown", () => {
  console.log("key pressed");
});

Then using keyCode, you can find which key was pressed and play a sound accordingly:
JavaScript:
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?
 
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).
 
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
 
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
}
 
In the keycode table, it lists a "key code", a "key", a "code", and a "unicode". For example:

480Digit00
48Digit0apostrophe
48ºDigit0ºordinal indicator
Now I'm confused! How can three keys be assigned to the same code?
 
And it gets worse! Look for example at keycode 50 with four keys:

502Digit22 Key
50@Digit2@at sign
50²Digit2²sqaure
50Digit2trademark

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.
 
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.
 
Last edited by a moderator:
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.
 
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?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom