Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. 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.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" 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
Play Snayk 3+, higher dimensional snake game?
Annabelle5893 said:
Is the "%20" sort of an HTML equivalent to a space in a file name?
Click to expand...
Something like that lol. It's actually called, url encoding. It allows people to use non ASCII characters in html, in urls, and in many places. Next time you open a document on your machine with a browser, take a look the name in the directory with File Explorer, and take a look at the url in the browser 🙂


www.w3schools.com

HTML URL Encoding Reference

Web browsers request pages from web servers by using a URL.
www.w3schools.com www.w3schools.com
 
Upvote 0 Downvote
Antero360 said:
Something like that lol. It's actually called, url encoding. It allows people to use non ASCII characters in html, in urls, and in many places. Next time you open a document on your machine with a browser, take a look the name in the directory with File Explorer, and take a look at the url in the browser 🙂


www.w3schools.com

HTML URL Encoding Reference

Web browsers request pages from web servers by using a URL.
www.w3schools.com www.w3schools.com
Click to expand...
The error I don't understand is where it says, "Uncaught ReferenceError: ringRing is not defined". What exactly does this mean?
 
Upvote 0 Downvote
Annabelle5893 said:
The error I don't understand is where it says, "Uncaught ReferenceError: ringRing is not defined". What exactly does this mean?
Click to expand...
The error message says it all 🙂.. whatever you named "ringRing" has not been defined...meaning:
1) is "ringRing" a function? If so, there is no function definition for it.
JavaScript: 
//function declarations/definitions
var ringRing = function () {
    //logic goes here
}

function ringRing(string){
    //logic goes here
}

2) is "ringRing" a variable? If so, there is no declaration for it... i.e.:
JavaScript: 
//any of these are variables
let ringRing = "";
var ringRing = 5;
const ringRing = [a,b,c];
 
Upvote 0 Downvote
Antero360 said:
The error message says it all 🙂.. whatever you named "ringRing" has not been defined...meaning:
1) is "ringRing" a function? If so, there is no function definition for it.
JavaScript: 
//function declarations/definitions
var ringRing = function () {
    //logic goes here
}

function ringRing(string){
    //logic goes here
}

2) is "ringRing" a variable? If so, there is no declaration for it... i.e.:
JavaScript: 
//any of these are variables
let ringRing = "";
var ringRing = 5;
const ringRing = [a,b,c];
Click to expand...
Where would I put the "event listener" parameters for the key presses? Would they go after the "if" statements that tell what keys to press to trigger the audio files of the "dialing tones" of numbers? 😕
 
Upvote 0 Downvote
Annabelle5893 said:
Where would I put the "event listener" parameters for the key presses? Would they go after the "if" statements that tell what keys to press to trigger the audio files of the "dialing tones" of numbers? 😕
Click to expand...
They would go inside of the if statement, inside the event listener. So what you want to do is call document.onkeypress, to detect when a key has been pressed, and then once a key has been pressed, determine what key was pressed. So for example, let's say you want to detect when the spacebar is pressed.. the snippet of code would look something like this:
JavaScript: 
document.onkeypress = function (event) {
    //you're going to want to use the parameter being passed in to determine what was pressed
    //since we are looking for the spacebar, we will be looking for the code 32    
    // if the event's keycode is equal to 32, then play this sound
}

As a reference: here is the link to the keycode table again 🙂
www.toptal.com

JavaScript Key Code List & Table | Toptal®

Easily find every JavaScript Key Code in one table. Get started now.
www.toptal.com www.toptal.com
 
Upvote 0 Downvote
Antero360 said:
They would go inside of the if statement, inside the event listener. So what you want to do is call document.onkeypress, to detect when a key has been pressed, and then once a key has been pressed, determine what key was pressed. So for example, let's say you want to detect when the spacebar is pressed.. the snippet of code would look something like this:
JavaScript: 
document.onkeypress = function (event) {
    //you're going to want to use the parameter being passed in to determine what was pressed
    //since we are looking for the spacebar, we will be looking for the code 32   
    // if the event's keycode is equal to 32, then play this sound
}

As a reference: here is the link to the keycode table again 🙂
www.toptal.com

JavaScript Key Code List & Table | Toptal®

Easily find every JavaScript Key Code in one table. Get started now.
www.toptal.com www.toptal.com
Click to expand...
So for example, it would say something like:
JavaScript: 
 document.onkeydown=function(e){var key=e.keyCode?e.keyCode:e.which;document.onkeydown=function(e){var key=e.keyCode?e.keyCode:e.which;if(e.which===32){receiverRaised();}
var dialTone=new Audio('Dial Tone/USA%20Dial%20Tone.ogg');
function dial(){allowDial=true;function (){dialTone.play();
That code might look a little messed up, but I'm trying my best!
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Annabelle5893 said:
So for example, it would say something like:
JavaScript: 
 document.onkeydown=function(e){var key=e.keyCode?e.keyCode:e.which;document.onkeydown=function(e){var key=e.keyCode?e.keyCode:e.which;if(e.which===32){receiverRaised();}
var dialTone=new Audio('Dial Tone/USA%20Dial%20Tone.ogg');
function dial(){allowDial=true;function (){dialTone.play();
That code might look a little messed up, but I'm trying my best!
Click to expand...
very close 🙂
I do have a couple of comments for ya:
1) why do you feel like you need to use document.onkeydown?
2) if I am using a keyboard, is it safe to assume that all keys on the keyboard should be mapped to a code?
3) Follow-up from last question, why do you feel like you need to use e.which?
4) Aside from the spaces, you will also need to either a) escape (using the backslash ) or b) url encode the forward slashes if they are part of the name of the file, otherwise they will be interpreted as file paths.
 
Upvote 0 Downvote
Antero360 said:
very close 🙂
I do have a couple of comments for ya:
1) why do you feel like you need to use document.onkeydown?
2) if I am using a keyboard, is it safe to assume that all keys on the keyboard should be mapped to a code?
3) Follow-up from last question, why do you feel like you need to use e.which?
4) Aside from the spaces, you will also need to either a) escape (using the backslash ) or b) url encode the forward slashes if they are part of the name of the file, otherwise they will be interpreted as file paths.
Click to expand...
I'm afraid I don't understand what you're asking. Escape using the backslash? What exactly does that mean? The "e.which" seems to be part of the javascript in the files that this app is loosely based on. Should I do something better than that?
 
Upvote 0 Downvote
Annabelle5893 said:
I'm afraid I don't understand what you're asking. Escape using the backslash? What exactly does that mean? The "e.which" seems to be part of the javascript in the files that this app is loosely based on. Should I do something better than that?
Click to expand...
in regards to the escaping
JavaScript: 
var dialTone=new Audio('Dial Tone/USA%20Dial%20Tone.ogg');
"Tone/USA"... is this part of the name, or the path to the file
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Annabelle5893 said:
I'm afraid I don't understand what you're asking. Escape using the backslash? What exactly does that mean? The "e.which" seems to be part of the javascript in the files that this app is loosely based on. Should I do something better than that?
Click to expand...
e.which... personally I have never used nor seen the call used... I've always seen e.target, e.keyCode, (insert the more common calls lol)...
 
Upvote 0 Downvote
Antero360 said:
e.which... personally I have never used nor seen the call used... I've always seen e.target, e.keyCode, (insert the more common calls lol)...
Click to expand...
No wonder I haven't seen it lol... apparently it's been deprecated.

UIEvent: which property - Web APIs | MDN

The UIEvent.which read-only property of the UIEvent interface returns a number that indicates which button was pressed on the mouse, or the numeric keyCode or the character code (charCode) of the key pressed on the keyboard.
developer.mozilla.org developer.mozilla.org
 
Upvote 0 Downvote
Antero360 said:
No wonder I haven't seen it lol... apparently it's been deprecated.

UIEvent: which property - Web APIs | MDN

The UIEvent.which read-only property of the UIEvent interface returns a number that indicates which button was pressed on the mouse, or the numeric keyCode or the character code (charCode) of the key pressed on the keyboard.
developer.mozilla.org developer.mozilla.org
Click to expand...
...apparently, so is keyCode
www.w3schools.com

KeyboardEvent keyCode Property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Upvote 0 Downvote
Antero360 said:
Is it safe to assume that "\Virtual Phone\Call Progress Tones\" is the root of your project? By this, I mean, are all your html files under this directory?
Click to expand...
Virtual Phone is the route directory. Call Progress Tones is a subdirectory, as are "Rotary Pulse Dials", "DTMF Dials", "MF Dials", "SF Dials", and "Payphone Coin Tones". "Call Progress Tones" has "Dial Tone", "Busy Tone", "Reorder Tone", "Ringback Tone" (referring to the internal ring heard in the handset), and "Ringing Tones" (Referring to the External ring, heard on the called party's phone). Within "Call Progress Tones" are also "Telephone Pickups and Hangups" which has two subdirectories, Internal and External, and last but definitely not least, there's a subdirectory in Call Progress Tones called "Receiver Off Hook Tone", and one called "Vacant Level Tone". If you know what I mean.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Antero360 said:
Is it safe to assume that "\Virtual Phone\Call Progress Tones\" is the root of your project? By this, I mean, are all your html files under this directory?
Click to expand...
How about this? How does this look for an "src" example?
HTML: 
<audio id="RingingTone" src="file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Ringing%20Tone/Princess%20702B%20Bell%20Ring.ogg"></audio>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

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