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?
 
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
}
Would I need all the stuff within the slashes? Or is that not necessary for the programming.
 
The lines that say things like:
//inside of the callback function for click event listener, add the on/off classes to the span like this:
//grab the span element
those are comments... they aren't really necessary, but they are good to have, especially if you're learning or having a fun time debugging :D
 
those are comments... they aren't really necessary, but they are good to have, especially if you're learning or having a fun time debugging :D
How's this?

Code:
//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 = "On Hook";
    
}
else {
( hookStatus.classlist.contains('on') ){
    //remove 'on' class 
    
    //add 'off' class
    hookStatus.classlist.add('off');

    //change span text
    hookStatus.textContent = "Off Hook";
    
}
 
How's this?

Code:
//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 = "On Hook";
   
}
else {
( hookStatus.classlist.contains('on') ){
    //remove 'on' class
   
    //add 'off' class
    hookStatus.classlist.add('off');

    //change span text
    hookStatus.textContent = "Off Hook";
   
}
A few things:

1) you're missing the if keyword
JavaScript:
( hookStatus.classlist.contains('on') ){

2) you're missing a closing bracket at the end there...
JavaScript:
( hookStatus.classlist.contains('on') ){
    //remove 'on' class
   
    //add 'off' class
    hookStatus.classlist.add('off');

    //change span text
    hookStatus.textContent = "Off Hook";

3) You're still missing some of the logic... HINT: look at the comments //these are comments.
Notice how there is a line of code right below some of the comments, but not others? ;) I did this intentionally...can't call it "learning" if I just give you all the code, now can we? :)
 
I hope this looks right to you.
Code:
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
//missing logic


//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
    //missing logic
   
    //add 'on' class
    hookStatus.classlist.add('on');

    //change span text
    hookStatus.textContent = "Off Hook";
   
}
else {
    if ( hookStatus.classlist.contains('on') ){
        //remove 'on' class
        //missing logic
        
        //add 'off' class
        hookStatus.classlist.add('off');

        //change span text
        hookStatus.textContent = "Off Hook";
    //close bracket goes here
   
}
 
Last edited by a moderator:
I hope this looks right to you.
Code:
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
//missing logic


//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
    //missing logic
  
    //add 'on' class
    hookStatus.classlist.add('on');

    //change span text
    hookStatus.textContent = "Off Hook";
  
}
else {
    if ( hookStatus.classlist.contains('on') ){
        //remove 'on' class
        //missing logic
       
        //add 'off' class
        hookStatus.classlist.add('off');

        //change span text
        hookStatus.textContent = "Off Hook";
    //close bracket goes here
  
}
I added a few more comments to guide you in the right direction
 
I bet one of the pieces of missing logic is the statement:
Code:
    switch (event.keycode) {
        case 32:
            toggleLineStatus();
            break;
nooope :) Let me rephrase my comments:
1) event listener
2) call remove on classlist to remove the 'off' class
3) call remove on classlist to remove the 'on' class

That is the missing logic I left out.
 
nooope :) Let me rephrase my comments:
1) event listener
2) call remove on classlist to remove the 'off' class
3) call remove on classlist to remove the 'on' class

That is the missing logic I left out.
How's this version?
Code:
//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 
    hookStatus.classlist.remove('off');    
    //add 'on' class
    hookStatus.classlist.add('on');

    //change span text
    hookStatus.textContent = "Off Hook";
    
}
else {
if ( hookStatus.classlist.contains('on') ){
    //remove 'on' class 
        hookStatus.classlist.remove('on');    
    //add 'off' class
    hookStatus.classlist.add('off');

    //change span text
    hookStatus.textContent = "Off Hook";
    
}
 
How's this version?
Code:
//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
    hookStatus.classlist.remove('off');   
    //add 'on' class
    hookStatus.classlist.add('on');

    //change span text
    hookStatus.textContent = "Off Hook";
   
}
else {
if ( hookStatus.classlist.contains('on') ){
    //remove 'on' class
        hookStatus.classlist.remove('on');   
    //add 'off' class
    hookStatus.classlist.add('off');

    //change span text
    hookStatus.textContent = "Off Hook";
   
}
You got (2) and (3) taken care off 😃, but you're still missing that first one...the event listener
 
How about this one?
Code:
//grab the button 'hookSwitch'
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
hookStatus.addEventListener("onclick", function(){
    //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
        hookStatus.classlist.remove('off');   
        //add 'on' class
        hookStatus.classlist.add('on');
        //change span text
        hookStatus.textContent = "Off Hook";   
    }
    else {
        if ( hookStatus.classlist.contains('on') ){
            //remove 'on' class
            hookStatus.classlist.remove('on');   
            //add 'off' class
            hookStatus.classlist.add('off');
            //change span text
            hookStatus.textContent = "Off Hook";
        }
    //missing closing bracket for else
//missing closing bracket for function and closing parenthesis for event listener
 
Last edited by a moderator:
How about this one?
Code:
//grab the button 'hookSwitch'
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
hookStatus.addEventListener("onclick", function(){
    //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
        hookStatus.classlist.remove('off');  
        //add 'on' class
        hookStatus.classlist.add('on');
        //change span text
        hookStatus.textContent = "Off Hook";  
    }
    else {
        if ( hookStatus.classlist.contains('on') ){
            //remove 'on' class
            hookStatus.classlist.remove('on');  
            //add 'off' class
            hookStatus.classlist.add('off');
            //change span text
            hookStatus.textContent = "Off Hook";
        }
    //missing closing bracket for else
//missing closing bracket for function and closing parenthesis for event listener
Please look at the bottom of your code... I left you some commentary :)
 
I wonder if this is what you're thinking of.

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

//create an event listener for a click event
            hookStatus.addEventListener("onclick"), function() {

//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 
    hookStatus.classlist.remove('off');    
    //add 'on' class
    hookStatus.classlist.add('on');

    //change span text
    hookStatus.textContent = "Off Hook";
    
}
else {
if ( hookStatus.classlist.contains('on') ){
    //remove 'on' class 
        hookStatus.classlist.remove('on');    
    //add 'off' class
    hookStatus.classlist.add('off');

    //change span text
    hookStatus.textContent = "Off Hook";
    
}
}
 
I wonder if this is what you're thinking of.

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

//create an event listener for a click event
            hookStatus.addEventListener("onclick"), function() {

//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
    hookStatus.classlist.remove('off');   
    //add 'on' class
    hookStatus.classlist.add('on');

    //change span text
    hookStatus.textContent = "Off Hook";
   
}
else {
if ( hookStatus.classlist.contains('on') ){
    //remove 'on' class
        hookStatus.classlist.remove('on');   
    //add 'off' class
    hookStatus.classlist.add('off');

    //change span text
    hookStatus.textContent = "Off Hook";
   
}
}




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

//create an event listener for a click event
hookStatus.addEventListener("onclick", function(){
    //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
        hookStatus.classlist.remove('off');  
        //add 'on' class
        hookStatus.classlist.add('on');
        //change span text
        hookStatus.textContent = "Off Hook";  
    }
    else {
        if ( hookStatus.classlist.contains('on') ){
            //remove 'on' class
            hookStatus.classlist.remove('on');  
            //add 'off' class
            hookStatus.classlist.add('off');
            //change span text
            hookStatus.textContent = "Off Hook";
        }
    }
});
 
Here's another error. 1693413697801.png
And here's the corresponding code.
Code:
function dialToneTimedOut() {
    allowDial=false;
    timeoutHowler();
    if(DialToneTimedOut == true) {
        timeoutHowler.play();
        timeoutHowler.currentTime=0;
    }
}
 
Here's another error. View attachment 2267
And here's the corresponding code.
Code:
function dialToneTimedOut() {
    allowDial=false;
    timeoutHowler();
    if(DialToneTimedOut == true) {
        timeoutHowler.play();
        timeoutHowler.currentTime=0;
    }
}
Two things:
1) Can you temporarily either move up or hide those alarm reminders? They are getting in the way of the error output
2) Can you click on the link to the error and screenshot where the actual error is? Kind of hard to diagnose with just the snippet of code
 

New Threads

Buy us a coffee!

Back
Top Bottom