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
Annabelle5893 said:
I think I may have fixed the look by removing all the instances of "dot dot dot" (...), and put a closing brace (}) at the bottom after all the case statements. Does this look right?
JavaScript: 
switch (event.keycode) {
    case 49,97:
        dial1();
        break;
    default:
        hasDialedNumber = false;
    case 50,98:
        dial2();
        break;
    case 51,99:
        dial3();
        break;
    case 52,100:
        dial4();
        break;
    case 53,101:
        dial5();
        break;
    case 54,102:
        dial6();
        break;
    case 55,103:
        dial7();
        break;
    case 56,104:
        dial8();
        break;
    case 57,105:
        dial9();
        break;
    case 106:
        dialStar();
        break;
    case 48,96:
        dial0();
        break;
    case 109:
        dialPound();
        break;
}
Click to expand...
place the default statement after your last case statement
 
Upvote 0 Downvote
I fixed that "default" statement.
JavaScript: 
    case 49,97:
        dial1();
        break;
    case 50,98:
        dial2();
        break;
    case 51,99:
        dial3();
        break;
    case 52,100:
        dial4();
        break;
    case 53,101:
        dial5();
        break;
    case 54,102:
        dial6();
        break;
    case 55,103:
        dial7();
        break;
    case 56,104:
        dial8();
        break;
    case 57,105:
        dial9();
        break;
    case 106:
        dialStar();
        break;
    case 48,96:
        dial0();
        break;
    case 109:
        dialPound();
        break;
    default:
        hasDialedNumber = false;
}
 
Upvote 0 Downvote
Annabelle5893 said:
I fixed that "default" statement.
JavaScript: 
    case 49,97:
        dial1();
        break;
    case 50,98:
        dial2();
        break;
    case 51,99:
        dial3();
        break;
    case 52,100:
        dial4();
        break;
    case 53,101:
        dial5();
        break;
    case 54,102:
        dial6();
        break;
    case 55,103:
        dial7();
        break;
    case 56,104:
        dial8();
        break;
    case 57,105:
        dial9();
        break;
    case 106:
        dialStar();
        break;
    case 48,96:
        dial0();
        break;
    case 109:
        dialPound();
        break;
    default:
        hasDialedNumber = false;
}
Click to expand...
much better
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Antero360 said:
much better
Click to expand...
I wonder if I should put a function of ToggleLineStatus. It would probably look something like this. I hope this looks right.
JavaScript: 
function toggleLineStatus(){number="";pin="";checkForPin=false;document.getElementById('numberbeingdialed').innerHTML=number;var wasOnHook=false;if(!offHook){offHook=true;document.getElementById('hookstatus').innerHTML="Off";wasOnHook=true;}else{offHook=false;document.getElementById('hookstatus').innerHTML="On";clunk.pause();ringback.pause();clunk.currentTime=0;ringback.currentTime=0;}
if(ringbackDialed){startRingback();}else{if(wasOnHook){ring.pause();ring.currentTime=0;playDialTone();dialingAllowed=true;nextDigitDialable=true;ringbackDialed=false;keepPlaying=true;}else{stopDialTone();setOpacity(100);allCircuitsBusy=false;keepPlaying=false;}}}
 
Upvote 0 Downvote
Annabelle5893 said:
I wonder if I should put a function of ToggleLineStatus. It would probably look something like this. I hope this looks right.
JavaScript: 
function toggleLineStatus(){number="";pin="";checkForPin=false;document.getElementById('numberbeingdialed').innerHTML=number;var wasOnHook=false;if(!offHook){offHook=true;document.getElementById('hookstatus').innerHTML="Off";wasOnHook=true;}else{offHook=false;document.getElementById('hookstatus').innerHTML="On";clunk.pause();ringback.pause();clunk.currentTime=0;ringback.currentTime=0;}
if(ringbackDialed){startRingback();}else{if(wasOnHook){ring.pause();ring.currentTime=0;playDialTone();dialingAllowed=true;nextDigitDialable=true;ringbackDialed=false;keepPlaying=true;}else{stopDialTone();setOpacity(100);allCircuitsBusy=false;keepPlaying=false;}}}
Click to expand...

Expanded version
JavaScript: 
function toggleLineStatus(){
    var number="";
    var pin="";
    var checkForPin=false;
    document.getElementById('numberbeingdialed').innerHTML=number;
    var wasOnHook=false;
   
    if(!offHook){
        offHook=true;
        document.getElementById('hookstatus').innerHTML="Off";
        wasOnHook=true;
    } else {
        offHook=false;
        document.getElementById('hookstatus').innerHTML="On";
        clunk.pause();
        ringback.pause();
        clunk.currentTime=0;
        ringback.currentTime=0;
    }

    if(ringbackDialed){
        startRingback();
    } else {
        if(wasOnHook){
            ring.pause();
            ring.currentTime=0;
            playDialTone();
            dialingAllowed=true;
            nextDigitDialable=true;
            ringbackDialed=false;
            keepPlaying=true;
        } else {
            stopDialTone();
            setOpacity(100);
            allCircuitsBusy=false;
            keepPlaying=false;
        }
    }
}
Looks good to me 🙂
 
Upvote 0 Downvote
Do these "case" statements look right to you? I especially want to find out, how would I play the audio with these keystrokes? Would I have to add an "onclick" statement to each keystroke case statement?
JavaScript: 
document.onkeydown = function (event) {
switch (event.keycode) {
    case 32:
        toggleLineStatus();
        break;
    case 49,97:
        dial1();
        break;
    case 50,98:
        dial2();
        break;
    case 51,99:
        dial3();
        break;
    case 52,100:
        dial4();
        break;
    case 53,101:
        dial5();
        break;
    case 54,102:
        dial6();
        break;
    case 55,103:
        dial7();
        break;
    case 56,104:
        dial8();
        break;
    case 57,105:
        dial9();
        break;
    case 106:
        dialStar();
        break;
    case 48,96:
        dial0();
        break;
    case 109:
        dialPound();
        break;
    default:
        hasDialedNumber = false;
}
 
Upvote 0 Downvote
Annabelle5893 said:
Do these "case" statements look right to you? I especially want to find out, how would I play the audio with these keystrokes? Would I have to add an "onclick" statement to each keystroke case statement?
JavaScript: 
document.onkeydown = function (event) {
switch (event.keycode) {
    case 32:
        toggleLineStatus();
        break;
    case 49,97:
        dial1();
        break;
    case 50,98:
        dial2();
        break;
    case 51,99:
        dial3();
        break;
    case 52,100:
        dial4();
        break;
    case 53,101:
        dial5();
        break;
    case 54,102:
        dial6();
        break;
    case 55,103:
        dial7();
        break;
    case 56,104:
        dial8();
        break;
    case 57,105:
        dial9();
        break;
    case 106:
        dialStar();
        break;
    case 48,96:
        dial0();
        break;
    case 109:
        dialPound();
        break;
    default:
        hasDialedNumber = false;
}
Click to expand...
looks good to me 🙂
 
Upvote 0 Downvote
Annabelle5893 said:
I especially want to find out, how would I play the audio with these keystrokes? Would I have to add an "onclick" statement to each keystroke case statement?
Click to expand...
You don't need to add anything...you already have all you need...
When you press a button, document.onkeydown gets called...when this gets called, the logic that you placed in that function on the right side of the = sign will run...
event.keycode, which represents the button that was pressed will be passed to the switch statement, the switch statement will locate the correct case based on the numbers each case statement has... once the correct case statement is found, the body of that case statement will execute. So if you think about it... it should look something like this

Code: 
//we will use keycode 52 as example
user presses key > document.onkeydown is called > switch (52) > case 52 (if not, sent to default statement):
 > dial4(); > break; > any other code after that document.onkeydown runs
 
Upvote 0 Downvote
Antero360 said:
You don't need to add anything...you already have all you need...
When you press a button, document.onkeydown gets called...when this gets called, the logic that you placed in that function on the right side of the = sign will run...
event.keycode, which represents the button that was pressed will be passed to the switch statement, the switch statement will locate the correct case based on the numbers each case statement has... once the correct case statement is found, the body of that case statement will execute. So if you think about it... it should look something like this

Code: 
//we will use keycode 52 as example
user presses key > document.onkeydown is called > switch (52) > case 52 (if not, sent to default statement):
 > dial4(); > break; > any other code after that document.onkeydown runs
Click to expand...
I'm examining my app in Firefox, and it says a "GotKeywordExpression Else" error on Line 141. Here's a screenshot.
1691837034536.png
And here's the code:
JavaScript: 
function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
}
    if(allowDial == true) {
        dialTone.play();
}
    } else {
offHook ();
timeoutHowler.play();
}
 
Upvote 0 Downvote
Annabelle5893 said:
I'm examining my app in Firefox, and it says a "GotKeywordExpression Else" error on Line 141. Here's a screenshot.
View attachment 2235
And here's the code:
JavaScript: 
function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
}
    if(allowDial == true) {
        dialTone.play();
}
    } else {
offHook ();
timeoutHowler.play();
}
Click to expand...
I'll give you a hint: count your brackets 😉
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Now there's an error of "Expected Expression: Got keyword If", on Line 138:4. Here's the code:
JavaScript: 
function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
} else [
    if(allowDial == true)
        dialTone.play();
    } else {
offHook ()
timeoutHowler.play();
}
 
Upvote 0 Downvote
Annabelle5893 said:
I'm examining my app in Firefox, and it says a "GotKeywordExpression Else" error on Line 141. Here's a screenshot.
View attachment 2235
And here's the code:
JavaScript: 
function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
}
    if(allowDial == true) {
        dialTone.play();
} //HINT
    } else { //HINT
offHook ();
timeoutHowler.play();
}
//one of those two belongs here ;)
Click to expand...
Please look at my comments
 
Upvote 0 Downvote
Annabelle5893 said:
In one of your comments, you say, "One of those two belongs here". Are you saying there shall be two } after the "TimeoutHowler.play" statement? Or are you referring to the } on a line by itself? You say "hint", but I'm confused as there are a few instances of that.
Click to expand...
look again please... there are 2 HINTS... My other comment states WHERE ONE OF THE HINTS needs to go in order to be correct 😉

look at how an if-else statement is structured.. there should only be ONE } BEFORE THE ELSE 🙂
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp 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