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?
 
ok
I think it's this one.
Code:
    switch(number){
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended"), function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
... so now let's run your code and see if we get any more errors
 
I pressed Control+Shift+I to go to the console, pressed enter on the link to the line, and here's a screenshot. View attachment 2244
I see the issue... do you? I'll give you a big hint: remember like almost 20pages ago lol, I had mentioned that you should define your functions outside of any other functions?
example:
JavaScript:
//how you have been doing
function func1 () {
    //logic for func1
    function func2 () {
        //logic for func2
    }
}




//the correct way
function func1() {
    //logic for func1
}

function func2(){
    //logic for func2
}

//if you need to call a function from another function
function func3 () {
    //logic for func3
    func2();
    func1();
}

Same logic applies when working with any other statements... the only time you are going to define a function inside another, is when you are calling any function that takes in a callback function as a parameter, like addEventListener, for example... Please remove the function definition for operatorPutCallThrough from inside that case statement, and place it right above the definition for response function.. Also, as a side note, might want to close out of any applications/programs that may cause you to lose focus, and distract you from coding and learning... Discord being at the top lol.. Coming from personal experience, having such apps open will often times cause me to lose my own place in coding and that is where little mistakes like this can occur.
 
Last edited:
Now there's an "unlabeled break" at line 399:12.
Code:
function response(){
    switch(number){
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended"), function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
            break;
1692238189265.png
 
Now there's an "unlabeled break" at line 399:12.
Code:
function response(){
    switch(number){
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended"), function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
            break;
View attachment 2245
Off the bat, I can see you're missing the closing bracket for that if statement...I thought we had already covered that? Are you by any chance just copying and pasting? That is a quick and easy way to miss things. I strongly recommend actually typing it out, rather than copy+paste. I also see you are still missing the }) for that addEventListener.
 
Off the bat, I can see you're missing the closing bracket for that if statement...I thought we had already covered that? Are you by any chance just copying and pasting? That is a quick and easy way to miss things. I strongly recommend actually typing it out, rather than copy+paste. I also see you are still missing the }) for that addEventListener.
I will fix it this time... but please make sure you are making these same mistakes again and again...You should have gotten the hang of it by now
 
Now there's an "unlabeled break" at line 399:12.
Code:
function response(){
    switch(number){
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended"), function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
            break;
View attachment 2245

Here is the corrected version. Once again, I reiterate: please type it out, rather than copy+paste, carefully study the syntax/format of it so that you are not repeating the same mistakes over and over.
JavaScript:
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended"), function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
            });
            break;
 
Here is the corrected version. Once again, I reiterate: please type it out, rather than copy+paste, carefully study the syntax/format of it so that you are not repeating the same mistakes over and over.
JavaScript:
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended"), function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
            });
            break;
I tried manually typing out everything you wrote in that code, down to the letter, but now it says that there's an "unexpected token of a ) on line 401:13". This is weird, since I don't have any other programs going on besides my JAWS (Job Access With Speech) screenreader and Microsoft Edge. 1692250299834.png
 
Here's another screenshot. I've been fixing the codes, manually typing the fixes you've told me about. Now it says there needs to be a } on line 374:4
View attachment 2248
Why are you indenting the last }?
The only time you need to indent is when the code is between a opening bracket "{" and closing bracket "}"... see below
JavaScript:
function func1() {
    //anything here needs to be indented
}

switch(string) {
    //anything here needs to be indented like so
    case "thatString":
        //anything here needs to be indented like so
        func1();
        break;
}

if (true) {
    //anything here needs to be indented
}

button.addEventListener("click", function (){
    //anything here needs to be indented like so
});

//indentation when nesting things
function func2 () {    
    switch(string) {
        //anything here needs to be indented like so
        case "thatString":
           //anything here needs to be indented like so
           func1();
           break;
        case "thisString":
            if (true) {
                //notice how things look
            }
    }
}
 
Last edited:
Here's another screenshot. I've been fixing the codes, manually typing the fixes you've told me about. Now it says there needs to be a } on line 374:4
View attachment 2248
Also... the error is telling you you are missing a } somewhere, not necessarily on that particular line, but somewhere that is causing it to propagate down to that line... Please reformat your code so you can see much better where the error is
 
Why are you indenting the last }?
The only time you need to indent is when the code is between a opening bracket "{" and closing bracket "}"... see below
JavaScript:
function func1() {
    //anything here needs to be indented
}

switch(string) {
    //anything here needs to be indented like so
    case "thatString":
        //anything here needs to be indented like so
        func1();
        break;
}

if (true) {
    //anything here needs to be indented
}

button.addEventListener("click", function (){
    //anything here needs to be indented like so
});

//indentation when nesting things
function func2 () {   
    switch(string) {
        //anything here needs to be indented like so
        case "thatString":
           //anything here needs to be indented like so
           func1();
           break;
        case "thisString":
            if (true) {
                //notice how things look
            }
    }
}
I know this may sound strange, but as someone who is sight challenged, what I've done with the indents is attempt to line things up with each other. Is there something I'm doing wrong?
 
I know this may sound strange, but as someone who is sight challenged, what I've done with the indents is attempt to line things up with each other. Is there something I'm doing wrong?
Not necessarily wrong, but it can make it hard for anyone trying to look at the code to properly debug the code. With indenting, it makes it a bit easier to tell where things start and where things end. The closing bracket should match up with the first character of the line that contains the opening bracket. As far as the error is concerned, like I said above, the missing closing bracket may be somewhere else. Once you can get the indentations corrected, it should be fairly easy to realize where that missing bracket is
 
Not necessarily wrong, but it can make it hard for anyone trying to look at the code to properly debug the code. With indenting, it makes it a bit easier to tell where things start and where things end. The closing bracket should match up with the first character of the line that contains the opening bracket. As far as the error is concerned, like I said above, the missing closing bracket may be somewhere else. Once you can get the indentations corrected, it should be fairly easy to realize where that missing bracket is
I wonder, how would I change the label of this switch, based on whether it is on or off? I want it to be labeled "On Hook" when switched off, and "Off Hook" when switched on.
Code:
<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>
 
I wonder, how would I change the label of this switch, based on whether it is on or off? I want it to be labeled "On Hook" when switched off, and "Off Hook" when switched on.
Code:
<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>
My first question is: is there a specific place you are looking to have this label, or are you just looking to change the "on", "off" labels?
 
I'm looking to change the labels based on the toggle of the switch. If there is a specific place where the labels should be located, where should it be?
If could consolidate into one span like so:
HTML:
<div role="switch" aria-labelledby="id-label">
  <label for="Hookswitch Status"
  <button type="button"
          role="switch"
  id="hookswitch">Hookswitch Status: 
    <span class="hookStatus off">
    </span>
  </label>
  </button>
</div>


You could do something like this


JavaScript:
//grab the button 'hookSwitch'
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event


//inside of the callback function for click event listener, add the on/off classes to the span like this:
//grab the span element 
var hookStatus = document.querySelector('span.hookStatus');

//grab check the current status class "on/off", if "on", remove and add "off", otherwise do the same if "on"
if ( hookStatus.classlist.contains('off') ){
    //remove 'off' class 
    
    //add 'on' class
    hookStatus.classlist.add('on');

    //change span text
    hookStatus.textContent = "Off Hook";
    
}
else {
    //same logic here, but opposite of what is if body
}
 

New Threads

Buy us a coffee!

Back
Top Bottom