-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT.html
534 lines (499 loc) · 38.8 KB
/
ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
<hr />
<p><strong>ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT</strong></p>
<hr />
<p><span style="background: #ffff00">The <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank" rel="noopener">single web page application</a> featured in this tutorial web page substantiates a virtual simulation of physical keyboard (i.e. <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Piano" target="_blank" rel="noopener">piano</a>) musical instrument (sans the black keys and most of the white keys which would otherwise imbue the instrument with more <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Octave" target="_blank" rel="noopener">octave</a> range). Users of the application can press one or multiple keys of a physical computer keyboard (which displays letters and symbols such as ‘a’, ‘;’, and ‘/’) in order to play corresponding <a style="background: #000000;color: #00ff00" href="https://karbytesforlifeblog.wordpress.com/beats_machine/" target="_blank" rel="noopener">sound frequencies</a>. Each time a particular virtual keyboard key is pressed, a time-stamped message is appended to the text in the console DIV element of the application’s web page user interface.</span></p>
<p><span style="background:#00ffff">Note that, as of 26_JANUARY_2025 at 1:00PM Pacific Standard Time, the application which is featured on this web page has been updated slightly in order to be accessible via <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Touchscreen" target="_blank" rel="noopener">touchscreen interfaces</a>. Specifically, two new <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Event_(computing)" target="_blank" rel="noopener">event listener</a> functions have been added to that application’s constituent JavaScript file which are the touchscreen equivalent of physical keyboard ‘keyup’ and ‘keydown’ event listener functions. (A video (in <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/MP4_file_format" target="_blank" rel="noopener">MP4 file format</a>) demonstrating that newly-added mobile functionality is available at the <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/URL" target="_blank" rel="noopener">Uniform Resource Locator</a> in the paragraph after the next paragraph).</span></p>
<p><em>Note also that the application which is featured on this web page is being hosted on <a style="background: #000000;color: #ff9000" href="https://karbytesforlifeblog.wordpress.com/journal_karbytes_24december2024/" target="_blank" rel="noopener">karbytes’ own dark web server</a> (as of 1:00PM Pacific Standard Time on 26_JANUARY_2025) and is usable via the <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Tor_(network)" target="_blank" rel="noopener">Tor</a> mobile and desktop browser (but, if using the mobile Tor browser, video and audio playing needs to be enabled in the browser settings). That application can be used to play one or more of the twenty-two sound wave frequencies (i.e. <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Musical_note" target="_blank" rel="noopener">musical notes</a>) which are represented by graphical user interface depictions of physical keyboard instrument keys simultaneously and/or in chronological succession (where each note has a duration of approximately half of a second) via the application which is being hosted on the aforementioned server at the following Uniform Resource Locator (as of 1:00PM Pacific Standard Time on 26_JANUARY_2025): <a style="background: #000000;color: #00ffff" href="http://qkbrwfubnh4knc6kkhx6uepccavpwezdf2al7w2quepe3qociegsi3yd.onion/KARBYTES_BLOG_APPS/ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT/abridged_keyboard_musical_instrument.html" target="_blank" rel="noopener">http://qkbrwfubnh4knc6kkhx6uepccavpwezdf2al7w2quepe3qociegsi3yd.onion/KARBYTES_BLOG_APPS/ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT/abridged_keyboard_musical_instrument.html</a></em></p>
<p>A video which serves as empirical evidence supporting the claim that the aforementioned .onion web page application is fully functional on the Tor browser application for Android operating system mobile devices is available at the following Uniform Resource Locator and features <a style="background: #000000;color: #ff9000" href="https://karbytesforlifeblog.wordpress.com/about_karbytes/" target="_blank" rel="noopener">karbytes</a> manipulating that application’s user interface keyboard keys (inside of one Tor browser tab) on its (Android) Galaxy A03s mobile device: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_28/main/abridged_keyboard_musical_instrument_(updated)_android_use_case_by_karbytes_26january2025.mp4" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_28/main/abridged_keyboard_musical_instrument_(updated)_android_use_case_by_karbytes_26january2025.mp4</a></p>
<p><em>To view hidden text inside each of the preformatted text boxes below, scroll horizontally.</em></p>
<hr />
<p><strong>SOFTWARE_APPLICATION_COMPONENTS</strong></p>
<hr />
<p>Hyper-Text-Markup-Language_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument.html</a></p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/karbytes_aesthetic.css</a></p>
<p>JavaScript_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_28/main/abridged_keyboard_musical_instrument.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_28/main/abridged_keyboard_musical_instrument.js</a></p>
<hr />
<p><strong>Hyper-Text-Markup-Language Code</strong></p>
<hr />
<p>The following Hyper-Text-Markup-Language (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">HTML</a>) code defines the user interface component of the ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT web page application. Copy the HTML code from the source code file which is linked below into a text editor and save that file as <strong>abridged_keyboard_musical_instrument.html</strong>. Use a web browser such as <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Firefox" target="_blank" rel="noopener">Firefox</a> to open that HTML file (and ensure that the JavaScript and Cascading-Style-Sheet files are in the same file directory as the HTML file).</p>
<p><em>(Note that angle brackets which resemble <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">HTML</a> tags (i.e. an “is less than” symbol (i.e. ‘<‘) followed by an “is greater than” symbol (i.e. ‘>’)) displayed on this web page have been replaced (at the source code level of this web page) with the Unicode symbols <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Less-than_sign" target="_blank" rel="noopener">U+003C</a> (which is rendered by the web browser as ‘<‘) and <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Greater-than_sign" target="_blank" rel="noopener">U+003E</a> (which is rendered by the web browser as ‘>’). That is because the <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/WordPress.com" target="_blank" rel="noopener">WordPress</a> web page editor or web browser interprets a plain-text version of an “is less than” symbol followed by an “is greater than” symbol as being an opening HTML tag (which means that the WordPress web page editor or web browser deletes or fails to display those (plain-text) inequality symbols and the content between those (plain-text) inequality symbols)).</em></p>
<p><em><strong>If copy-pasting the following HTML code from the preformatted text box below into a text editor, remove the <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Zero-width_space" target="_blank" rel="noopener">zero-width space</a> Unicode character (<span style="background:#000000;color:#fe9eff">&​#8203;</span>) which is located between the ‘s’ and the ‘r’ in the script tag(s) which each link to a <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener">JavaScript</a> file.</em></strong></p>
<p>Hyper-Text-Markup-Language_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument.html</a></p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument_html_screenshot.jpeg" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument_html_screenshot.jpeg</a></p>
<hr />
<pre>
<!--
/**
* file: abridged_keyboard_musical_instrument.html
* type: Hyper-Text-Markup-Language
* author: karbytes
* date: 13_SEPTEMBER_2024
* license: PUBLIC_DOMAIN
*/
-->
<!--
/**
* Note that this application contains the word "ABRIDGED" in its title
* because the keyboard musical instrument which this application
* simulates is missing black keys (i.e. piano keys which correspond
* with minor notes (as opposed to white keys which correspond with
* major notes)) and the full range of notes which "real" pianos
* typically include.
*/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT</title>
<!--
/**
* The linked Cascading-Style-Sheet file named karbytes_aesthetic.css
* defines how this web page (which is named abridged_keyboard_musical_instrument.html)
* appears when this web page is (re)loaded by the web browser.
*/
-->
<link rel="stylesheet" href="karbytes_aesthetic.css">
<style>
/**
* Make the padding on the left and right side of each piece of text on this web page
* equal in horizontal length within that piece of text's encompassing container element.
*
* Make each container element on this web page have fifty pixels of padding on the top,
* bottom, left, and right side of that element.
*/
body {
text-align: center;
padding: 50px;
}
/**
* Make more padding on the left side than on the right side of the text inside of the
* DIV element whose class is "console" and give that DIV element a two-pixel border
* which is colored green and which has slightly rounded corners.
*
* Pad the top of that DIV element with five pixels of margin space.
*
* Pad the text inside of that DIV element with ten pixels of space between the
* text and the borders of that DIV element.
*/
.console {
text-align: left;
border-color: #00ff00;
border-style: solid;
border-radius: 5px;
border-width: 2px;
margin-top: 5px;
padding: 10px;
}
/**
* Make the keyboard background dark gray with a two-pixel-thick GREEN border.
*
* Make the keyboard have slightly rounded corners.
*/
.keyboard {
background-color: #606060;
border-color: #00ff00;
border-style: solid;
border-radius: 5px;
border-width: 2px;
display: inline-block;
padding: 10px;
}
/**
* Make each keyboard key background light gray with a two-pixel-thick orange border.
*
* Make the keyboard have slightly rounded corners.
*
* Make the width of each keyboard key fifty pixels.
*
* Make the height of each keyboard key two hundred pixels.
*
* Create a gap of five pixels between adjacent keyboard keys.
*
* Cause each adjacent keyboard key to be arranged horizontally rather than vertically
* (within the confines of the encompassing HTML container element
* (which has a fixed width of 800 pixels)).
*
* Make the text color of each keyboard key BLACK.
*/
.key {
background-color: #b0b0b0;
border: 2px solid #ff9000;
border-radius: 5px;
width: 50px;
height: 200px;
margin: 5px;
display: inline-block;
color: #000000;
}
/**
* Cause each keyboard key's background color to turn GREEN when it is pressed
* (i.e. when the key displayed on the web page's corresponding physical computer
* keyboard key (e.g. 'A') is pressed by the application user).
*/
.key.pressed {
background-color: #00ff00;
}
</style>
</head>
<body onload="initialize_application()">
<h1>ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT</h1>
<p>Press keys on your computer's physical keyboard to play corresponding musical notes.</p>
<div class="keyboard" id="keyboard">
<!-- Keys will be dynamically added here. -->
</div>
<!-- CONSOLE (for recording event time stamps) -->
<div class="console" id="console">???</div>
<!--
/**
* The linked JavaScript file named abridged_keyboard_musical_instrument.js
* defines how this web page (which is named abridged_keyboard_musical_instrument.html)
* behaves when the user clicks on the menus and start and stop buttons
* (and when this web page is (re)loaded by the web browser).
*/
-->
<script s​rc="abridged_keyboard_musical_instrument.js"></script>
</body>
</html>
</pre>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="35136" data-permalink="https://karbytesforlifeblog.wordpress.com/abridged_keyboard_musical_instrument/abridged_keyboard_musical_instrument_html_screenshot/" data-orig-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg" data-orig-size="979,3470" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="abridged_keyboard_musical_instrument_html_screenshot" data-image-description="" data-image-caption="" data-medium-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg?w=85" data-large-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg?w=289" width="979" height="3470" src="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg" alt="" class="wp-image-35136" srcset="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg 979w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg?w=42&h=150 42w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg?w=85&h=300 85w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_html_screenshot.jpeg?w=768&h=2722 768w" sizes="(max-width: 979px) 100vw, 979px" /></figure>
<hr />
<p><strong>Cascading-Style-Sheet Code</strong></p>
<hr />
<p>The following Cascading-Style-Sheet (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/CSS" target="_blank" rel="noopener">CSS</a>) code defines a stylesheet which customizes the appearance of interface components of the ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT web page application. Copy the CSS code from the source code file which is linked below into a text editor and save that file as <strong>karbytes_aesthetic.css</strong>.</p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/karbytes_aesthetic.css</a></p>
<hr />
<pre>/**
* file: karbytes_aesthetic.css
* type: Cascading-Style-Sheet
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/** Make the page background BLACK, the text orange and monospace, and the page content width 800 pixels or less. */
body {
background: #000000;
color: #ff9000;
font-family: monospace;
font-size: 16px;
padding: 10px;
width: 800px;
}
/** Make input elements and select elements have an orange rounded border, a BLACK background, and orange monospace text. */
input, select {
background: #000000;
color: #ff9000;
border-color: #ff9000;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 10px;
appearance: none;
font-family: monospace;
font-size: 16px;
}
/** Invert the text color and background color of INPUT and SELECT elements when the cursor (i.e. mouse) hovers over them. */
input:hover, select:hover {
background: #ff9000;
color: #000000;
}
/** Make table data borders one pixel thick and CYAN. Give table data content 10 pixels in padding on all four sides. */
td {
color: #00ffff;
border-color: #00ffff;
border-width: 1px;
border-style: solid;
padding: 10px;
}
/** Set the text color of elements whose identifier (id) is "output" to CYAN. */
#output {
color: #00ffff;
}
/** Set the text color of elements whose class is "console" to GREEN and make the text background of those elements BLACK. */
.console {
color: #00ff00;
background: #000000;
}
</pre>
<hr />
<p><strong>JavaScript Code</strong></p>
<hr />
<p>The following JavaScript (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener">JS</a>) code defines the functions which control the behavior of the ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT web page application. Copy the JS code from the source code file which is linked below into a text editor and save that file as <strong>abridged_keyboard_musical_instrument.js</strong>.</p>
<p>The text in the preformatted text box below appears on this web page (while rendered correctly by the <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">web browser</a>) to be identical to the content of the <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener">JavaScript</a> source code file whose <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/URL" target="_blank" rel="noopener">Uniform Resource Locator</a> is displayed in the green <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Hyperlink" target="_blank" rel="noopener">hyperlink</a> below.</p>
<p>JavaScript_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_28/main/abridged_keyboard_musical_instrument.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_28/main/abridged_keyboard_musical_instrument.js</a></p>
<hr />
<pre>
/**
* file: abridged_keyboard_musical_instrument.js
* type: JavaScript
* author: karbytes
* date: 26_JANUARY_2025
* license: PUBLIC_DOMAIN
*/
// Declare an audio context variable (which is a global program variable).
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
/**
* Define a global variable which is an (immutable) dictionary populated by key-value pairs (i.e. definitions)
* where each key is the literal label of a computer keyboard key and where each value is the respective key's uniquely
* corresponding sound wave frequency requency (in terms of sound wave oscillations per second
* (i.e. hertz (abbreviated as Hz))).
*
* Each key-value pair in that dictionary is listed in ascending order in terms of sound wave frequency.
*
* The musical note associated with each of those sound wave frequencies is denoted by that sound wave
* frequency's uniquely corresponding musical note comment.
*/
const noteFrequencies = {
'z': 130.81, // C3
'x': 146.83, // D3
'c': 164.81, // E3
'v': 174.61, // F3
'b': 196.00, // G3
'n': 220.00, // A3
'm': 246.94, // B3
',': 261.63, // C4 (Middle C)
'.': 293.66, // D4
'/': 329.63, // E4
'a': 349.23, // F4
's': 392.00, // G4
'd': 440.00, // A4
'f': 493.88, // B4
'g': 523.25, // C5
'h': 587.33, // D5
'j': 659.25, // E5
'k': 698.46, // F5
'l': 783.99, // G5
';': 880.00, // A5
'q': 987.77, // B5
'w': 1046.50, // C6
};
// Define a global variable which represents the HTML element whose identifier (id) is "keyboard" on the web page named abridged_keyboard_musical_instrument.
const keyboardDiv = document.getElementById('keyboard');
/**
* Return a String type value which describes the number of milliseconds which have elapsed since the Unix Epoch.
*
* Note that the Unix Epoch is 01_JANUARY_1970 at 0 hours, 0 minutes, 0 seconds, and 0 seconds
* (i.e. 00:00:00) (i.e. midnight) (Coordinated Universal Time (UTC)).
*
* @return {String} text which denotes the number of milliseconds which have elapsed since the Unix Epoch.
*/
function generate_time_stamp() {
const milliseconds_elapsed_since_unix_epoch = Date.now();
return milliseconds_elapsed_since_unix_epoch + " milliseconds since midnight on 01_JANUARY_1970.";
}
/**
* Return a String type value which is used to instantiate a paragraph type web page element such that
* the String type value which is passed into this function as its only input is that paragraph element's
* inner HTML content.
*
* Note that the String type constant variable values are broken up into single-character String type values
* to avoid causing the WordPress web page editor to interpret HTML tags in the web page body with
* source code which is hosted on that web page inside of PRE (preformatted) web page elements.
*
* @param {String} inner_HTML is assumed to be plain text or HTML content.
*
* @return {String} a sequence of text characters which is used to instantiate a paragraph (P) web page element.
*/
function generate_paragraph_html_element(inner_html) {
const opening_paragraph_tag = ('<' + 'p' + '>'), closing_paragraph_tag = ('<' + '/' + 'p' + '>');
try {
if (typeof inner_html.length !== "number") throw 'The expression (typeof inner_html.length !== "number") was evaluated to be true.';
return opening_paragraph_tag + inner_html + closing_paragraph_tag;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of generate_paragraph_html_element(inner_html): " + exception);
}
}
/**
* Respond to the event of the web page named abridged_keyboard_musical_instrument.html being loaded by a web browser.
*
* This function prints a time-stamped message indicating when the web page was last
* loaded by the web browser in a DIV element on that web page whose identifier is "console".
*
* This function also initializes the audio context (which works offline and which utilizes the
* web browser's built-in sound-generating capabilities which correspond with the local machine's
* operating system (to control the hardware which causes sound waves to be emitted from the machine)).
*
* Assume that all three files which constitute this single web page application are located
* in the same local file directory (and those file are
* karbytes_aesthetic.css,
* abridged_keyboard_musical_instrument.js, and
* abridged_keyboard_musical_instrument.html).
*/
function initialize_application() {
// Initialize variables which are local to this function.
let time_stamped_message = "";
// Execute a try-catch block. If runtime exceptions are found, exit the try block and print an error message to the web browser console.
try {
// If the audio context has not already been defined, then define it now.
if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();
// Populate the div whose identifier is "console" with a time stamped message indicating that this function was called (and when it was called).
time_stamped_message = ("The function named initialize_application() was called at time: " + generate_time_stamp());
console.log(time_stamped_message);
time_stamped_message = generate_paragraph_html_element(time_stamped_message);
console_div = document.getElementById("console");
console_div.innerHTML = time_stamped_message;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of initialize_application(): " + exception);
}
}
/**
* This function to dynamically instantiates each piano key in the piano user interface (UI) on the corresponding web page
* (i.e. abridged_keyboard_musical_instrument.html).
*
* Specifically, this function populates the HTML element whose identifier (id) is "keyboard" with the following labeled keyboard keys
* (where each key represents a uniquely corresponding sound wave frequency (in terms of sound wave oscillations per second
* (i.e. hertz (abbreviated as Hz))) and the musical note name of each of that particular frequency):
* 'z' // 130.81 Hz (C3)
* 'x' // 146.83 Hz (D3)
* 'c' // 164.81 Hz (E3)
* 'v' // 174.61 Hz (F3)
* 'b' // 196.00 Hz (G3)
* 'n' // 220.00 Hz (A3)
* 'm' // 246.94 Hz (B3)
* ',' // 261.63 Hz (C4 (Middle C))
* '.' // 293.66 Hz (D4)
* '/' // 329.63 Hz (E4)
* 'a' // 349.23 Hz (F4)
* 's' // 392.00 Hz (G4)
* 'd' // 440.00 Hz (A4)
* 'f' // 493.88 Hz (B4)
* 'g' // 523.25 Hz (C5)
* 'h' // 587.33 Hz (D5)
* 'j' // 659.25 Hz (E5)
* 'k' // 698.46 Hz (F5)
* 'l' // 783.99 Hz (G5)
* ';' // 880.00 Hz (A5)
* 'q' // 987.77 Hz (B5)
* 'w' // 1046.50 Hz (C6)
*/
function createKeyUI(key) {
try {
const keyDiv = document.createElement('div');
keyDiv.classList.add('key');
keyDiv.textContent = key.toUpperCase();
keyDiv.id = key;
keyboardDiv.appendChild(keyDiv);
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of createKeyUI(key): " + exception);
}
}
/**
* This function adds keys to the keyboard DIV in ascending note order.
*/
Object.keys(noteFrequencies).forEach(createKeyUI);
/**
* This function generates physical sound waves whose frequencies are the values input by this function.
*
* This function also prints a time-stamped message indicating when a UI keyboard key was
* most recently pressed in the "console" DIV.
*/
function playNote(frequency) {
let time_stamped_message = "";
try {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.5); // Stop playing the note after 0.5 seconds elapses.
// Append the text in the div whose identifier is "console" with a time stamped message indicating that this function was called (and when it was called).
time_stamped_message = ("The function named playNote(frequency) (where frequency = " + frequency + ") was called at time: " + generate_time_stamp());
console.log(time_stamped_message);
time_stamped_message = generate_paragraph_html_element(time_stamped_message);
console_div = document.getElementById("console");
console_div.innerHTML += time_stamped_message;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of playNote(frequency): " + exception);
}
}
/**
* This function responds to the event of a UI keyboard key being pressed
* (as a consequence of the corresponding physical keyboard key being pressed down).
*/
document.addEventListener('keydown', (event) => {
const key = event.key.toLowerCase();
if (noteFrequencies[key]) {
playNote(noteFrequencies[key]);
// Add visual feedback to the key (by changing the background color of the corresponding key).
const keyDiv = document.getElementById(key);
if (keyDiv) {
keyDiv.classList.add('pressed');
}
}
});
/**
* This function responds to the event of a UI keyboard key being unpressed
* (as a consequence of the corresponding physical keyboard key being unpressed after being pressed).
*
* Specifically, this function changes the background color of the respective key back to light gray
* (after temporarily being set to green (for 0.5 seconds)).
*/
document.addEventListener('keyup', (event) => {
const key = event.key.toLowerCase();
const keyDiv = document.getElementById(key);
if (keyDiv) {
keyDiv.classList.remove('pressed');
}
});
/**
* This function responds to the event of a UI keyboard key being touched
* (and is logically equivalent to the physical key 'keydown' event listener function).
*/
document.addEventListener('touchstart', (event) => {
// Get the touched web page element.
const target = event.target;
// Check if the touched element is a key (with the 'key' class).
if (target.classList.contains('key')) {
const key = target.id.toLowerCase(); // Use the key's ID as the identifier.
if (noteFrequencies[key]) {
playNote(noteFrequencies[key]);
// Add visual feedback to the key (i.e. change background to green).
target.classList.add('pressed');
}
}
});
/**
* This function responds to the event of a UI keyboard key being untouched
* (and is logically equivalent to the physical key 'keyup' event listener function).
*/
document.addEventListener('touchend', (event) => {
// Get the touched web page element.
const target = event.target;
// Check if the released element is a key (with the 'key' class).
if (target.classList.contains('key')) {
// Remove the visual feedback from the key (i.e. change background back to original color).
target.classList.remove('pressed');
}
});
</pre>
<hr />
<p><strong>ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT Interface (Initial)</strong></p>
<hr />
<p>The screenshot image below depicts what the ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT web page interface is supposed to look like when the web page is initially loaded (or reloaded) by a web browser.</p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument_interface_p0.jpeg" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_musical_instrument_interface_p0.jpeg</a></p>
<hr />
<figure class="wp-block-image size-full"><img data-attachment-id="35149" data-permalink="https://karbytesforlifeblog.wordpress.com/abridged_keyboard_musical_instrument/abridged_keyboard_musical_instrument_interface_p0/" data-orig-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg" data-orig-size="1104,870" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="abridged_keyboard_musical_instrument_interface_p0" data-image-description="" data-image-caption="" data-medium-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg?w=300" data-large-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg?w=1000" width="1104" height="870" src="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg" alt="" class="wp-image-35149" srcset="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg 1104w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg?w=150&h=118 150w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg?w=300&h=236 300w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg?w=768&h=605 768w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p0.jpeg?w=1024&h=807 1024w" sizes="(max-width: 1104px) 100vw, 1104px" /></figure>
<hr />
<p><strong>ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT Interface (After Pressing Keys)</strong></p>
<hr />
<p>The screenshot image below depicts what the ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT web page interface could look like after the user presses one or more keys (either in succession or simultaneously). In this case, the ‘a’ and ‘s’ keys were pressed simultaneously.</p>
<p>image_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/beats_machine_interface_screenshot_p1.jpeg" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/beats_machine_interface_screenshot_p1.jpeg</a></p>
<hr />
<figure class="wp-block-image size-full"><img data-attachment-id="35151" data-permalink="https://karbytesforlifeblog.wordpress.com/abridged_keyboard_musical_instrument/abridged_keyboard_musical_instrument_interface_p1/" data-orig-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg" data-orig-size="1077,1040" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="abridged_keyboard_musical_instrument_interface_p1" data-image-description="" data-image-caption="" data-medium-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg?w=300" data-large-file="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg?w=1000" width="1077" height="1040" src="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg" alt="" class="wp-image-35151" srcset="https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg 1077w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg?w=150&h=145 150w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg?w=300&h=290 300w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg?w=768&h=742 768w, https://karbytesforlifeblog.wordpress.com/wp-content/uploads/2024/09/abridged_keyboard_musical_instrument_interface_p1.jpeg?w=1024&h=989 1024w" sizes="(max-width: 1077px) 100vw, 1077px" /></figure>
<hr />
<p><strong>ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT Use Case (Demonstration Video)</strong></p>
<hr />
<p>The video file linked below shows karbytes using its finished ABRIDGED_KEYBOARD_MUSICAL_INSTRUMENT application and provides some visual and auditory details about how that application works from the end user’s perspective.</p>
<p>video_file: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_by_karbytes_use_case_13sep2024.mp4" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_20/main/abridged_keyboard_by_karbytes_use_case_13sep2024.mp4</a></p>
<hr>
<p>This web page was last updated on 19_FEBRUARY_2025. The content displayed on this web page is licensed as <a style="background:#000000;color:#ff9000" href="https://karlinaobject.wordpress.com/public_domain/" target="_blank" rel="noopener">PUBLIC_DOMAIN</a> intellectual property.</p>
<hr>