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]

If could consolidate into one span like so:

<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

//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.

 

[Antero360]

Would I need all the stuff within the slashes? Or is that not necessary for the programming.

what slashes would you be referring to?

 

[Annabelle5893]

what slashes would you be referring to?

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

 

[Antero360]

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 😀

 

[Annabelle5893]

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 😀

How's this?

//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";
    
}

 

[Annabelle5893]

I manually typed your code in, and this is what I got.

 

[Antero360]

How's this?

//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

( hookStatus.classlist.contains('on') ){

2) you're missing a closing bracket at the end there...

( 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? 🙂

 

[Annabelle5893]

I hope this looks right to you.

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
   
}

 

[Antero360]

I hope this looks right to you.

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

 

[Annabelle5893]

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:

    switch (event.keycode) {
        case 32:
            toggleLineStatus();
            break;

 

[Antero360]

I bet one of the pieces of missing logic is the statement:

    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.

 

[Annabelle5893]

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?

//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";
    
}

 

[Antero360]

How's this version?

//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

 

[Annabelle5893]

How about this one?

//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

 

[Antero360]

How about this one?

//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 🙂

 

[Annabelle5893]

I wonder if this is what you're thinking of.

//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";
    
}
}

 

[Antero360]

I wonder if this is what you're thinking of.

//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";
   
}
}

//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";
        }
    }
});

 

[Annabelle5893]

Here's another error.
And here's the corresponding code.

function dialToneTimedOut() {
    allowDial=false;
    timeoutHowler();
    if(DialToneTimedOut == true) {
        timeoutHowler.play();
        timeoutHowler.currentTime=0;
    }
}

 

[Antero360]

Here's another error. View attachment 2267
And here's the corresponding 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

 

[Annabelle5893]