Playing Audio Using Keystrokes: Is It Possible?

[Annabelle5893]

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?

 

[Annabelle5893]

@Johna I've put all the Javascript code in a separate .js file so it will be easier if I was to make this into a desktop application. Tell me if this Javascript code looks right to you.

document.querySelector("#hookswitch").addEventListener("click", function() {
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was pressed down");
  }
  let audio = new Audio("Pick Up Phone 1.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) {
  //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");
  let audio = new Audio("Telephone Disconnect Noise 1.ogg");
  audio.loop = false;
  audio.play();
  let audio = new Audio("Hang Up Phone 1.ogg");
  audio.loop = false;
  audio.play();
});
  }
});
    if (e.which === 49 || e.which === 97) {RotaryPulseDial1();}
    if (e.which === 50 || e.which === 98) {MF2();}
    if (e.which === 51 || e.which === 99) {MF3();}
    if (e.which === 52 || e.which === 100) {MF4();}
    if (e.which === 53 || e.which === 101) {MF5();}
    if (e.which === 54 || e.which === 102) {MF6();}
    if (e.which === 55 || e.which === 103) {MF7();}
    if (e.which === 56 || e.which === 104) {MF8();}
    if (e.which === 57 || e.which === 105) {MF9();}
    if (e.which === 48 || e.which === 96) {MF0();}
function BELL5() {
    aBELLS5.play();
}
function BELL10() {
    aBELLS10.play();
}
function BELL25() {
    aBELLS25.play();
}

 

[Johna]

What are you trying to do in this piece of code?

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was pressed down");
  }
  let audio = new Audio("Pick Up Phone 1.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();
});

Right now, when any key is pressed it's going to play USE Dial Tone 1.ogg, and if spacebar was press it'll also output "Spacebar was pressed down" in the console.
It look like you're trying to play 3 different audio files when the space bar is pressed?
If so, you should use different variable names for each audio to avoid the variables being overwritten, and put it in the if statement.

Code I post here may have comments and console.log()'s which are not needed in your code, and are only there to explain, or as examples.
Learning JavaScript before trying to attempt a not-so-easy project requiring a lot of JavaScript will definitely make the process much easier.

Also try running it in the browser and see if it's working as expected, if not, be sure to check the console for errors.
There are a lot of errors in this code, checking the console will highlight these errors.

 

[Johna]

The closing curly bracket of the second if statement is in the wrong place.
All open quotes, brackets etc. must be closed before their parent's brackets are closed, as it is contained inside the parent function only.

 

[Annabelle5893]

Could you please give me an example of how each of those three files could follow each other? Pick Up Phone followed by Telephone Connect Noise and then USA Dial Tone. How would I type those as variables?

 

[Johna]

Sorry for the late reply, I've just had a lot going on these last few days.

You could check if the previous audio has finished playing before playing the next audio file like this.

let audio1 = new Audio("audio1.ogg");
let audio2 = new Audio("audio2.ogg");
let audio3 = new Audio("audio3.ogg");

audio1.loop = false;
audio2.loop = false;
audio3.loop = false;

audio1.play();
audio1.addEventListener("ended", () => {
  audio2.play();
  audio2.addEventListener("ended", () => {
    audio3.play();
  });
});

 

[Annabelle5893]

By this code you wrote, would I be able to have it say:

let audio1 = new Audio("PickUpPhone1.ogg");
let audio2 = new Audio("TelephoneConnectNoise1.ogg");
let audio3 = new Audio("USADialTone1.ogg");

 

[Johna]

Yes

 

[Annabelle5893]

Would I have to wright something like "var=" before these? Since you said they're variables?

 

[Johna]

Either var, let or const.
You have already used let so there's no need to use var

 

[Annabelle5893]

How's this for Javascript code?

document.querySelector("#hookswitch").addEventListener("click", function() {
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was pressed down");
  }
  let audio = new Audio("Pick Up Phone 1.ogg");
  let audio = new Audio("Telephone Connect Noise 1.ogg");
  let audio = new Audio("USA Dial Tone 1.ogg");
  audio.loop = false;
  audio.play();
});
document.addEventListener("keyup", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was released");
  let audio = new Audio("Telephone Disconnect Noise 1.ogg");
  let audio = new Audio("Hang Up Phone 1.ogg");
  audio.loop = false;
  audio.play();
});
  }
});
    if (e.which === 49 || e.which === 97) {DTMFDial1();}
    if (e.which === 50 || e.which === 98) {DTMFDial2();}
    if (e.which === 51 || e.which === 99) {DTMFDial3();}
    if (e.which === 52 || e.which === 100) {DTMFDial4();}
    if (e.which === 53 || e.which === 101) {DTMFDial5();}
    if (e.which === 54 || e.which === 102) {DTMFDial6();}
    if (e.which === 55 || e.which === 103) {DTMFDial7();}
    if (e.which === 56 || e.which === 104) {DTMFDial8();}
    if (e.which === 57 || e.which === 105) {DTMFDial9();}
    if (e.which === 48 || e.which === 96) {DTMFDial0();}
function BELL5() {
    aBELLS5.play();
}
function BELL10() {
    aBELLS10.play();
}
function BELL25() {
    aBELLS25.play();
}

 

[Johna]

Have you tried running it in a browser with the HTML?

 

[Annabelle5893]

Have you tried running it in a browser with the HTML?

I've tried running it in both Firefox and Microsoft Edge, but when I press any of the assigned keys, nothing happens. What did I do wrong? 😕

 

[Johna]

Have you checked the console for errors? that's normally the first place to look if code isn't working as expected.

 

[Annabelle5893]

Have you checked the console for errors? that's normally the first place to look if code isn't working as expected.

I'm not sure what console you mean. I don't have any Javascript coding programs, just one for HTML (HTML Help Workshop). That's where I made the HTML, and I made the Javascript in Notepad. Is that a bad idea? Should I install something like Codeblocks or Node.js?

 

[Johna]

I mean the console in the developer tools part of most browsers. Press f12 or ctrl+shift+i to open the developer tools. Click the "console" tab and check if there are any errors there.

 

[Annabelle5893]

I mean the console in the developer tools part of most browsers. Press f12 or ctrl+shift+i to open the developer tools. Click the "console" tab and check if there are any errors there.

It seems to say:
ErrorUncaught SyntaxError: redeclaration of let audio
note: Previously declared at line 95, column 6
I'm confused on this one!

 

[Johna]

So this error means that you have already declared the variable audio and you're trying to redeclare it.
Either declare and use a new variable name, or reassign the audio variable, but without redeclaring it like this:

let audio = new Audio("audio1.ogg"); //this line is declaring and assigning a value to the audio variable
audio = new Audio("audio2.ogg"); //this line is only reassigning the audio variable, but not redeclaring it. note that "let" has been removed from this line

 

[Annabelle5893]

So this error means that you have already declared the variable audio and you're trying to redeclare it.
Either declare and use a new variable name, or reassign the audio variable, but without redeclaring it like this:

let audio = new Audio("audio1.ogg"); //this line is declaring and assigning a value to the audio variable
audio = new Audio("audio2.ogg"); //this line is only reassigning the audio variable, but not redeclaring it. note that "let" has been removed from this line

Now I have redefined the javascript code.

<script>
document.querySelector("#hookswitch").addEventListener("click", function() {
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was pressed down");
  }
  let audio = new Audio("Pick Up Phone 1.ogg");
  audio = new Audio("Telephone Connect Noise 1.ogg");
  audio = new Audio("USA Dial Tone 1.ogg");
  audio.loop = false;
  audio.play();
});
document.addEventListener("keyup", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was released");
  audio = new Audio("Telephone Disconnect Noise 1.ogg");
  audio = new Audio("Hang Up Phone 1.ogg");
  audio.loop = false;
  audio.play();
});
  }
});
    if (e.which === 49 || e.which === 97) {DTMFDial1();}
  audio = new Audio("DTMF Tone Dial 1.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 50 || e.which === 98) {DTMFDial2();}
  audio = new Audio("DTMF Tone Dial 2.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 51 || e.which === 99) {DTMFDial3();}
  audio = new Audio("DTMF Tone Dial 3.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 52 || e.which === 100) {DTMFDial4();}
  audio = new Audio("DTMF Tone Dial 4.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 53 || e.which === 101) {DTMFDial5();}
  audio = new Audio("DTMF Tone Dial 5.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 54 || e.which === 102) {DTMFDial6();}
  audio = new Audio("DTMF Tone Dial 6.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 55 || e.which === 103) {DTMFDial7();}
  audio = new Audio("DTMF Tone Dial 7.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 56 || e.which === 104) {DTMFDial8();}
  audio = new Audio("DTMF Tone Dial 8.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 57 || e.which === 105) {DTMFDial9();}
  audio = new Audio("DTMF Tone Dial 9.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 106) {dialStar();}
  audio = new Audio("DTMF Tone Dial Star.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 48 || e.which === 96) {DTMFDial0();}
  audio = new Audio("DTMF Tone Dial 0.ogg");
  audio.loop = false;
  audio.play();
    if (e.which == 109) {dialPound();}
  audio = new Audio("DTMF Tone Dial Pound.ogg");
  audio.loop = false;
  audio.play();
function BELL5() {
    aBELLS5.play();
}
function BELL10() {
    aBELLS10.play();
}
function BELL25() {
    aBELLS25.play();
}
</script>

But now I get this error:
ErrorUncaught SyntaxError: expected expression, got ')'
What does this mean?

 

[Johna]

I'm assuming the error is in this part of the code.

document.addEventListener("keyup", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was released");
  audio = new Audio("Telephone Disconnect Noise 1.ogg");
  audio = new Audio("Hang Up Phone 1.ogg");
  audio.loop = false;
  audio.play();
});
  }

Double-check that if statement and see if it looks correct.
The closing curly bracket (}) is in the wrong place

 

[Annabelle5893]

I'm assuming the error is in this part of the code.

document.addEventListener("keyup", function(e) {
  if (e.keyCode == 32) {
    console.log("Spacebar was released");
  audio = new Audio("Telephone Disconnect Noise 1.ogg");
  audio = new Audio("Hang Up Phone 1.ogg");
  audio.loop = false;
  audio.play();
});
  }

Double-check that if statement and see if it looks correct.
The closing curly bracket (}) is in the wrong place

How's this?

document.querySelector("#hookswitch").addEventListener("click", function() {
document.addEventListener("keydown", function(e) {
  if (e.which == 32) {
    console.log("Spacebar was pressed down");
  
  let audio = new Audio("Pick Up Phone 1.ogg");
  audio = new Audio("Telephone Connect Noise 1.ogg");
  audio = new Audio("USA Dial Tone 1.ogg");
  audio.loop = false;
  audio.play();
});
document.addEventListener("keyup", function(e) {
  if (e.which == 32) {
    console.log("Spacebar was released");
  audio = new Audio("Telephone Disconnect Noise 1.ogg");
  audio = new Audio("Hang Up Phone 1.ogg");
  audio.loop = false;
  audio.play();
});
  }
});
    if (e.which === 49 || e.which === 97) {DTMFDial1();}
  audio = new Audio("DTMF Tone Dial 1.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 50 || e.which === 98) {DTMFDial2();}
  audio = new Audio("DTMF Tone Dial 2.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 51 || e.which === 99) {DTMFDial3();}
  audio = new Audio("DTMF Tone Dial 3.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 52 || e.which === 100) {DTMFDial4();}
  audio = new Audio("DTMF Tone Dial 4.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 53 || e.which === 101) {DTMFDial5();}
  audio = new Audio("DTMF Tone Dial 5.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 54 || e.which === 102) {DTMFDial6();}
  audio = new Audio("DTMF Tone Dial 6.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 55 || e.which === 103) {DTMFDial7();}
  audio = new Audio("DTMF Tone Dial 7.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 56 || e.which === 104) {DTMFDial8();}
  audio = new Audio("DTMF Tone Dial 8.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 57 || e.which === 105) {DTMFDial9();}
  audio = new Audio("DTMF Tone Dial 9.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 106) {dialStar();}
  audio = new Audio("DTMF Tone Dial Star.ogg");
  audio.loop = false;
  audio.play();
    if (e.which === 48 || e.which === 96) {DTMFDial0();}
  audio = new Audio("DTMF Tone Dial 0.ogg");
  audio.loop = false;
  audio.play();
    if (e.which == 109) {dialPound();}
  audio = new Audio("DTMF Tone Dial Pound.ogg");
  audio.loop = false;
  audio.play();
function BELL5() {
    aBELLS5.play();
}
function BELL10() {
    aBELLS10.play();
}
function BELL25() {
    aBELLS25.play();
}