SOUND_TRACK_LOOPER_15_NOVEMBER_2022_COPY
* * *
START OF WEB PAGE COPY
* * *
SOUND_TRACK_LOOPER
The single web page application featured in this tutorial web page substantiates an audio track player which allows the application user to select one of some natural number of sound files to play repeatedly. 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 is displayed on the web page interface. Additionally, the number of audio track loops played since the start button was clicked is displayed on the web page interface.
To view hidden text inside of the preformatted text boxes below, scroll horizontally.
Software Application Files
Hyper-Text-Markup-Language file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/sound_track_looper.html
Cascading-Style-Sheet file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/karbytes_aesthetic.css
Cascading-Style-Sheet file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/bordered_container.css
JavaScript file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/sound_track_looper.js
Moving Picture Experts Group Layer-3 Audio file (GitHub): https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/frogs_croaking_24_august_2021.mp3
Moving Picture Experts Group Layer-3 Audio file (Internet Archive): https://archive.org/details/frogs_croaking_24_august_2021
Moving Picture Experts Group Layer-3 Audio file (GitHub): https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/drumz_karbytes_10_july_2022.mp3
Moving Picture Experts Group Layer-3 Audio file (Internet Archive): https://archive.org/details/karbytes_drumz_10_july_2022
Moving Picture Experts Group Layer-3 Audio file (GitHub): https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/drumz_karbytes_12_november_2022.mp3
Moving Picture Experts Group Layer-3 Audio file (Internet Archive): https://archive.org/details/drumz_karbytes_12_november_2022_202211
Interface Initial (Screenshot Image)
Interface Screenshot Image file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/sound_track_looper_interface_initial.png
Interface Final (Screenshot Image)
Interface Screenshot Image file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/sound_track_looper_interface_final.png
Application Web Page Source Code (Screenshot Image)
Hyper-Text-Markup-Language file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/sound_track_looper.html
HTML Screenshot Image file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/sound_track_looper_web_page_source_code.png
The Hyper-Text-Markup-Language source code defines the web page elements which comprise the user interface component of the SOUND_TRACK_LOOPER software application.
Stylesheet Source Code (Preformatted Text)
Cascading-Style-Sheet file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/karbytes_aesthetic.css
The Cascading-Style-Sheet source code defines the specifications which control the appearance of the SOUND_TRACK_LOOPER web page interface.
/**
* file: karbytes_aesthetic.css
* type: Cascading-Style-Sheet
* date: 14_AUGUST_2022
* author: Karlina Ray Beringer
* 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. Make the text background BLACK. */
.console {
color: #00ff00;
background: #000000;
}
Stylesheet Source Code (Preformatted Text)
Cascading-Style-Sheet file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/bordered_container.css
The Cascading-Style-Sheet source code defines the specifications which control the appearance of the SOUND_TRACK_LOOPER web page interface.
/**
* file: bordered_container.css
* type: Cascading-Style-Sheet
* author: Karlina Ray Beringer
* date: 17_AUGUST_2022
* license: PUBLIC_DOMAIN
*/
/**
* Create a space which is 10 pixels in width between adjacent div elements with the class property "bordered_container".
*/
.bordered_container {
border-color: #00ff00; /** Make the borders of div elements whose class property is "bordered_container" GREEN in color. */
border-width: 3px; /** Make the borders of div elements whose class property is "bordered_container" 3 pixels in width. */
border-style: solid; /** Make the borders of div elements whose class property is "bordered_container" solid (rather than dotted, et cetera). */
border-radius: 5px; /** Make the corners of div elements whose class property is "bordered_container" rounded with a circumference of 5 pixels. */
padding: 10px; /** Create a space which is 10 pixels in width between div content and div borders for div elements whose class property is "bordered_container". */
margin: 10px; /** Create a space which is 10 pixels in width between adjacent div elements whose class property is "bordered_container". */
}
JavaScript Source Code (Preformatted Text)
JavaScript file: https://github.com/karlinarayberinger/karlina_object_ultimate_starter_pack/blob/main/sound_track_looper.js
The JavaScript source code defines the functions which control the behavior of the SOUND_TRACK_LOOPER software application.
/**
* file: sound_track_looper.js
* type: JavaScript
* author: Karlina Ray Beringer
* date: 12_NOVEMBER_2022
* 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 natural number of options for a select menu.
*/
function get_menu_options() {
let HTML_string = ('<' + 'option value="frogs_croaking_24_august_2021.mp3" selected' + '>' + 'frogs_croaking_24_august_2021.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="drumz_karbytes_10_july_2022.mp3"' + '>' + 'drumz_karbytes_10_july_2022.mp3' + '<' + '/' + 'option' + '>');
HTML_string += ('<' + 'option value="drumz_karbytes_12_november_2022.mp3"' + '>' + 'drumz_karbytes_12_november_2022.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 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 the web browser.
* Display a time-stamped message which indicates the time at which the web page was opened as green text at the bottom of the page.
* Set the cyan span text which represents seconds elapsed to the value 0.
* Set the cyan span text which represents loops completed to the value 0.
* Populate the sound file menu with multiple sound file options.
* Set the yellow span text which represents loops completed to the one and only default selected value in the select menu.
* Set the 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 {
let 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 funciton is called by the event of a single button click (of the button whose id is "the_button").
* Hide "the button" from the user interface after it is presumably clicked.
* Display a time-stamped message which indicates the time at which the button was clicked as green text at the bottom of the page.
* Set the cyan span text which represents seconds elapsed to the value 0.
* Set the cyan span text which represents loops completed to the value 0.
* Start playing the selected sound file for an indefinite number of times and incrementing the number of seconds elapsed and the number of audio 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 {
let 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 + ('<' + '/' + '>'));
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);
}
}
This web page was last updated on 12_NOVEMBER_2022. The content displayed on this web page is licensed as PUBLIC_DOMAIN intellectual property.
* * *
END OF WEB PAGE COPY
* * *
This web page was last updated on 15_NOVEMBER_2022. The content displayed on this web page is licensed as PUBLIC_DOMAIN intellectual property.
KARBYTES_FOR_LIFE_BLOG 