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?
 
Here's an example of the "Hookswitch Status" button, which I've attempted to make into a switch. This is the one where I'd like to assign to the External telephone Pickup, followed by Internal Telephone Pickup, then dial tone. when the switch is switched off, I want to play the external and internal telephone hangup noises I've recorded. These signal "Off Hook" and "On Hook" status respectively. Tell me if this looks right to you.

HTML:
<html>

<head>

<title>Hookswitch Status</title

</head>

<body>

<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>

</body>
    
</html>
 
Last edited:
I don't know what you're trying to achieve, so I can't say if it's correct.
You will also have to show the JavaScript code that you're having a problem with.

Try running it and see if you're getting the outcome you expect, or if there are any errors in the console.
 
I don't know what you're trying to achieve, so I can't say if it's correct.
You will also have to show the JavaScript code that you're having a problem with.

Try running it and see if you're getting the outcome you expect, or if there are any errors in the console.
When I run it in a web browser, such as Microsoft Edge or Firefox, the switch seems to show up, but when I press it, nothing happens. I'm trying to get it to play an external telephone pickup noise followed by an internal pickup noise and a dial tone when switched on, then play an internal followed by an external telephone receiver hang up noise when switched off. Then with the numbers, the dial tone switches off automatically and you would hear the sounds of digits being dialed. Kind of like when you dial a phone.
 
Have you not written any JavaScript code with a click event for the switch?
How do you expect it to work if there's no JS telling it what to do when clicked?
 
JavaScript:
document.querySelector("#hookswitch").addEventListener("click", function() {
  //code to run when switch is clicked
});
Here's a basic click event listener for an element, in this case the button with the hookswitch ID.
Inside the curly brackets, where I've written the comment, you can put the code you want to run when the switch is clicked
 
JavaScript:
document.querySelector("#hookswitch").addEventListener("click", function() {
  //code to run when switch is clicked
});
Here's a basic click event listener for an element, in this case the button with the hookswitch ID.
Inside the curly brackets, where I've written the comment, you can put the code you want to run when the switch is clicked
Where do I put the links to the audio? Would I write something like:
<audio id="USADialtone" src="M:/Documents/Virtual Phone/Call Progress Tones/USA Dial Tone 1.ogg"></audio>
 
That should work. but I recommend using a relative file path to access the audio files.

For example in your main HTML file is in M:/Documents/Virtual Phone, use a relative path like this for the audio: Call Progress Tones/USA Dial Tone 1.ogg
<audio id="USADialtone" src="Call Progress Tones/USA Dial Tone 1.ogg"></audio>

You can either put the audio files directly in the HTML as you're doing, or create an audio object in the JavaScript.

Check my first post in this thread how I used the Audio() Constructor, and played it with the play() method.
 
case only goes in a switch statement which you're not using for this.

You don't need to check if audio is defined because you know it will be defined when you click the switch.

You need to use either var, let or const to declare the variable audio.
Declare and define the variable audio before using it.

Here's the fixed code:
JavaScript:
document.querySelector("#hookswitch").addEventListener("click", function() {
  let audio = new Audio("USA Dial Tone 1.ogg");
  audio.loop = false;
  audio.play();
});
 
How does this look so far?



<HTML>
<HEAD>
<meta name="GENERATOR" content="Microsoft&reg; HTML Help Workshop 4.1">
<Title>Virtual Phone</Title>
</HEAD>
<BODY>
document.addEventListener("keydown", () => {
console.log("key pressed");
});
document.addEventListener("keydown", (e) => {
let audio;

switch (e.keyCode) {
// keycodes can be found online: JavaScript Key Code List & Table | Toptal®
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");
}

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/USA Dial Tone 1.ogg"></audio>
<audio id="Rotary Pulse Dial 1" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Up.ogg"></audio>
<audio id="Rotary Pulse Dial 1" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Down.ogg"></audio>
<audio id="Rotary Pulse Dial 2" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Up.ogg"></audio>
<audio id="Rotary Pulse Dial 2" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Down.ogg"></audio>
<audio id="Rotary Pulse Dial 3" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Up.ogg"></audio>
<audio id="Rotary Pulse Dial 3" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Down.ogg"></audio>
<audio id="Rotary Pulse Dial 4" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Up.ogg"></audio>
<audio id="Rotary Pulse Dial 4" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Down.ogg"></audio>


</BODY>
</HTML>
 
You can't have JavaScript code floating in HTML code. It should either be in an external JS file and linked, or in <script></script> tags.
Also put the script at the end of the body, so that it loads after the page has loaded.

ID's can't have spaces in them, as you have in most of your audio elements.
 
In this code of audio sources, the files with "Wind Up" in their names are assigned to when a key is pressed down, while the ones with "Wind Down" in their names are assigned to when a key is released. Does this look right to you?
HTML:
<audio id="RotaryPulseDial1" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial1" src="Rotary Pulse Dials/Rotary Pulse Dial 1 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial2" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Up.ogg"></audio>
<audio id="Rotary PulseDial2" src="Rotary Pulse Dials/Rotary Pulse Dial 2 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial3" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial3" src="Rotary Pulse Dials/Rotary Pulse Dial 3 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial4" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial 4" src="Rotary Pulse Dials/Rotary Pulse Dial 4 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial5" src="Rotary Pulse Dials/Rotary Pulse Dial 5 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial5" src="Rotary Pulse Dials/Rotary Pulse Dial 5 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial6" src="Rotary Pulse Dials/Rotary Pulse Dial 6 Wind Up.ogg"></audio>
<audio id="Rotary PulseDial6" src="Rotary Pulse Dials/Rotary Pulse Dial 6 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial7" src="Rotary Pulse Dials/Rotary Pulse Dial 7 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial7" src="Rotary Pulse Dials/Rotary Pulse Dial 7 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial8" src="Rotary Pulse Dials/Rotary Pulse Dial 8 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial8 src="Rotary Pulse Dials/Rotary Pulse Dial 8 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial9" src="Rotary Pulse Dials/Rotary Pulse Dial 9 Wind Up.ogg"></audio>
<audio id="RotaryPulseDial9" src="Rotary Pulse Dials/Rotary Pulse Dial 9 Wind Down.ogg"></audio>
<audio id="RotaryPulseDial0" src="Rotary Pulse Dials/Rotary Pulse Dial 0 Wind Up.ogg"></audio>
    <audio id="RotaryPulseDial0" src="Rotary Pulse Dials/Rotary Pulse Dial 0 Wind Down.ogg"></audio>
 
ID names must be unique and can only be used for one element. Use a class name if you ant to use it for more than one element.
The second audio element with the RotaryPulseDial8 ID should have a closing " after the ID.

Other than that, the HTML looks good.
Then you can use the keydown and keyup event listeners to do what you're trying to do.
 
Would you please be so kind as to provide an example of those "Keyup" and "keydown" event listeners with what I wrote? I want to make sure I know where to put them in the app. As for the ID's being unique, what would a class name look like if I were to use that instead of the repeated ID.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom