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

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?
 
Sort by date Sort by votes
To add a class name, write class="" instead of id="", but for this I would recommend using unique ID's instead so you can get the element easily with JavaScript.

As for the keyup and keydown event listeners, you use is in the same way as the click event listener, but on the document instead of a specific element.
Here's an example for when the spacebar is pressed down/released.
JavaScript: 
//run function when spacebar is pressed down
document.addEventListener("keydown", function(e) {
  //this example is for when the spacebar is pressed down, so I'm using 32, which is the keycode for the spacebar
  if (e.keyCode == 32) {
    console.log("Spacebar was pressed down");
  }
});

//run function when spacebar is released
document.addEventListener("keyup", function(e) {
  //this example is for when the spacebar is released, so I'm using 32, which is the keycode for the spacebar
  if (e.keyCode == 32) {
    console.log("Spacebar was released");
  }
});
 
Upvote 0 Downvote
So, for example, would this be unique enough?
HTML: 
<audio id="USADialtone" src="Call Progress Tones/USA Dial Tone 1.ogg"></audio>
<audio id="RotaryPulseDial1WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial1WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial2WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Up.ogg"></audio>
<audio id="Rotary PulseDial2WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial3WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial3WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial4WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial 4WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial5WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 5 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial5WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 5 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial6WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 6 Wind Up.ogg"></audio>
<audio id="Rotary PulseDial6WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 6 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial7WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 7 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial7WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 7 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial8WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 8 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial8WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 8 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial9WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 9 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial9WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 9 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial0WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 0 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial0WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 0 Wind Down.ogg"></audio>
 
Upvote 0 Downvote
How about this?


HTML: 
<audio id="USADialtone" src="Call Progress Tones/USA Dial Tone 1.ogg"></audio>
<audio id="RotaryPulseDial1WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial1WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial2WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial2WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial3WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial3WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial4WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial4WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial5WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 5 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial5WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 5 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial6WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 6 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial6WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 6 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial7WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 7 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial7WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 7 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial8WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 8 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial8WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 8 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial9WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 9 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial9WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 9 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial0WindUp" src="Rotary Pulse Dials/Rotary Pulse Dial 0 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial0WindDown" src="Rotary Pulse Dials/Rotary Pulse Dial 0 Wind Down.ogg"></audio>
 
Upvote 0 Downvote
Here's another one. After 30 seconds with no digits being dialed, I'd like this tone to play indefinitely until the spacebar is pressed to change the hookswitch to On Hook.
HTML: 
<audio id="VacantLevelTone" src="Call Progress Tones/Vacant Level Tone/Vacant Level Tone 1.ogg"></audio>
 
Upvote 0 Downvote
Sure thing! Here ya go.

HTML: 
document.querySelector("#hookswitch").addEventListener("click", function() {
  let audio = new Audio("USA Dial Tone 1.ogg");
  audio.loop = false;
  audio.play();
});
<div role="switch" aria-labelledby="id-label">
  <label for="Hookswitch Status"
  <button type="button"
          role="switch"
  id="hookswitch">Hookswitch Status
    <span class="on" aria-hidden="true">
      On
    </span>
    <span class="off" aria-hidden="true">
      Off
    </span>
  </label>
  </button>
    </div>
<audio id="USADialtone" src="Call Progress Tones/Dial Tone/USA Dial Tone 1.ogg"></audio>
 
Upvote 0 Downvote
How's this for Javascript. I placed it at the end of the HTML.
JavaScript: 
<script>
document.querySelector("#hookswitch").addEventListener("click", function() {
  let audio = new Audio("USA Dial Tone 1.ogg");
  audio.loop = false;
  audio.play();
});
document.addEventListener("keydown", () => {
  console.log("key pressed");
});
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("Rotary Pulse Dial 0.ogg");
      break;
    case 49:
      audio = new Audio("Rotary Pulse Dial 1.ogg");
      break;
    case 50:
      audio = new Audio("Rotary Pulse Dial 2.ogg");
      break;
    case 51:
      audio = new Audio("Rotary Pulse Dial 3.ogg");
      break;
    case 52:
      audio = new Audio("Rotary Pulse Dial 4.ogg");
      break;
    case 53:
      audio = new Audio("Rotary Pulse Dial 5.ogg");
      break;
    case 54:
      audio = new Audio("Rotary Pulse Dial 6.ogg");
      break;
    case 55:
      audio = new Audio("Rotary Pulse Dial 7.ogg");
      break;
    case 56:
      audio = new Audio("Rotary Pulse Dial 8.ogg");
      break;
    case 57:
      audio = new Audio("Rotary Pulse Dial 9.ogg");
  }
</script>
 
Upvote 0 Downvote
It should still be inside the <html></html> tags. Just after (or just before) the </body> closing tag.

The comments and console.log()'s I put in the code I posted is just to show what it does/where to put code. It is not needed in your code.
 
Upvote 0 Downvote
Okay. Do you know how to write and use JavaScript? If not I would recommend learning JavaScript. It would make working on this project much easier.
 
Upvote 0 Downvote
JavaScript: 
document.querySelector("#hookswitch").addEventListener("click", function() {
  if (e.keyCode == 32) {
    console.log("Spacebar was pressed down");
  }
  let audio = new Audio("Pick Up Phone.ogg");
  audio.loop = false;
  audio.play();
  let audio = new Audio("Telephone Connect Noise 1.ogg");
  audio.loop = false;
  audio.play();
  let audio = new Audio("USA Dial Tone 1.ogg");
  audio.loop = false;
  audio.play();
});
//run function when spacebar is released
document.addEventListener("keyup", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was released");
  let audio = new Audio("Telephone Disconnect Noise 1.ogg");
  audio.loop = false;
  audio.play();
  let audio = new Audio("Hang Up Phone.ogg");
  audio.loop = false;
  audio.play();
});
  }
});
How's this for the Spacebar?
 
Upvote 0 Downvote
The first press of the spacebar triggers the Telephone Pickup noise, the telephone connect noise and the dial tone, while a second press of the spacebar triggers the telephone disconnect and receiver hang up noises. Basically it's toggling the hookswitch status off hook and on hook respectively.
Click to expand...
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom