SOUND_TRACK_LOOP_COUNTER
The single web page application 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.
(To use that application to play multiple sound tracks simultaneously, copy-paste the URL of that application web page into new web browser tabs).
To view hidden text inside each of the preformatted text boxes below, scroll horizontally.
SOFTWARE_APPLICATION_COMPONENTS
Hyper-Text-Markup-Language_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper.html
Cascading-Style-Sheet_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css
Cascading-Style-Sheet_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/bordered_container.css
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_2/main/sound_track_looper.js
To access the video files which each of the following audio files was derived from, visit the web page named SOUND_TRACK_LOOP_COUNTER_VIDEO_FILES on karbytes’ blogging website. That web page (which is external to this website) has been saved to the WayBack Machine and so have each of the raw video files hosted on GitHub 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).
sound_file_1: https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/coyote_vocalizations_01_july_2023.mp3
sound_file_3: https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_1/blob/main/drums_karbytes_10_september_2023_part_0.mp3
sound_file_5: https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_13_may_2023.mp3
sound_file_6: https://github.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/blob/main/karbytes_guitar_07_june_2023.mp3
sound_file_7: https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_2/blob/main/karbytes_guitar_16_october_2023.mp3
sound_file_8: https://github.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_2/blob/main/karbytes_drums_20_october_2023.mp3
Hyper-Text-Markup-Language Code
The following Hyper-Text-Markup-Language (HTML) 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 sound_track_looper.html. Use a web browser such as Firefox 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).
Note that the contents of the HTML file are not displayed in a preformatted text box on this web page due to the fact that the WordPress server makes no distinction between HTML code which is encapsulated inside of a preformatted text box and WordPress web page source code. (The HTML code has been formatted to be properly displayed on this web page as of 17_SEPTEMBER. For details on how that was accomplished, visit the web page of karbytes’ blogging website named karbytes_17_september_2024).
If copy-pasting the following HTML code from the preformatted text box below into a text editor, remove the zero-width space Unicode character (​) which is located between the ‘s’ and the ‘r’ in the script tag(s) which each link to a JavaScript file.
Hyper-Text-Markup-Language_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/sound_track_looper.html
<!--
/**
* 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 src="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>
Cascading-Style-Sheet Code
The following Cascading-Style-Sheet (CSS) 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 karbytes_aesthetic.css.
Cascading-Style-Sheet_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css
/**
* 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;
}
JavaScript Code
The following JavaScript (JS) 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 sound_track_looper.js.
The text in the preformatted text box below appears on this web page (while rendered correctly by the web browser) to be identical to the content of the JavaScript source code file whose Uniform Resource Locator is displayed in the green hyperlink below.
(Note that angle brackets which resemble HTML tags (i.e. an “is less than” symbol (i.e. ‘<‘) followed by an “is greater than” symbol (i.e. ‘>’) displayed in the aforementioned text box have been replaced (at the source code level of this web page) with Unicode symbols U+003C (which is rendered by the web browser as ‘<‘) and U+003E (which is rendered by the web browser as ‘>’). That is because the WordPress web page editor interprets a plain-text versions 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 deletes the content between those (plain-text) inequality symbols)).
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/probability.js
/**
* file: sound_track_looper.js
* type: JavaScript
* author: karbytes
* date: 20_OCTOBER_2023
* 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' + '>');
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 += (('') + message + (''));
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);
}
}
SOUND_TRACK_LOOPER Interface (Initial)
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.
SOUND_TRACK_LOOPER Interface (Progress)
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.
(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)).
This web page was last updated on 17_SEPTEMBER_2024. The content displayed on this web page is licensed as PUBLIC_DOMAIN intellectual property.