Playing Audio Using Keystrokes: Is It Possible?

Annabelle5893 · May 17, 2023

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?

Antero360 · Sep 3, 2023

Annabelle5893 said:

How's this?

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";
        }
    }
});
var dialTone=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Dial%20Tone/USA%20Dial%20Tone.ogg');
var isOffHook=false;
var callIncoming=false;
var allowDial = true;
var ringingTone=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
var timesRung=0;
var availableNumbers=["0","611","711","811","911","*67 + 1 (847) 765-1008","1 (847) 765-1008","867-5309",
                        "1 (212) 456-1414","555-1212","555-5555","748-0900","650-0050","650-8950",
                        "970-3920","1 (714) 733-9969","*57","*69"];


function reload(){
    location.reload(true);
}

document.getElementById('toggleLineStatus').onclick=function(){
    toggleLineStatus()
};

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

function numberSuggestion(){
    var randomNumber=Math.floor(Math.random()*(availableNumbers.length));
    var suggestedNumber=availableNumbers[randomNumber];
    document.getElementById("suggestion").innerHTML="How about dialing <strong id='suggestedTelephoneNumber'>"+
                                                    suggestedNumber+
                                                    "</strong>? Don't like this number? Click the button above again!";
}

function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
    }
 
    if(allowDial == true) {
        dialTone.play();
    } else {
        offHook ();
        timeoutHowler.play();
    }
}

setCallTimeout();

function setCallTimeout(){
    var delay=5000;
    var delayCaller=Math.floor((Math.random()*8000)+1);
    delay=delay+delayCaller;
    setTimeout(incomingCall,delay);
}

function offHook(){
    isOffHook=true;
    document.getElementById("WE2500").style.display="none";
    document.getElementById("dialPad").style.display="block";
}

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

function incomingCall(){
    var ringRing=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
    var hasTelephoneBeenAnswered=false;
    ringTelephone();
}

function ringTelephone(){
    if(!hasTelephoneBeenAnswered == false) {
        ringRing.play();
        ringRing.currentTime=0;
    }
 
    else {
    if(isOffHook == false) {
        ringRing.play();
    }
 
    if(allowDial == false) {
        callIncoming=true;
        setInterval(ringTelephone,5500);
    }
}

var number="";
var timeout="";

function numberDial() {
    if(dialTone){
        dialTone.pause();
        dialTone.currentTime=0
    }
}

function dial1() {
    if(allowDial == true) {
        numberDial();
        number=number+"1";
        var DTMFToneDial1=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%201.ogg');
        DTMFToneDial1.play();
    }
}

function dial2() {
    if(allowDial == true); {
        numberDial();
        number=number+"2";
        var DTMFToneDial2=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%202.ogg');
        DTMFToneDial2.play();
    }
}

function dial3() {
    if(allowDial == true); {
        numberDial();
        number=number+"3";
        var DTMFToneDial3=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 3.ogg');
        DTMFToneDial3.play();
    }
}

function dial4() {
    if(allowDial == true) {
        numberDial();
        number=number+"4";
        var DTMFToneDial4=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 4.ogg');
        DTMFToneDial4.play();
    }
}

function dial5() {
    if(allowDial == true) {
        numberDial();
        number=number+"5";
        var DTMFToneDial5=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 5.ogg');
        DTMFToneDial5.play();
    }
}

function dial6() {
    if(allowDial == true) {
        numberDial();
        number=number+"6";
        var DTMFToneDial6=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 6.ogg');
        DTMFToneDial6.play();
    }
}

function dial7() {
    if(allowDial == true) {
        numberDial();
        number=number+"7";
        var DTMFToneDial7=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 7.ogg');
        DTMFToneDial7.play();
    }
}

function dial8() {
    if(allowDial == true) {
        numberDial();
        number=number+"8";
        var DTMFToneDial8=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 8.ogg');
        DTMFToneDial8.play();
    }
}

function dial9() {
    if(allowDial == true) {
        numberDial();
        number=number+"9";
        var DTMFToneDial9=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 9.ogg');
        DTMFToneDial9.play();
    }
}

function dialStar() {
    if(allowDial == true) {
        numberDial();
        number=number+"*";
        var DTMFToneDialStar=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Star.ogg');
        DTMFToneDialStar.play();
    }
}

function dial0() {
    if(allowDial == true) {
        numberDial();
        number=number+"0";
        var DTMFToneDial0=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 0.ogg');
        DTMFToneDial0.play();
    }
}

function dialPound(){
    if(allowDial == true) {
        numberDial();
        number=number+"#";
        var DTMFToneDialPound=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Pound.ogg');
        DTMFToneDialPound.play();
    }
}

//FOCUS HERE #1
document.onkeydown = function (event) {

    switch (event.keycode) {
        case 32:
button.addEventListener('click', function() {
            toggleLineStatus();
}
            break;
        case 49,97:
button.addEventListener('click', function() {
            dial1();
}
            break;
        case 50,98:
button.addEventListener('click', function() {
            dial2();
}
            break;
        case 51,99:
button.addEventListener('click', function() {
            dial3();
}
            break;
        case 52,100:
button.addEventListener('click', function() {
            dial4();
});
            break;
        case 53,101:
button.addEventListener('click', function() {
            dial5();
});
            break;
        case 54,102:
button.addEventListener('click', function() {
            dial6();
});
            break;
        case 55,103:
button.addEventListener('click', function() {
            dial7();
});
            break;
        case 56,104:
button.addEventListener('click', function() {
            dial8();
});
            break;
        case 57,105:
button.addEventListener('click', function() {
            dial9();
});
            break;
        case 106:
button.addEventListener('click', function() {
            dialStar();
});
            break;
        case 48,96:
button.addEventListener('click', function() {
            dial0();
});
            break;
        case 109:
button.addEventListener('click', function() {
            dialPound();
});
            break;
        default:
            hasDialedNumber = false;
            break;
    });
    }
//END FUCUS HERE #1

//FOCUS HERE #2
function ring(){
    ringingTone.play();
    timesRung++;
    if(timesRung>1) {
        setTimeout(response,700);
    }
}

function dial(){
    allowDial=false;
    ring();
    setTimeout(ring,4000);
    }
    }

function busy() {
    busyTone();
    }
    }

function busyTone() {
    var pickupBusy=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Busy%20Tone/USA%20Busy%20Tone.ogg');
    pickupBusy.play();
    pickupBusy.currentTime=0;
    setInterval(busyTone,4000);
    }
    }

                function operatorPutCallThrough() {
                operatorPickup.play(true);
    }
    }

//END FOCUS HERE #2

//FOCUS HERE #3
function response(){
    switch(number) {
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("click", function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
            });
            break;
        case "611":
            var pickup611=new Audio('callResponses/611.wav');
            pickup611.addEventListener("click", function(){
                timeoutHowler();
                pickup611.play();
}
            });
            break;
        case "711":
            var pickup711=new Audio('callResponses/tdd-1.mp3');
            pickup711.addEventListener("click", function(){
                timeoutHowler();
            pickup711.play();
}
});
            break;
        case "811":
            var pickup811=new Audio('callResponses/811.wav');
            pickup811.addEventListener("click", function() {
                timeoutHowler();
                pickup811.play();
}
});
            break;
        case "911":
            var pickup911=new Audio('callResponses/911-xxx-fleet.mp3');
            pickup911.addEventListener("click", function() {
                timeoutHowler();
                pickup911.play();
}
});
            break;
        case "18477651008":
            var pickupMCI=new Audio('callResponses/MCI.wav');
            pickupMCI.addEventListener("click", function(){
                timeoutHowler();
            pickupMCI.play();
}
});
            break;
        case "8675309":
            var pickup8675309=new Audio('callResponses/discoornis-bell-f1.mp3');
            pickup8675309.addEventListener("click", function(){
                timeoutHowler();
                pickup8675309.play();
}
});
            break;
        case "12124561414":
            pickup12124561414.addEventListener("click", function() {
                busy();
            pickup12124561414.play();
}
});
            break;
        case "5551212":
            pickup5551212.addEventListener("click", function() {
                busy();
            pickup5551212.play();
}
});
            break;
        case "5555555":
            var pickup5555555=new Audio('callResponses/timeout-xxx-fleet.mp3');
            pickup5555555.addEventListener("click", function() {
                timeoutHowler();
                pickup5555555.play();
}
});
            break;
        case "7480900":
            var pickupSelf=new Audio('callResponses/partyline-xxx-fleet.mp3');
            pickupSelf.addEventListener("click", function() {
                busy();
            pickupSelf.play();
}
});
            break;
        case "18005820655":
            pickup18005820655.addEventListener("click", function() {
                busy();
            pickup18005820655.play();
}
});
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("click"), function() {
            pickupAM.play();
}
});
            break;
        case "6500050":
            var pickupModem=new Audio('modem.wav');
            pickupModem.addEventListener("click"), function() {
            pickupModem.play();
}
});
            break;
        case "9703920":
            var pickupFax=new Audio('fax-1.mp3');
            pickupFax.addEventListener("click"), function() {
            pickupFax.play();
}
});
            break;
        case "17147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.addEventListener("click"), function() {
            pickup714.play();
}
});
            break;
        case "*8217147339969":
            var pickup*8217147339969=new Audio('device-conference.mp3');
            pickup *8217147339969.play();
}
});
            break;
        case "*6717147339969":
            var pickup714block=new Audio('callResponses/reject2-xxx-fleet.mp3');
            pickup714block.addEventListener("click", function() {
                timeoutHowler();
                pickup714block.play();
  }
});
            break;
        case "*57":
            var randNum57=Math.random()>=0.5;
            if(randNum57) {
                var pickupCallTrace=new Audio('callResponses/trace3-xxx-fleet.mp3');
            }
            else {
                var pickupCallTrace=new Audio('callResponses/trace-xxx-fleet.mp3');
                pickupCallTrace.addEventListener("click", function() {
                    timeoutHowler();
                    pickupCallTrace.play();
  }
});
            break;
        case "*69":
            var pickupStar69=new Audio('callResponses/return-xxx-fleet.mp3');
            pickupStar69.addEventListener("click", function() {
                timeoutHowler();
                pickupStar69.play();
}
});
            break;
        case "police":
            var pickupPolice=new Audio('callResponses/policePickup.wav');
            pickupPolice.addEventListener("click", function() {
                timeoutHowler();
                pickupPolice.play();
                var policeComplaint=prompt("Police Department, Sergeant Duffy Speaking.");
                confirm("Really? You say that "+policeComplaint);
}
}
            var policeHangup=new Audio('callResponses/policeHangup.wav');
            policeHangup.addEventListener("click", function() {
                timeoutHowler();
            }
});
            break;
        default:
            var pickupDefault;
            if(number.length>7){
                pickupDefault=new Audio('callResponses/ldcircuits-bell-f1.mp3');
            }
            else {
                pickupDefault=new Audio('callResponses/completeordc-xxx-fleet.mp3');
            pickupDefault.addEventListener("click", function() {
                timeoutHowler();
            pickupDefault.play();
}
});
            break;
    }
}

//END FOCUS HERE #3

I have marked 3 areas with
//FOCUS HERE
//END FOCUS HERE #X
So for each of them I would like you to focus on these issues:

//FOCUS HERE #1
1) You're still missing a few. Looks like you missed the top 4 event listeners.
2) You don't have an event listener nor any calls to functions that would require "});" in the default statement. Please remove that from there

//FOCUS HERE #2
1) Can we properly align those functions? Please look at how you aligned the ring() function

//FOCUS HERE #3
1) There seems to be an extra "}" right above the "});"...Please remove that extra closing bracket. HINT: the issue areas look something like this:

JavaScript:

}
});

2) Can we properly align the bodies of those case statements?

Annabelle5893 · Nov 26, 2023

I wonder if the HTML tag "bgsound" would work for adding sounds to an app.

Johna · Nov 26, 2023

That's a deprecated tag only supported in Internet Explorer. Don't use it, stick to the regular <audio> tag.

Annabelle5893 · Nov 26, 2023

Johna said:
That's a deprecated tag only supported in Internet Explorer. Don't use it, stick to the regular <audio> tag.

I wonder, how would I make a sound either loopable (a background sound), or play at random intervals (a random sound)?

Johna · Nov 27, 2023

Add the loop attribute to the <audio> tag.

More on HTML audio here:

<audio>: The Embed Audio element - HTML: HyperText Markup Language | MDN

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

developer.mozilla.org

Annabelle5893 · Nov 27, 2023

Johna said:
Add the loop attribute to the <audio> tag.

More on HTML audio here:

<audio>: The Embed Audio element - HTML: HyperText Markup Language | MDN

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

developer.mozilla.org

If I have a checkbox that triggers a sound channel, initially named "Not Set", if I create an "Open..." button, where I can load a sound file, the name of the channel will change according to the sound I've opened. For example: "Calm Sea". If I press a "Reset" button next to that checkbox, the sound loaded will be cleared, and the channel name changes back to "Not Set". How would I create this with HTML? I would like to make this app available for all operating systems (Windows, Mac, Linux, and the like).

Johna · Nov 27, 2023

HTML is not meant for building desktop apps, however this is still possible with some JavaScript frameworks. Take a look at Tauri or Electron.

Annabelle5893 · Nov 27, 2023

Johna said:
HTML is not meant for building desktop apps, however this is still possible with some JavaScript frameworks. Take a look at Tauri or Electron.

I wonder if a program like Nodejs will be able to convert HTML, Javascript and CSS into a desktop app.

Velpus Captiosus · Nov 27, 2023

Johna said:
Hi @Annabelle5893,
Use the keydown (or keyup) event listener in JavaScript:

JavaScript:

document.addEventListener("keydown", () => { console.log("key pressed"); });

Then using keyCode, you can find which key was pressed and play a sound accordingly:

JavaScript:

document.addEventListener("keydown", (e) => { let audio; switch (e.keyCode) { // keycodes can be found online: https://www.toptal.com/developers/keycode/table case 48: audio = new Audio("keypad0.mp3"); break; case 49: audio = new Audio("keypad1.mp3"); break; case 50: audio = new Audio("keypad2.mp3"); break; case 51: audio = new Audio("keypad3.mp3"); break; case 52: audio = new Audio("keypad4.mp3"); break; case 53: audio = new Audio("keypad5.mp3"); break; case 54: audio = new Audio("keypad6.mp3"); break; case 55: audio = new Audio("keypad7.mp3"); break; case 56: audio = new Audio("keypad8.mp3"); break; case 57: audio = new Audio("keypad9.mp3"); } if (audio != undefined) { audio.loop = false; audio.play(); } });

I've only done for the keypad, you can continue for the spacebar or any other keys.

I haven't actually tried this code, but I think it should work.
Lmk if it's not working, or if you have any questions/problems.

imo great answer!

Annabelle5893 · Nov 28, 2023

Velpus Captiosus said:
imo great answer!

Would the Keydown event be equivalent to pressing "Play" when the checkbox is checked, and the Keyup event be the equivalent to pressing stop when the checkbox is unchecked?

Velpus Captiosus · Nov 28, 2023

Annabelle5893 said:
Would the Keydown event be equivalent to pressing "Play" when the checkbox is checked, and the Keyup event be the equivalent to pressing stop when the checkbox is unchecked?

Since it is not attached to any Javascript element it applies to the document as a whole.

Annabelle5893 · Nov 29, 2023

How would I make checkboxes into "Play/Stop" buttons for a sound?

Antero360 · Nov 29, 2023

Annabelle5893 said:
How would I make checkboxes into "Play/Stop" buttons for a sound?

You would call the "checked" attribute to check if the checkbox is checked or not,... if checked, play sound, if not stop sound

Annabelle5893 · Nov 29, 2023

Antero360 said:
You would call the "checked" attribute to check if the checkbox is checked or not,... if checked, play sound, if not stop sound

Are "Play Sound" and "Stop Sound" codes of javascript? How about the "loop" attribute? Is there an attribute for making a sound play at random intervals?

Antero360 · Nov 29, 2023

Annabelle5893 said:
Are "Play Sound" and "Stop Sound" codes of javascript? How about the "loop" attribute? Is there an attribute for making a sound play at random intervals?

I personally haven't done much with audio, but, I do have a great resource for you 🙂 all the controls you will need

Using the Web Audio API - Web APIs | MDN

Great! We have a boombox that plays our 'tape', and we can adjust the volume and stereo panning, giving us a fairly basic working audio graph.

developer.mozilla.org

Antero360 · Nov 29, 2023

Antero360 said:
I personally haven't done much with audio, but, I do have a great resource for you 🙂 all the controls you will need

Using the Web Audio API - Web APIs | MDN

Great! We have a boombox that plays our 'tape', and we can adjust the volume and stereo panning, giving us a fairly basic working audio graph.

developer.mozilla.org

As you will see, play(), resume (), pause() are all controls you can use

Annabelle5893 · Nov 29, 2023

Antero360 said:
As you will see, play(), resume (), pause() are all controls you can use

Will the "loop" attribute work to make a long sound loopable? Which attribute will work for making a short sound play at random intervals?

Antero360 · Nov 29, 2023

Annabelle5893 said:
Will the "loop" attribute work to make a long sound loopable? Which attribute will work for making a short sound play at random intervals?

Loop attribute should cause the audio to loop, when set to true, yes... as far as play interval times, that you may have to set up a function to
1) generate a random number signifying seconds
2) use setTimeout to set the play to be the generated number... if you use setInterval, you may be constrained to only one value

Antero360 · Nov 29, 2023

Antero360 said:
Loop attribute should cause the audio to loop, when set to true, yes... as far as play interval times, that you may have to set up a function to
1) generate a random number signifying seconds
2) use setTimeout to set the play to be the generated number... if you use setInterval, you may be constrained to only one value

Sorry, what I meant was, with setTimeout, you can reset the delay to the newly generated value without having to worry about the need to clear anything, like you would with setInterval

Annabelle5893 · Nov 30, 2023

Antero360 said:
Sorry, what I meant was, with setTimeout, you can reset the delay to the newly generated value without having to worry about the need to clear anything, like you would with setInterval

In the original version of Atmosphere Deluxe, made by Vectormedia Software, I'm not sure what source code they used, as they programmed the software with Visual Basic, which isn't exactly accessible to screenreaders. If I were to make each audio link and keystroke a different color, what code would I use to generate colors like blue, green, white, and grey? Is there a comprehensive list of color codes?

Welcome!

Playing Audio Using Keystrokes: Is It Possible?

Gold Coder

Software Developer

Gold Coder

Frontend Developer

Gold Coder

Frontend Developer

Gold Coder

Frontend Developer

Gold Coder

Well-Known Coder

Gold Coder

Well-Known Coder

Gold Coder

Software Developer

Gold Coder

Software Developer

Software Developer

Gold Coder

Software Developer

Software Developer

Gold Coder

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy