This repository has been archived by the owner on Jan 18, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathP24_SOUND_TRACK_LOOP_COUNTER.html
329 lines (304 loc) · 32.4 KB
/
P24_SOUND_TRACK_LOOP_COUNTER.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
<hr />
<p><strong>SOUND_TRACK_LOOP_COUNTER</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 an audio track player which plays a sound file continuously (until the application web page is closed or refreshed). When the application user clicks the start button, the start button will disappear and the number of seconds elapsed since the start button was clicked will be displayed on the application web page. Also, the number of audio track loops played since the start button was clicked will be displayed on that web page.</span></p>
<p>(To use that application to play multiple sound tracks simultaneously, copy-paste the <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/URL" target="_blank" rel="noopener">URL</a> of that application web page into new <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Web_browser" target="_blank" rel="noopener">web browser</a> tabs).</p>
<p>A video showcasing an example use case of the software application (with multiple browser tabs playing different sound tracks simultaneously) was recorded by karbytes on 29_NOVEMBER_2024 in karbytes’ <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_25/main/room_of_karbytes_closet_desk_13nov2024.mp4" target="_blank" rel="noopener">closet</a> (and a Uniform Resource Locator to that video is as follows): <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/karbytes_sound_track_looper_use_case_29nov2024.mp4" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/karbytes_sound_track_looper_use_case_29nov2024.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_summer_2023_starter_pack/main/sound_track_looper.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper.html</a></p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css</a></p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/bordered_container.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/bordered_container.css</a></p>
<p>JavaScript_file: <a style="background: #000000;color: #00FF00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/sound_track_looper.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/sound_track_looper.js</a></p>
<p><em>To access the video files which each of the following audio files was derived from, visit the web page named <a style="background: #000000;color: #ff9000" href="https://karbytesforlifeblog.wordpress.com/sound_track_loop_counter_video_files/" target="_blank" rel="noopener">SOUND_TRACK_LOOP_COUNTER_VIDEO_FILES</a> on karbytes’ blogging website. That web page (which is external to this website) has been saved to the <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Wayback_Machine" target="_blank" rel="noopener">WayBack Machine</a> and so have each of the raw video files hosted on <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/GitHub" target="_blank" rel="noopener">GitHub</a> web pages (and each of those GitHub-hosted raw video files is playable on the WayBack Machine saves of those GitHub-hosted raw video file web pages).</em></p>
<p>sound_file_0: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/frogs_croaking_in_castro_valley_california_21_april_2022.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/frogs_croaking_in_castro_valley_california_21_april_2022.mp3</a></p>
<p>sound_file_1: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/coyote_vocalizations_01_july_2023.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/coyote_vocalizations_01_july_2023.mp3</a></p>
<p>sound_file_2: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_drums_castro_valley_california_12_december_2022.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_drums_castro_valley_california_12_december_2022.mp3</a></p>
<p>sound_file_3: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_1/blob/main/drums_karbytes_10_september_2023_part_0.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_1/blob/main/drums_karbytes_10_september_2023_part_0.mp3</a></p>
<p>sound_file_4: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_castro_valley_california_12_december_2022.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_castro_valley_california_12_december_2022.mp3</a></p>
<p>sound_file_5: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_13_may_2023.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_13_may_2023.mp3</a></p>
<p>sound_file_6: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_07_june_2023.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_07_june_2023.mp3</a></p>
<p>sound_file_7: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_2/blob/main/karbytes_guitar_16_october_2023.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_2/blob/main/karbytes_guitar_16_october_2023.mp3</a></p>
<p>sound_file_8: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_2/blob/main/karbytes_drums_20_october_2023.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_2/blob/main/karbytes_drums_20_october_2023.mp3</a></p>
<p>sound_file_9: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT/blob/main/guitar_karbytes_13july2024.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT/blob/main/guitar_karbytes_13july2024.mp3</a></p>
<p>sound_file_10: <a style="background: #000000;color: #ff9000" href="https://github.com/karlinarayberinger/KARLINA_OBJECT/blob/main/guitar_karbytes_20august2024.mp3" target="_blank" rel="noopener">https://github.com/karlinarayberinger/KARLINA_OBJECT/blob/main/guitar_karbytes_20august2024.mp3</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 SOUND_TRACK_LOOPER 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>sound_track_looper.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_summer_2023_starter_pack/main/sound_track_looper.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper.html</a></p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper_html_code_screenshot.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper_html_code_screenshot.png</a></p>
<hr />
<pre>
<!--
/**
* file: sound_track_looper.html
* type: Hyper-Text-Markup-Language
* author: karbytes
* date: 10_JULY_2023
* license: PUBLIC_DOMAIN
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SOUND_TRACK_LOOPER</title>
<link rel="stylesheet" href="karbytes_aesthetic.css">
<link rel="stylesheet" href="bordered_container.css">
<script s​rc="sound_track_looper.js"></script>
</head>
<body onload="load_web_page()">
<div class="bordered_container">
<h1>SOUND_TRACK_LOOPER</h1>
<p>Play a sound (whose duration is finite) for some indefinite number of cycles.</p>
</div>
<div class="bordered_container">
<p>1) Select a sound file from the list below.</p>
<p><select id="sound_file_menu"></select></p>
<p>2) Click the button to start playing the sound file.</p>
<p><input id="the_button" type="button" value="start_sound_track_looper()" onclick="start_sound_track_looper()"></p>
</div>
<div id="output" class="bordered_container">
<p>Seconds Elapsed: <span id="seconds_elapsed_display" class="data">???</span></p>
<p>Loops Completed: <span id="loops_completed_display" class="data">???</span></p>
<p>File Selected: <span id="file_selected_display" class="data">???</span></p>
</div>
<div class="bordered_container">
<p class="console" id="console_display">???</p>
</div>
</body>
</html>
</pre>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21933" data-permalink="https://karlinaobject.wordpress.com/sound_track_loop_counter/sound_track_looper_html_code_screenshot-2/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png" data-orig-size="1671,1364" 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="sound_track_looper_html_code_screenshot" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png?w=300" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png?w=1000" width="1671" height="1364" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png" alt="" class="wp-image-21933" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png 1671w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png?w=150&h=122 150w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png?w=300&h=245 300w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png?w=768&h=627 768w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_html_code_screenshot.png?w=1024&h=836 1024w" sizes="(max-width: 1671px) 100vw, 1671px" /></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 SOUND_TRACK_LOOPER 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_summer_2023_starter_pack/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/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 SOUND_TRACK_LOOPER web page application. Copy the JS code from the preformatted text box below or from the source code file which is linked below into a text editor and save that file as <strong>sound_track_looper.js</strong>.</p>
<p>JavaScript_file: <a style="background: #000000;color: #00FF00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/sound_track_looper.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/sound_track_looper.js</a></p>
<hr>
<pre>
/**
* file: sound_track_looper.js
* type: JavaScript
* author: karbytes
* date: 18_JANUARY_2025
* license: PUBLIC_DOMAIN
*/
/**
* Get the Number of milliseconds which have elapsed since the Unix Epoch.
*
* The Unix Epoch is 01_JANUARY_1970 at midnight (Coordinated Universal Time (UTC)).
*
* @return {String} message displaying the time at which this function was called.
*/
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.";
}
/**
* Generate an HTML formatted string which represents the list of OPTIONs displayed by a SELECT menu.
*
* By clicking on the SELECT element, an scrollable list of OPTIONs will appear.
*
* @return {String} a sequence of characters representing some natural number of OPTIONs inside of a SELECT menu.
*/
function get_menu_options() {
let HTML_string = ('<' + 'option value="frogs_croaking_in_castro_valley_california_21_april_2022.mp3" selected' + '>' + 'frogs_croaking_in_castro_valley_california_21_april_2022.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="coyote_vocalizations_01_july_2023.mp3"' + '>' + 'coyote_vocalizations_01_july_2023.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="karbytes_drums_castro_valley_california_12_december_2022.mp3"' + '>' + 'karbytes_drums_castro_valley_california_12_december_2022.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="drums_karbytes_10_september_2023_part_0.mp3"' + '>' + 'drums_karbytes_10_september_2023_part_0.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="karbytes_guitar_castro_valley_california_12_december_2022.mp3"' + '>' + 'karbytes_guitar_castro_valley_california_12_december_2022.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="karbytes_guitar_13_may_2023.mp3"' + '>' + 'karbytes_guitar_13_may_2023.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="karbytes_guitar_07_june_2023.mp3"' + '>' + 'karbytes_guitar_07_june_2023.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="karbytes_guitar_16_october_2023.mp3"' + '>' + 'karbytes_guitar_16_october_2023.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="karbytes_drums_20_october_2023.mp3"' + '>' + 'karbytes_drums_20_october_2023.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="guitar_karbytes_13july2024.mp3"' + '>' + 'guitar_karbytes_13july2024.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="guitar_karbytes_20august2024.mp3"' + '>' + 'guitar_karbytes_20august2024.mp3' + '<' + '/' + 'option' + '>');
return HTML_string;
}
/**
* Return the value of the selected menu OPTION of a SELECT menu element.
*
* @param {String} select_menu_identifier is the identifier (id) of a SELECT HTML element.
*
* @return {String} the value of the selected menu OPTION.
*/
function get_selected_menu_option_value(select_menu_identifier) {
try {
let menu_object = {}, options_array = [], selected_option_index = 0, selected_option_object = {}, selected_option_value;
menu_object = document.getElementById(select_menu_identifier);
options_array = menu_object.options;
selected_option_index = menu_object.selectedIndex;
selected_option_object = options_array[selected_option_index];
selected_option_value = selected_option_object.value
return selected_option_value;
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of get_selected_menu_option(select_menu_identifier): " + e);
}
}
/**
* Assume that this function is called whenever the web page file is opened or refreshed by a web browser.
*
* Display a time-stamped message which indicates the time at which the web page was opened as GREEN text inside the DIV at the bottom of the web page.
*
* Set the CYAN SPAN text which displays the number of seconds elapsed after the start_sound_track_looper() button is clicked to the value 0.
*
* Set the CYAN SPAN text which displays the number of times the selected audio track is played to the value 0.
*
* Populate the sound file SELECT menu with multiple sound file OPTIONs.
*
* Set the start_sound_track_looper() button to be visible rather than hidden to the application end user.
*
* If a runtime error occurs, use the try-catch block to perform exception handling by displaying a relevant web console message.
*/
function load_web_page() {
try {
const message = "The web page was loaded by the web browser at time: " + generate_time_stamp();
document.getElementById("console_display").innerHTML = message;
document.getElementById("seconds_elapsed_display").innerHTML = "0";
document.getElementById("loops_completed_display").innerHTML = "0";
document.getElementById("sound_file_menu").innerHTML = get_menu_options();
document.getElementById("file_selected_display").innerHTML = get_selected_menu_option_value("sound_file_menu");
document.getElementById("the_button").style.display = "block";
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of load_web_page(): " + e);
}
}
/**
* Assume that this function is called by the event of the start_sound_track_looper() button being clicked.
*
* Hide the start_sound_track_looper() button from the web page after that button is clicked.
*
* Append a time-stamped message which indicates the time at which the button was clicked as green text to the DIV content at the bottom of the web page.
*
* Set the CYAN SPAN text which displays the number of seconds elapsed after the start_sound_track_looper() button is clicked to the value 0.
*
* Set the CYAN SPAN text which displays the number of times the selected audio track is played to the value 0.
* Start playing the selected sound file for an indefinite number of times and start incrementing the number of seconds elapsed and start incrementing the number of audio track loops played.
*
* If a runtime error occurs, use the try-catch block to perform exception handling by displaying a relevant web console message.
*/
function start_sound_track_looper() {
try {
const message = "The button was clicked at time: " + generate_time_stamp();
let elapsed_seconds_display = document.getElementById("seconds_elapsed_display");
let loops_completed_display = document.getElementById("loops_completed_display");
let file_selected_display = document.getElementById("file_selected_display");
let selected_file_name = get_selected_menu_option_value("sound_file_menu");
let button = document.getElementById("the_button");
let audio_file = undefined;
let loop_length = undefined;
let action = undefined;
let number_of_seconds = 0;
let number_of_loops = 0;
document.getElementById("console_display").innerHTML += (('<p>') + message + ('</p>'));
button.style.display = "none";
elapsed_seconds_display.innerHTML = "0";
loops_completed_display.innerHTML = "0";
file_selected_display.innerHTML = selected_file_name;
audio_file = new Audio(selected_file_name);
loop_length = audio_file.duration;
audio_file.play();
action = setInterval(
function() { // Call the anonymous function once per every 1000 milliseconds.
number_of_seconds = parseInt(elapsed_seconds_display.innerHTML);
number_of_loops = parseInt(loops_completed_display.innerHTML);
number_of_seconds += 1
if (audio_file.ended) {
number_of_loops += 1;
audio_file.play();
}
elapsed_seconds_display.innerHTML = number_of_seconds;
loops_completed_display.innerHTML = number_of_loops;
}, 1000 // milliseconds per interval
);
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of start_sound_track_looper(): " + e);
}
}
</pre>
<hr />
<p><strong>SOUND_TRACK_LOOPER Interface (Initial)</strong></p>
<hr />
<p>The screenshot image below depicts what the SOUND_TRACK_LOOPER web page interface is supposed to look like when the web page is initially loaded by a web browser.</p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper_interface_initial.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper_interface_initial.png</a></p>
<hr />
<figure class="wp-block-image size-full"><img data-attachment-id="21931" data-permalink="https://karlinaobject.wordpress.com/sound_track_loop_counter/sound_track_looper_interface_initial-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png" data-orig-size="825,730" 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="sound_track_looper_interface_initial" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png?w=300" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png?w=825" width="825" height="730" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png" alt="" class="wp-image-21931" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png 825w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png?w=150&h=133 150w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png?w=300&h=265 300w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_initial.png?w=768&h=680 768w" sizes="(max-width: 825px) 100vw, 825px" /></figure>
<hr />
<p><strong>SOUND_TRACK_LOOPER Interface (Progress)</strong></p>
<hr />
<p>The screenshot image below depicts what the SOUND_TRACK_LOOPER web page interface could look like after the start_sound_track_looper() button is clicked.</p>
<p>(Note that, after the start_sound_track_looper() button is clicked, that button is set to invisible so that the application user cannot change the sound track which is playing to some other sound track nor stop the sound track which is playing nor change the speed at which the sound track is playing nor reverse the order in which auditory phenomena in that sound track occur as time elapses (but the user can reset the web page application by refreshing the web page)).</p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper_interface_progress.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper_interface_progress.png</a></p>
<hr />
<figure class="wp-block-image size-full"><img data-attachment-id="21929" data-permalink="https://karlinaobject.wordpress.com/sound_track_loop_counter/sound_track_looper_interface_progress-2/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png" data-orig-size="823,745" 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="sound_track_looper_interface_progress" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png?w=300" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png?w=823" width="823" height="745" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png" alt="" class="wp-image-21929" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png 823w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png?w=150&h=136 150w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png?w=300&h=272 300w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/sound_track_looper_interface_progress.png?w=768&h=695 768w" sizes="(max-width: 823px) 100vw, 823px" /></figure>
<hr />
<p>This web page was last updated on 18_JANUARY_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 />