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?

 

[Antero360]

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?

I found this for you. Hope it helps

HTML Color Codes and Names

HTML color codes, color names, and color chart with all hexadecimal, RGB, HSL, color ranges, and swatches.

www.computerhope.com

 

[Annabelle5893]

I found this for you. Hope it helps

HTML Color Codes and Names

HTML color codes, color names, and color chart with all hexadecimal, RGB, HSL, color ranges, and swatches.

www.computerhope.com

I'm reading the chart of color names and codes, and I wonder, are codes like "#FFFFFF" supposed to be HTML or CSS codes? I'm confused!

 

[Antero360]

I'm reading the chart of color names and codes, and I wonder, are codes like "#FFFFFF" supposed to be HTML or CSS codes? I'm confused!

Those are hexadecimal values, meant for CSS.

 

[Annabelle5893]

Those are hexadecimal values, meant for CSS.

I wonder if the color names themselves are the HTML codes.

 

[Antero360]

I wonder if the color names themselves are the HTML codes.

You should be able to use either the hex value or the name of the color in your css code. There is no "html code" for this.

To set color as background with css class:
.paint-black{
background-color: #000;
background-color: black;
}
<div class="paint-black"></div>


To set background inline:
<div style="background-color: black;"></div>
<div style="background-color: #000"></div>

 

[Annabelle5893]

You should be able to use either the hex value or the name of the color in your css code.

How would I be able to distinguish "Background color" from "foreground color"? Is there a separate attribute for those?

 

[Antero360]

How would I be able to distinguish "Background color" from "foreground color"? Is there a separate attribute for those?

There is no "foreground color" per se. There is "background-color" which handles the background, and then there is "color" which handles text color.

 

[Annabelle5893]

There is no "foreground color" per se. There is "background-color" which handles the background, and then there is "color" which handles text color.

In JAWS, when you train the "Highlight colors", there's a foreground color and a background color. That's why I thought there was something like that in HTML and CSS coding.

 

[Antero360]

In JAWS, when you train the "Highlight colors", there's a foreground color and a background color. That's why I thought there was something like that in HTML and CSS coding.

I mean, that is a way to look at it..."color" is the equivalent of "foreground color"

 

[Annabelle5893]

I mean, that is a way to look at it..."color" is the equivalent of "foreground color"

So the color and "bgcolor" attributes are purely a CSS thing?

 

[Antero360]

So the color and "bgcolor" attributes are purely a CSS thing?

yup

 

[Antero360]

So the color and "bgcolor" attributes are purely a CSS thing?

you could use javascript to change the values, but it's still just css

 

[Annabelle5893]

So I could possibly put something like:

<script>
bgcolor=green
color=light blue
</script>

 

[Antero360]

So I could possibly put something like:

<script>
bgcolor=green
color=light blue
</script>

nope, not as simple as that.
you need to grab the element you are wanting to change, then you can either do one of these:

element.setAttribute('style', 'background-color: green; color: lightblue;');

element.classList.add('nameOfClass');

element.style.color = "green";

 

[Annabelle5893]

So the buttons for the dialing keypad in my Virtual Phone app, for example, could be light blue on green.

<html>
<div id="DTMF" style="visibility: visible;">
<center><p class="TONETYPE">DTMF DIALING TONES</p></center>
<button type="button" id="DTMF1">1</button>
<button type="button" id="DTMF2">2</button>
<button type="button" id="DTMF3">3</button>
<button type="button" id="DTMF4">4</button>
<button type="button" id="DTMF5">5</button>
<button type="button" id="DTMF6">6</button>
<button type="button" id="DTMF7">7</button>
<button type="button" id="DTMF8">8</button>
<button type="button" id="DTMF9">9</button>
<button type="button" id="DTMFStar">Star</button>
<button type="button" id="DTMF0">0</button>
<button type="button" id="DTMFPound">Pound</button>
</div>
</html>

 

[Antero360]

So the buttons for the dialing keypad in my Virtual Phone app, for example, could be light blue on green.

<html>
<div id="DTMF" style="visibility: visible;">
<center><p class="TONETYPE">DTMF DIALING TONES</p></center>
<button type="button" id="DTMF1">1</button>
<button type="button" id="DTMF2">2</button>
<button type="button" id="DTMF3">3</button>
<button type="button" id="DTMF4">4</button>
<button type="button" id="DTMF5">5</button>
<button type="button" id="DTMF6">6</button>
<button type="button" id="DTMF7">7</button>
<button type="button" id="DTMF8">8</button>
<button type="button" id="DTMF9">9</button>
<button type="button" id="DTMFStar">Star</button>
<button type="button" id="DTMF0">0</button>
<button type="button" id="DTMFPound">Pound</button>
</div>
</html>

I mean, if that's how you want to design it, sure

 

[Antero360]

I mean, if that's how you want to design it, sure

The DTMF div would be set to green background, and the buttons, could be blue background, with white color for text...

buttons could be green background with blue text

...all depends on how you want to design it

 

[Annabelle5893]

The DTMF div would be set to green background, and the buttons, could be blue background, with white color for text...

buttons could be green background with blue text

...all depends on how you want to design it

To make the buttons visible so they can be pressed, am I right when I write:

style="visibility: visible;"ould

Or should I write something different?

 

[Antero360]

To make the buttons visible so they can be pressed, am I right when I write:

style="visibility: visible;"ould

Or should I write something different?

that works... or
you could just do display:none; to hide, and display: block; to show..

or opacity: 0; to hide, opacity:1; to show.

 

[Annabelle5893]

What's "opacity"?