Embedded Files
Download CODEÂ Â Â Â Â Â Â Â Â Â Â Â Â Â Download PDF
Topalian JavaScript Piano by Christopher Topalian.pdf<!-- Dedicated to God the Father -->
<!-- All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024 -->
<!-- https://github.com/ChristopherTopalian -->
<!-- https://github.com/ChristopherAndrewTopalian -->
<!-- Topalian_JavaScript_Piano(Online_Version).html -->
<!-- Version 001 - (2024-09-19) -->
<html>
<head>
<title> Topalian JavaScript Piano </title>
<style>
/* style001.css */
body
{
    background-color: rgb(30, 30, 30);
}
.natural
{
    width: 25px;
    background-color: rgb(255, 255, 255);
    border: solid 1px rgb(0, 0, 0);
    font-family: arial;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 1px 1px black;
    user-select: none;
}
.natural:active
{
    transform: translateY(3px);
    background-color: rgb(200, 200, 200);
    border-color: rgb(0, 255, 255);
    box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.5);
    color: rgb(255, 0, 255);
}
.sharp
{
    width: 25px;
    background-color: rgb(0, 0, 0);
    border: solid 1px rgb(0, 0, 0);
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px black;
    user-select: none;
}
.sharp:active
{
    transform: translateY(3px);
    background-color: rgb(200, 200, 200);
    border-color: rgb(0, 255, 255);
    color: rgb(255, 0, 255);
    box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.5);
}
button
{
    background-color: rgb(0, 77, 129);
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 1px;
    margin-bottom: 1px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(100, 100, 255);
    border-radius: 4px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 1px;
    padding-bottom: 1px;
    opacity: 1.0;
    font-size: 14px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-align: center;
}
button:hover
{
    background-color: rgb(6, 31, 47);
    border-color: rgb(0, 255, 255);
    color: rgb(0, 255, 255);
}
button:active
{
    color: rgb(255, 0, 255);
}
/* -- */
/* Dedicated to God the Father */
/* All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024 */
/* https://github.com/ChristopherTopalian */
/* https://github.com/ChristopherAndrewTopalian */
</style>
<script>
// shortcuts.js
function ge(whichId)
{
    let result = document.getElementById(whichId);
    return result;
}
function ce(whichType)
{
    let result = document.createElement(whichType);
    return result;
}
function ba(whichElement)
{
    let result = document.body.append(whichElement);
    return result;
}
function ct(whichText)
{
    let result = document.createTextNode(whichText);
    return result;
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// worldVariables.js
let online = true;
let natural = 'rgb(255, 255, 255)';
let sharp = 'rgb(0, 0, 0)';
let highlight = 'rgb(0, 255, 255)';
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// notes.js
let notes =
[
    {
        name: 'c1',
        soundFileOffline: 'src/media/notes/c1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c1.mp4',
        octave: 1
    },
    {
        name: 'csharp1',
        soundFileOffline: 'src/media/notes/csharp1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/csharp1.mp4',
        octave: 1
    },
    {
        name: 'd1',
        soundFileOffline: 'src/media/notes/d1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/d1.mp4',
        octave: 1
    },
    {
        name: 'dsharp1',
        soundFileOffline: 'src/media/notes/dsharp1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/dsharp1.mp4',
        octave: 1
    },
    {
        name: 'e1',
        soundFileOffline: 'src/media/notes/e1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/e1.mp4',
        octave: 1
    },
    {
        name: 'f1',
        soundFileOffline: 'src/media/notes/f1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/f1.mp4',
        octave: 1
    },
    {
        name: 'fsharp1',
        soundFileOffline: 'src/media/notes/fsharp1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/fsharp1.mp4',
        octave: 1
    },
    {
        name: 'g1',
        soundFileOffline: 'src/media/notes/g1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/g1.mp4',
        octave: 1
    },
    {
        name: 'gsharp1',
        soundFileOffline: 'src/media/notes/gsharp1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/gsharp1.mp4',
        octave: 1
    },
    {
        name: 'a1',
        soundFileOffline: 'src/media/notes/a1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/a1.mp4',
        octave: 1
    },
    {
        name: 'asharp1',
        soundFileOffline: 'src/media/notes/asharp1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/asharp1.mp4',
        octave: 1
    },
    {
        name: 'b1',
        soundFileOffline: 'src/media/notes/b1.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/b1.mp4',
        octave: 1
    },
    {
        name: 'c2',
        soundFileOffline: 'src/media/notes/c2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c2.mp4',
        octave: 2
    },
    {
        name: 'csharp2',
        soundFileOffline: 'src/media/notes/csharp2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/csharp2.mp4',
        octave: 2
    },
    {
        name: 'd2',
        soundFileOffline: 'src/media/notes/d2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/d2.mp4',
        octave: 2
    },
    {
        name: 'dsharp2',
        soundFileOffline: 'src/media/notes/dsharp2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/dsharp2.mp4',
        octave: 2
    },
    {
        name: 'e2',
        soundFileOffline: 'src/media/notes/e2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/e2.mp4',
        octave: 2
    },
    {
        name: 'f2',
        soundFileOffline: 'src/media/notes/f2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/f2.mp4',
        octave: 2
    },
    {
        name: 'fsharp2',
        soundFileOffline: 'src/media/notes/fsharp2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/fsharp2.mp4',
        octave: 2
    },
    {
        name: 'g2',
        soundFileOffline: 'src/media/notes/g2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/g2.mp4',
        octave: 2
    },
    {
        name: 'gsharp2',
        soundFileOffline: 'src/media/notes/gsharp2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/gsharp2.mp4',
        octave: 2
    },
    {
        name: 'a2',
        soundFileOffline: 'src/media/notes/a2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/a2.mp4',
        octave: 2
    },
    {
        name: 'asharp2',
        soundFileOffline: 'src/media/notes/asharp2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/asharp2.mp4',
        octave: 2
    },
    {
        name: 'b2',
        soundFileOffline: 'src/media/notes/b2.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/b2.mp4',
        octave: 2
    },
    {
        name: 'c3',
        soundFileOffline: 'src/media/notes/c3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c3.mp4',
        octave: 3
    },
    {
        name: 'csharp3',
        soundFileOffline: 'src/media/notes/csharp3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/csharp3.mp4',
        octave: 3
    },
    {
        name: 'd3',
        soundFileOffline: 'src/media/notes/d3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/d3.mp4',
        octave: 3
    },
    {
        name: 'dsharp3',
        soundFileOffline: 'src/media/notes/dsharp3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/dsharp3.mp4',
        octave: 3
    },
    {
        name: 'e3',
        soundFileOffline: 'src/media/notes/e3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/e3.mp4',
        octave: 3
    },
    {
        name: 'f3',
        soundFileOffline: 'src/media/notes/f3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/f3.mp4',
        octave: 3
    },
    {
        name: 'fsharp3',
        soundFileOffline: 'src/media/notes/fsharp3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/fsharp3.mp4',
        octave: 3
    },
    {
        name: 'g3',
        soundFileOffline: 'src/media/notes/g3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/g3.mp4',
        octave: 3
    },
    {
        name: 'gsharp3',
        soundFileOffline: 'src/media/notes/gsharp3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/gsharp3.mp4',
        octave: 3
    },
    {
        name: 'a3',
        soundFileOffline: 'src/media/notes/a3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/a3.mp4',
        octave: 3
    },
    {
        name: 'asharp3',
        soundFileOffline: 'src/media/notes/asharp3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/asharp3.mp4',
        octave: 3
    },
    {
        name: 'b3',
        soundFileOffline: 'src/media/notes/b3.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/b3.mp4',
        octave: 3
    },
    {
        name: 'c4',
        soundFileOffline: 'src/media/notes/c4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c4.mp4',
        octave: 4
    },
    {
        name: 'csharp4',
        soundFileOffline: 'src/media/notes/csharp4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/csharp4.mp4',
        octave: 4
    },
    {
        name: 'd4',
        soundFileOffline: 'src/media/notes/d4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/d4.mp4',
        octave: 4
    },
    {
        name: 'dsharp4',
        soundFileOffline: 'src/media/notes/dsharp4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/dsharp4.mp4',
        octave: 4
    },
    {
        name: 'e4',
        soundFileOffline: 'src/media/notes/e4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/e4.mp4',
        octave: 4
    },
    {
        name: 'f4',
        soundFileOffline: 'src/media/notes/f4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/f4.mp4',
        octave: 4
    },
    {
        name: 'fsharp4',
        soundFileOffline: 'src/media/notes/fsharp4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/fsharp4.mp4',
        octave: 4
    },
    {
        name: 'g4',
        soundFileOffline: 'src/media/notes/g4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/g4.mp4',
        octave: 4
    },
    {
        name: 'gsharp4',
        soundFileOffline: 'src/media/notes/gsharp4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/gsharp4.mp4',
        octave: 4
    },
    {
        name: 'a4',
        soundFileOffline: 'src/media/notes/a4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/a4.mp4',
        octave: 4
    },
    {
        name: 'asharp4',
        soundFileOffline: 'src/media/notes/asharp4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/asharp4.mp4',
        octave: 4
    },
    {
        name: 'b4',
        soundFileOffline: 'src/media/notes/b4.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/b4.mp4',
        octave: 4
    },
    {
        name: 'c5',
        soundFileOffline: 'src/media/notes/c5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c5.mp4',
        octave: 5
    },
    {
        name: 'csharp5',
        soundFileOffline: 'src/media/notes/csharp5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/csharp5.mp4',
        octave: 5
    },
    {
        name: 'd5',
        soundFileOffline: 'src/media/notes/d5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/d5.mp4',
        octave: 5
    },
    {
        name: 'dsharp5',
        soundFileOffline: 'src/media/notes/dsharp5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/dsharp5.mp4',
        octave: 5
    },
    {
        name: 'e5',
        soundFileOffline: 'src/media/notes/e5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/e5.mp4',
        octave: 5
    },
    {
        name: 'f5',
        soundFileOffline: 'src/media/notes/f5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/f5.mp4',
        octave: 5
    },
    {
        name: 'fsharp5',
        soundFileOffline: 'src/media/notes/fsharp5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/fsharp5.mp4',
        octave: 5
    },
    {
        name: 'g5',
        soundFileOffline: 'src/media/notes/g5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/g5.mp4',
        octave: 5
    },
    {
        name: 'gsharp5',
        soundFileOffline: 'src/media/notes/gsharp5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/gsharp5.mp4',
        octave: 5
    },
    {
        name: 'a5',
        soundFileOffline: 'src/media/notes/a5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/a5.mp4',
        octave: 5
    },
    {
        name: 'asharp5',
        soundFileOffline: 'src/media/notes/asharp5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/asharp5.mp4',
        octave: 5
    },
    {
        name: 'b5',
        soundFileOffline: 'src/media/notes/b5.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/b5.mp4',
        octave: 5
    },
    {
        name: 'c6',
        soundFileOffline: 'src/media/notes/c6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c6.mp4',
        octave: 6
    },
    {
        name: 'csharp6',
        soundFileOffline: 'src/media/notes/csharp6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/csharp6.mp4',
        octave: 6
    },
    {
        name: 'd6',
        soundFileOffline: 'src/media/notes/d6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/d6.mp4',
        octave: 6
    },
    {
        name: 'dsharp6',
        soundFileOffline: 'src/media/notes/dsharp6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/dsharp6.mp4',
        octave: 6
    },
    {
        name: 'e6',
        soundFileOffline: 'src/media/notes/e6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/e6.mp4',
        octave: 6
    },
    {
        name: 'f6',
        soundFileOffline: 'src/media/notes/f6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/f6.mp4',
        octave: 6
    },
    {
        name: 'fsharp6',
        soundFileOffline: 'src/media/notes/fsharp6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/fsharp6.mp4',
        octave: 6
    },
    {
        name: 'g6',
        soundFileOffline: 'src/media/notes/g6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/g6.mp4',
        octave: 6
    },
    {
        name: 'gsharp6',
        soundFileOffline: 'src/media/notes/gsharp6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/gsharp6.mp4',
        octave: 6
    },
    {
        name: 'a6',
        soundFileOffline: 'src/media/notes/a6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/a6.mp4',
        octave: 6
    },
    {
        name: 'asharp6',
        soundFileOffline: 'src/media/notes/asharp6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/asharp6.mp4',
        octave: 6
    },
    {
        name: 'b6',
        soundFileOffline: 'src/media/notes/b6.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/b6.mp4',
        octave: 6
    },
    {
        name: 'c7',
        soundFileOffline: 'src/media/notes/c7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c7.mp4',
        octave: 7
    },
    {
        name: 'csharp7',
        soundFileOffline: 'src/media/notes/csharp7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/csharp7.mp4',
        octave: 7
    },
    {
        name: 'd7',
        soundFileOffline: 'src/media/notes/d7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/d7.mp4',
        octave: 7
    },
    {
        name: 'dsharp7',
        soundFileOffline: 'src/media/notes/dsharp7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/dsharp7.mp4',
        octave: 7
    },
    {
        name: 'e7',
        soundFileOffline: 'src/media/notes/e7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/e7.mp4',
        octave: 7
    },
    {
        name: 'f7',
        soundFileOffline: 'src/media/notes/f7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/f7.mp4',
        octave: 7
    },
    {
        name: 'fsharp7',
        soundFileOffline: 'src/media/notes/fsharp7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/fsharp7.mp4',
        octave: 7
    },
    {
        name: 'g7',
        soundFileOffline: 'src/media/notes/g7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/g7.mp4',
        octave: 7
    },
    {
        name: 'gsharp7',
        soundFileOffline: 'src/media/notes/gsharp7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/gsharp7.mp4',
        octave: 7
    },
    {
        name: 'a7',
        soundFileOffline: 'src/media/notes/a7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/a7.mp4',
        octave: 7
    },
    {
        name: 'asharp7',
        soundFileOffline: 'src/media/notes/asharp7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/asharp7.mp4',
        octave: 7
    },
    {
        name: 'b7',
        soundFileOffline: 'src/media/notes/b7.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/b7.mp4',
        octave: 7
    },
    {
        name: 'c8',
        soundFileOffline: 'src/media/notes/c8.mp4',
        soundFileOnline: 'https://javascriptbook.weebly.com/uploads/7/6/4/0/76407657/c8.mp4',
        octave: 8
    },
];
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// makeNotes.js
function makeNotes(whichId, whichArray, whichX, whichY, whichOctave)
{
    let mainDiv = ce('div');
    mainDiv.style.padding = 5 + 'px';
    mainDiv.style.marginBottom = 5 + 'px';
    mainDiv.style.display = 'flex';
    mainDiv.style.flexDirection = 'row';
    ba(mainDiv);
    //-//
    let subDiv = ce('div');
    subDiv.id = whichId;
    subDiv.style.width = 400 + 'px';
    subDiv.style.height = '30px';
    subDiv.style.border = 'solid 1px rgb(0, 200, 200)';
    mainDiv.append(subDiv);
    //-//
    // makeElementDraggable(subDiv);
    //-//
    for (let i = 0; i < whichArray.length; i++)
    {
        if (whichArray[i].octave == whichOctave)
        {
            let note = ce('div');
            note.id = whichArray[i].name;
            note.title = whichArray[i].name;
            note.style.position = 'absolute';
            note.style.left = whichX + 'px';
            note.style.width = 20 + 'px';
            note.style.height = 20 + 'px';
            note.style.border = 'solid 2px rgb(0, 0, 0)';
            note.onclick = function()
            {
                audioPlay(whichArray[i].name + '_note', 1.0);
            };
            //-//
            if (whichArray[i].name.length <= 3)
            {
                note.className = 'natural';
                note.textContent = whichArray[i].name;
            }
            else if (whichArray[i].name.length > 3)
            {
                note.className = 'sharp';
                note.textContent = whichArray[i].name.replace('sharp', '#');
            }
            subDiv.append(note);
            // move to the next note position
            whichX += 30;
        }
    }
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// makeTitleOfApp.js
function makeTitleOfApp()
{
    let titleContainer = ce('div');
    titleContainer.style.position = 'absolute';
    titleContainer.style.right = '10px';
    titleContainer.style.bottom = '10px';
    titleContainer.style.zIndex = 1;
    ba(titleContainer);
    //-//
    let titleOfApp = ce('a');
    titleOfApp.id = 'titleOfApp';
    titleOfApp.textContent = 'Topalian JavaScript Piano';
    titleOfApp.href = 'https://github.com/christophertopalian';
    titleOfApp.target = '_blank';
    titleOfApp.style.fontSize = '17px';
    titleOfApp.style.fontWeight = 'bold';
    titleContainer.append(titleOfApp);
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// menuHarmonicMinorScales.js
function menuHarmonicMinorScales()
{
    let theId = 'harmonicMinorScales';
    //-//
    let mainDiv = ce("div");
    mainDiv.id = theId;
    mainDiv.style.position = "absolute";
    mainDiv.style.right = 265 +'px';
    mainDiv.style.top = 20 + 'px';
    mainDiv.style.width = 150 + 'px';
    mainDiv.style.height = '150px';
    mainDiv.style.zIndex = '3';
    mainDiv.style.overflowY = 'scroll';
    mainDiv.style.display = 'flex';
    mainDiv.style.flexDirection = 'column';
    mainDiv.style.resize = 'both';
    ba(mainDiv);
    makeElementDraggable(mainDiv);
    //-//
    let subDiv = ce('div');
    subDiv.textContent = 'Harmonic Minor';
    subDiv.style.color = 'rgb(255, 255, 255)';
    mainDiv.append(subDiv);
    //-//
    subDiv.append(ce('br'));
    //-//
    let aButton = ce('button');
    aButton.textContent = 'A';
    aButton.onclick = function()
    {
        clearScales();
        colorScale7(aHarmonicMinorScale);
    };
    subDiv.append(aButton);
    //-//
    let asharpButton = ce('button');
    asharpButton.id = 'asharpButton';
    asharpButton.textContent = 'A# ';
    asharpButton.onclick = function()
    {
        clearScales();
        colorScale7(asharpHarmonicMinorScale);
    };
    subDiv.append(asharpButton);
    //-//
    let bButton = ce('button');
    bButton.textContent = 'B ';
    bButton.onclick = function()
    {
        clearScales();
        colorScale7(bHarmonicMinorScale);
    };
    subDiv.append(bButton);
    //-//
    let cButton = ce('button');
    cButton.id = 'cButton';
    cButton.textContent = 'C ';
    cButton.onclick = function()
    {
        clearScales();
        colorScale7(cHarmonicMinorScale);
    };
    subDiv.append(cButton);
    //-//
    let csharpButton = ce('button');
    csharpButton.textContent = 'C# ';
    csharpButton.onclick = function()
    {
        clearScales();
        colorScale7(csharpHarmonicMinorScale);
    };
    subDiv.append(csharpButton);
    //-//
    let dButton = ce('button');
    dButton.textContent = 'D ';
    dButton.onclick = function()
    {
        clearScales();
        colorScale7(dHarmonicMinorScale);
    };
    subDiv.append(dButton);
    //-//
    let dsharpButton = ce('button');
    dsharpButton.textContent = 'D#';
    dsharpButton.onclick = function()
    {
        clearScales();
        colorScale7(dsharpHarmonicMinorScale);
    };
    subDiv.append(dsharpButton);
    //-//
    let eButton = ce('button');
    eButton.textContent = 'E ';
    eButton.onclick = function()
    {
        clearScales();
        colorScale7(eHarmonicMinorScale);
    };
    subDiv.append(eButton);
    //-//
    let fButton = ce('button');
    fButton.textContent = 'F ';
    fButton.onclick = function()
    {
        clearScales();
        colorScale7(fHarmonicMinorScale);
    };
    subDiv.append(fButton);
    //-//
    let fsharpButton = ce('button');
    fsharpButton.textContent = 'F# ';
    fsharpButton.onclick = function()
    {
        clearScales();
        colorScale7(fsharpHarmonicMinorScale);
    };
    subDiv.append(fsharpButton);
    //-//
    let gButton = ce('button');
    gButton.textContent = 'G ';
    gButton.onclick = function()
    {
        clearScales();
        colorScale7(gHarmonicMinorScale);
    };
    subDiv.append(gButton);
    //-//
    let gsharpButton = ce('button');
    gsharpButton.textContent = 'G# ';
    gsharpButton.onclick = function()
    {
        clearScales();
        colorScale7(gsharpHarmonicMinorScale);
    };
    subDiv.append(gsharpButton);
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// menuMajorScales.js
function menuMajorScales()
{
    let theId = 'menuScales';
    //-//
    let mainDiv = ce("div");
    mainDiv.id = theId;
    mainDiv.style.position = "absolute";
    mainDiv.style.right = 100 +'px';
    mainDiv.style.top = 20 + 'px';
    mainDiv.style.width = 150 + 'px';
    mainDiv.style.height = '150px';
    mainDiv.style.zIndex = '3';
    mainDiv.style.overflowY = 'scroll';
    mainDiv.style.display = 'flex';
    mainDiv.style.flexDirection = 'column';
    mainDiv.style.resize = 'both';
    ba(mainDiv);
    makeElementDraggable(mainDiv);
    //-//
    let subDiv = ce('div');
    subDiv.textContent = 'Major';
    subDiv.style.color = 'rgb(255, 255, 255)';
    mainDiv.append(subDiv);
    //-//
    subDiv.append(ce('br'));
    //-//
    let aButton = ce('button');
    aButton.textContent = 'A';
    aButton.onclick = function()
    {
        clearScales();
        colorScale7(aMajorScale);
    };
    subDiv.append(aButton);
    //-//
    let asharpButton = ce('button');
    asharpButton.textContent = 'A# ';
    asharpButton.onclick = function()
    {
        clearScales();
        colorScale7(asharpMajorScale);
    };
    subDiv.append(asharpButton);
    //-//
    let bButton = ce('button');
    bButton.textContent = 'B ';
    bButton.onclick = function()
    {
        clearScales();
        colorScale7(bMajorScale);
    };
    subDiv.append(bButton);
    //-//
    let cButton = ce('button');
    cButton.textContent = 'C ';
    cButton.onclick = function()
    {
        clearScales();
        colorScale7(cMajorScale);
    };
    subDiv.append(cButton);
    //-//
    let csharpButton = ce('button');
    csharpButton.textContent = 'C# ';
    csharpButton.onclick = function()
    {
        clearScales();
        colorScale7(csharpMajorScale);
    };
    subDiv.append(csharpButton);
    //-//
    let dButton = ce('button');
    dButton.textContent = 'D';
    dButton.onclick = function()
    {
        clearScales();
        colorScale7(dMajorScale);
    };
    subDiv.append(dButton);
    //-//
    let dsharpButton = ce('button');
    dsharpButton.textContent = 'D#';
    dsharpButton.onclick = function()
    {
        clearScales();
        colorScale7(dsharpMajorScale);
    };
    subDiv.append(dsharpButton);
    //-//
    let eButton = ce('button');
    eButton.textContent = 'E ';
    eButton.onclick = function()
    {
        clearScales();
        colorScale7(eMajorScale);
    };
    subDiv.append(eButton);
    //-//
    let fButton = ce('button');
    fButton.textContent = 'F ';
    fButton.onclick = function()
    {
        clearScales();
        colorScale7(fMajorScale);
    };
    subDiv.append(fButton);
    //-//
    let fsharpButton = ce('button');
    fsharpButton.textContent = 'F# ';
    fsharpButton.onclick = function()
    {
        clearScales();
        colorScale7(fsharpMajorScale);
    };
    subDiv.append(fsharpButton);
    //-//
    let gButton = ce('button');
    gButton.textContent = 'G ';
    gButton.onclick = function()
    {
        clearScales();
        colorScale7(gMajorScale);
    };
    subDiv.append(gButton);
    //-//
    let gsharpButton = ce('button');
    gsharpButton.textContent = 'G# ';
    gsharpButton.onclick = function()
    {
        clearScales();
        colorScale7(gsharpMajorScale);
    };
    subDiv.append(gsharpButton);
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// whichKeyPressed.js
function clickColor(whichId)
{
    ge(whichId).click();
    ge(whichId).style.borderColor = highlight;
    setTimeout(function()
    {
        ge(whichId).style.borderColor = sharp;
    }, 500);
}
let controlFlag = 1;
function whichKeyPressed(event)
{
    let level1 = 1;
    let level2 = 2;
    let level3 = 3;
    let level4 = 4;
    if (controlFlag == 1)
    {
        level1 = 1;
        level2 = 2;
        level3 = 3;
        level4 = 4;
    }
    else if (controlFlag == 2)
    {
        level1 = 4;
        level2 = 5;
        level3 = 6;
        level4 = 7;
    }
    /*
    else if(controlFlag == 3)
    {
        level1 = 3;
        level2 = 4;
        level3 = 5;
        level4 = 6;
    }
    else if(controlFlag == 4)
    {
        level1 = 4;
        level2 = 5;
        level3 = 6;
        level4 = 7;
    }
    else if(controlFlag == 5)
    {
        level1 = 5;
        level2 = 6;
        level3 = 7;
        level4 = 8;
    }
    */
    event.preventDefault();
    if (event.code === 'ShiftLeft')
    {
        clickColor('c' + level1);
    }
    else if (event.code === 'KeyZ')
    {
        clickColor('csharp' + level1);
    }
    else if (event.code === 'KeyX')
    {
        clickColor('d' + level1);
    }
    else if (event.code === 'KeyC')
    {
        clickColor('dsharp' + level1);
    }
    else if (event.code === 'KeyV')
    {
        clickColor('e' + level1);
    }
    else if (event.code === 'KeyB')
    {
        clickColor('f' + level1);
    }
    else if (event.code === 'KeyN')
    {
        clickColor('fsharp' + level1);
    }
    else if (event.code === 'KeyM')
    {
        clickColor('g' + level1);
    }
    else if (event.code === 'Comma')
    {
        clickColor('gsharp' + level1);
    }
    else if (event.code === 'Period') // slash
    {
        clickColor('a' + level1);
    }
    else if (event.code === 'Slash') // slash
    {
        clickColor('asharp' + level1);
    }
    else if (event.code === 'ShiftRight')
    {
        clickColor('b' + level1);
    }
    //-//
    else if (event.code === 'CapsLock')
    {
        clickColor('c' + level2);
    }
    else if (event.code === 'KeyA')
    {
        clickColor('csharp' + level2);
    }
    else if (event.code === 'KeyS')
    {
        clickColor('d' + level2);
    }
    else if (event.code === 'KeyD')
    {
        clickColor('dsharp' + level2);
    }
    else if (event.code === 'KeyF')
    {
        clickColor('e' + level2);
    }
    else if (event.code === 'KeyG')
    {
        clickColor('f' + level2);
    }
    else if (event.code === 'KeyH')
    {
        clickColor('fsharp' + level2);
    }
    else if (event.code === 'KeyJ')
    {
        clickColor('g' + level2);
    }
    else if (event.code === 'KeyK')
    {
        clickColor('gsharp' + level2);
    }
    else if (event.code === 'KeyL')
    {
        clickColor('a' + level2);
    }
    else if (event.code === 'Semicolon')
    {
        clickColor('asharp' + level2);
    }
    else if (event.code === 'Quote')
    {
        clickColor('b' + level2);
    }
    //-//
    else if (event.code === 'Tab')
    {
        clickColor('c' + level3);
    }
    else if (event.code === 'KeyQ')
    {
        clickColor('csharp' + level3);
    }
    else if (event.code === 'KeyW')
    {
        clickColor('d' + level3);
    }
    else if (event.code === 'KeyE')
    {
        clickColor('dsharp' + level3);
    }
    else if (event.code === 'KeyR')
    {
        clickColor('e' + level3);
    }
    else if (event.code === 'KeyT')
    {
        clickColor('f' + level3);
    }
    else if (event.code === 'KeyY')
    {
        clickColor('fsharp' + level3);
    }
    else if (event.code === 'KeyU')
    {
        clickColor('g' + level3);
    }
    else if (event.code === 'KeyI')
    {
        clickColor('gsharp' + level3);
    }
    else if (event.code === 'KeyO')
    {
        clickColor('a' + level3);
    }
    else if (event.code === 'KeyP')
    {
        clickColor('asharp' + level3);
    }
    else if (event.code === 'BracketLeft')
    {
        clickColor('b' + level3);
    }
    //-//
    else if (event.code === 'Backquote') // ~
    {
        clickColor('c' + level4);
    }
    else if (event.code === 'Digit1')
    {
        clickColor('csharp' + level4);
    }
    else if (event.code === 'Digit2')
    {
        clickColor('d' + level4);
    }
    else if (event.code === 'Digit3')
    {
        clickColor('dsharp' + level4);
    }
    else if (event.code === 'Digit4')
    {
        clickColor('e' + level4);
    }
    else if (event.code === 'Digit5')
    {
        clickColor('f' + level4);
    }
    else if (event.code === 'Digit6')
    {
        clickColor('fsharp' + level4);
    }
    else if (event.code === 'Digit7')
    {
        clickColor('g' + level4);
    }
    else if (event.code === 'Digit8')
    {
        clickColor('gsharp' + level4);
    }
    else if (event.code === 'Digit9')
    {
        clickColor('a' + level4);
    }
    else if (event.code === 'Digit0')
    {
        clickColor('asharp' + level4);
    }
    else if (event.code === 'Minus')
    {
        clickColor('b' + level4);
    }
    //-//
    else if (event.code === 'ArrowUp')
    {
        if (controlFlag < 2)
        {
            controlFlag += 1;
        }
    }
    else if (event.code === 'ArrowDown')
    {
        if (controlFlag > 1)
        {
            controlFlag -= 1;
        }
    }
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// clearScales.js
function clearScales()
{
    color('c1', natural);
    color('csharp1', sharp);
    color('d1', natural);
    color('dsharp1', sharp);
    color('e1', natural);
    color('f1', natural);
    color('fsharp1', sharp);
    color('g1', natural);
    color('gsharp1', sharp);
    color('a1', natural);
    color('asharp1', sharp);
    color('b1', natural);
    //-//
    color('c2', natural);
    color('csharp2', sharp);
    color('d2', natural);
    color('dsharp2', sharp);
    color('e2', natural);
    color('f2', natural);
    color('fsharp2', sharp);
    color('g2', natural);
    color('gsharp2', sharp);
    color('a2', natural);
    color('asharp2', sharp);
    color('b2', natural);
    //-//
    color('c3', natural);
    color('csharp3', sharp);
    color('d3', natural);
    color('dsharp3', sharp);
    color('e3', natural);
    color('f3', natural);
    color('fsharp3', sharp);
    color('g3', natural);
    color('gsharp3', sharp);
    color('a3', natural);
    color('asharp3', sharp);
    color('b3', natural);
    //-//
    color('c4', natural);
    color('csharp4', sharp);
    color('d4', natural);
    color('dsharp4', sharp);
    color('e4', natural);
    color('f4', natural);
    color('fsharp4', sharp);
    color('g4', natural);
    color('gsharp4', sharp);
    color('a4', natural);
    color('asharp4', sharp);
    color('b4', natural);
    //-//
    color('c5', natural);
    color('csharp5', sharp);
    color('d5', natural);
    color('dsharp5', sharp);
    color('e5', natural);
    color('f5', natural);
    color('fsharp5', sharp);
    color('g5', natural);
    color('gsharp5', sharp);
    color('a5',natural);
    color('asharp5', sharp);
    color('b5', natural);
    //-//
    color('c6', natural);
    color('csharp6', sharp);
    color('d6', natural);
    color('dsharp6', sharp);
    color('e6', natural);
    color('f6', natural);
    color('fsharp6', sharp);
    color('g6', natural);
    color('gsharp6', sharp);
    color('a6', natural);
    color('asharp6', sharp);
    color('b6', natural);
    //-//
    color('c7', natural);
    color('csharp7', sharp);
    color('d7', natural);
    color('dsharp7', sharp);
    color('e7', natural);
    color('f7', natural);
    color('fsharp7', sharp);
    color('g7', natural);
    color('gsharp7', sharp);
    color('a7', natural);
    color('asharp7', sharp);
    color('b7', natural);
    //-//
    color('c8', natural);
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// color.js
function color(whichId, whichColor)
{
    let element = ge(whichId);
    if (element)
    {
        element.style.backgroundColor = whichColor;
    }
    else
    {
        console.log("Element with id " + whichId + " not found.");
    }
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// colorScale7.js
function colorScale7(whichArray)
{
    color(whichArray[0] + 1, highlight);
    color(whichArray[1] + 1, highlight);
    color(whichArray[2] + 1, highlight);
    color(whichArray[3] + 1, highlight);
    color(whichArray[4] + 1, highlight);
    color(whichArray[5] + 1, highlight);
    color(whichArray[6] + 1, highlight);
    //-//
    color(whichArray[0] + 2, highlight);
    color(whichArray[1] + 2, highlight);
    color(whichArray[2] + 2, highlight);
    color(whichArray[3] + 2, highlight);
    color(whichArray[4] + 2, highlight);
    color(whichArray[5] + 2, highlight);
    color(whichArray[6] + 2, highlight);
    //-//
    color(whichArray[0] + 3, highlight);
    color(whichArray[1] + 3, highlight);
    color(whichArray[2] + 3, highlight);
    color(whichArray[3] + 3, highlight);
    color(whichArray[4] + 3, highlight);
    color(whichArray[5] + 3, highlight);
    color(whichArray[6] + 3, highlight);
    //-//
    color(whichArray[0] + 4, highlight);
    color(whichArray[1] + 4, highlight);
    color(whichArray[2] + 4, highlight);
    color(whichArray[3] + 4, highlight);
    color(whichArray[4] + 4, highlight);
    color(whichArray[5] + 4, highlight);
    color(whichArray[6] + 4, highlight);
    //-//
    color(whichArray[0] + 5, highlight);
    color(whichArray[1] + 5, highlight);
    color(whichArray[2] + 5, highlight);
    color(whichArray[3] + 5, highlight);
    color(whichArray[4] + 5, highlight);
    color(whichArray[5] + 5, highlight);
    color(whichArray[6] + 5, highlight);
    //-//
    color(whichArray[0] + 6, highlight);
    color(whichArray[1] + 6, highlight);
    color(whichArray[2] + 6, highlight);
    color(whichArray[3] + 6, highlight);
    color(whichArray[4] + 6, highlight);
    color(whichArray[5] + 6, highlight);
    color(whichArray[6] + 6, highlight);
    //-//
    color(whichArray[0] + 7, highlight);
    color(whichArray[1] + 7, highlight);
    color(whichArray[2] + 7, highlight);
    color(whichArray[3] + 7, highlight);
    color(whichArray[4] + 7, highlight);
    color(whichArray[5] + 7, highlight);
    color(whichArray[6] + 7, highlight);
    //-//
    color(whichArray[0] + 8, highlight);
    color(whichArray[1] + 8, highlight);
    color(whichArray[2] + 8, highlight);
    color(whichArray[3] + 8, highlight);
    color(whichArray[4] + 8, highlight);
    color(whichArray[5] + 8, highlight);
    color(whichArray[6] + 8, highlight);
}
/*
function colorScale7(whichArray)
{
    for (let i = 0; i < whichArray.length; i++) {
        for (let j = 1; j <= 8; j++)
        {
            let idToColor = whichArray[i] + j;
            color(idToColor, highlight);
        }
    }
}
*/
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// colorScale8.js
function colorScale8(whichArray)
{
    color(whichArray[0] + 1, highlight);
    color(whichArray[1] + 1, highlight);
    color(whichArray[2] + 1, highlight);
    color(whichArray[3] + 1, highlight);
    color(whichArray[4] + 1, highlight);
    color(whichArray[5] + 1, highlight);
    color(whichArray[6] + 1, highlight);
    color(whichArray[7] + 1, highlight);
    //-//
    color(whichArray[0] + 2, highlight);
    color(whichArray[1] + 2, highlight);
    color(whichArray[2] + 2, highlight);
    color(whichArray[3] + 2, highlight);
    color(whichArray[4] + 2, highlight);
    color(whichArray[5] + 2, highlight);
    color(whichArray[6] + 2, highlight);
    color(whichArray[7] + 2, highlight);
    //-//
    color(whichArray[0] + 3, highlight);
    color(whichArray[1] + 3, highlight);
    color(whichArray[2] + 3, highlight);
    color(whichArray[3] + 3, highlight);
    color(whichArray[4] + 3, highlight);
    color(whichArray[5] + 3, highlight);
    color(whichArray[6] + 3, highlight);
    color(whichArray[7] + 3, highlight);
    //-//
    color(whichArray[0] + 4, highlight);
    color(whichArray[1] + 4, highlight);
    color(whichArray[2] + 4, highlight);
    color(whichArray[3] + 4, highlight);
    color(whichArray[4] + 4, highlight);
    color(whichArray[5] + 4, highlight);
    color(whichArray[6] + 4, highlight);
    color(whichArray[7] + 4, highlight);
    //-//
    color(whichArray[0] + 5, highlight);
    color(whichArray[1] + 5, highlight);
    color(whichArray[2] + 5, highlight);
    color(whichArray[3] + 5, highlight);
    color(whichArray[4] + 5, highlight);
    color(whichArray[5] + 5, highlight);
    color(whichArray[6] + 5, highlight);
    color(whichArray[7] + 5, highlight);
    //-//
    color(whichArray[0] + 6, highlight);
    color(whichArray[1] + 6, highlight);
    color(whichArray[2] + 6, highlight);
    color(whichArray[3] + 6, highlight);
    color(whichArray[4] + 6, highlight);
    color(whichArray[5] + 6, highlight);
    color(whichArray[6] + 6, highlight);
    color(whichArray[7] + 6, highlight);
    //-//
    color(whichArray[0] + 7, highlight);
    color(whichArray[1] + 7, highlight);
    color(whichArray[2] + 7, highlight);
    color(whichArray[3] + 7, highlight);
    color(whichArray[4] + 7, highlight);
    color(whichArray[5] + 7, highlight);
    color(whichArray[6] + 7, highlight);
    color(whichArray[7] + 7, highlight);
    color(whichArray[0] + 8, highlight);
    color(whichArray[1] + 8, highlight);
    color(whichArray[2] + 8, highlight);
    color(whichArray[3] + 8, highlight);
    color(whichArray[4] + 8, highlight);
    color(whichArray[5] + 8, highlight);
    color(whichArray[6] + 8, highlight);
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// harmonicMinorScale.js
let aHarmonicMinorScale = [ "a", "b", "c", "d", "e", "f", "gsharp" ];
let asharpHarmonicMinorScale = [ "asharp", "c", "csharp", "dsharp", "f", "fsharp", "a" ];
let bHarmonicMinorScale = [ "b", "csharp", "d", "e", "fsharp", "g", "asharp" ];
let cHarmonicMinorScale = [ "c", "d", "dsharp", "f", "g", "gsharp", "b" ];
let csharpHarmonicMinorScale = [ "csharp", "dsharp", "e", "fsharp", "gsharp", "a", "c" ];
let dHarmonicMinorScale = [ "d", "e", "f", "g", "a", "asharp", "csharp" ];
let dsharpHarmonicMinorScale = [ "dsharp", "f", "fsharp", "gsharp", "asharp", "b", "d" ];
let eHarmonicMinorScale = [ "e", "fsharp", "g", "a", "b", "c", "dsharp" ];
let fHarmonicMinorScale = [ "f", "g", "gsharp", "asharp", "c", "csharp", "e" ];
let fsharpHarmonicMinorScale = [ "fsharp", "gsharp", "a", "b", "csharp", "d", "f" ];
let gHarmonicMinorScale = [ "g", "a", "asharp", "c", "d", "dsharp", "fsharp" ];
let gsharpHarmonicMinorScale = [ "gsharp", "asharp", "b", "csharp", "dsharp", "e", "g" ];
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// majorScale.js
let aMajorScale = [ "a", "b", "csharp", "d", "e", "fsharp", "gsharp" ];
let asharpMajorScale = ["asharp", "c", "csharp", "dsharp", "f", "fsharp", "gsharp"];
let bMajorScale = [ "b", "csharp", "dsharp", "e", "fsharp", "gsharp", "asharp" ];
let cMajorScale = [ "c", "d", "e", "f", "g", "a", "b" ];
let csharpMajorScale = [ "csharp", "dsharp", "e", "fsharp", "gsharp", "asharp", "b" ];
let dMajorScale = [ "d", "e", "fsharp", "g", "a", "b", "csharp" ];
let dsharpMajorScale = [ "dsharp", "f", "fsharp", "gsharp", "asharp", "c", "csharp" ];
let eMajorScale = [ "e", "fsharp", "gsharp", "a", "b", "csharp", "dsharp" ];
let fMajorScale = [ "f", "g", "a", "asharp", "c", "d", "e" ];
let fsharpMajorScale = [ "fsharp", "gsharp", "asharp", "b", "csharp", "dsharp", "f" ];
let gMajorScale = [ "g", "a", "b", "c", "d", "e", "fsharp" ];
let gsharpMajorScale = [ "gsharp", "asharp", "b", "csharp", "dsharp", "f", "fsharp" ];
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// audioPlay.js
function audioPlay(noteId, volume)
{
    let audioElement = ge(noteId);
    if (audioElement)
    {
        audioElement.volume = volume;
        audioElement.currentTime = 0.05;
        audioElement.play();
    }
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// loadSounds.js
function loadSounds(whichArray)
{
    for (let x = 0; x < whichArray.length; x++)
    {
        let theSound = ce('audio');
        if (online == false)
        {
            theSound.src = whichArray[x].soundFileOffline;
        }
        else
        {
            theSound.src = whichArray[x].soundFileOnline;
        }
        theSound.id = whichArray[x].name + '_note';
        theSound.loop = false;
        theSound.volume = 1.0;
        ba(theSound);
    }
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// sounds.js
let sounds =
[
    {
        name: 'sfx_blip_001',
        soundFileOffline: 'src/media/sounds/sfx_blip_001.mp4',
        soundFileOnline: 'https://collegeofscripting.weebly.com/uploads/6/4/4/8/64482293/sfx_blip_001.mp4'
    },
    {
        name: 'sfx_warp_001',
        soundFileOffline: 'src/media/sounds/sfx_warp_001.mp3',
        soundFileOnline: 'https://collegeofscripting.weebly.com/uploads/6/4/4/8/64482293/sfx_warp_001.mp3'
    },
];
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// makeElementDraggable.js
// creating event handler for mouse down
function createMouseDownHandler(element, state) {
    return function(e)
    {
        // ignore mouse down events on textarea or input elements
        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT')
        {
            return;
        }
        e.preventDefault();
        state.startX = e.clientX;
        state.startY = e.clientY;
        document.onmousemove = createMouseMoveHandler(element, state);
        document.onmouseup = createMouseUpHandler();
    };
}
// creating event handler for mouse move
function createMouseMoveHandler(element, state) {
    return function(e)
    {
        // ignore mouse move events on textarea or input elements
        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT')
        {
            return;
        }
        e.preventDefault();
        let deltaX = state.startX - e.clientX;
        let deltaY = state.startY - e.clientY;
        state.startX = e.clientX;
        state.startY = e.clientY;
        let newTop = element.offsetTop - deltaY;
        let newLeft = element.offsetLeft - deltaX;
        element.style.top = newTop + "px";
        element.style.left = newLeft + "px";
    };
}
// creating event handler for mouse up
function createMouseUpHandler()
{
    return function()
    {
        document.onmousemove = null;
        document.onmouseup = null;
    };
}
// make an element draggable
function makeElementDraggable(element)
{
    let state = { startX: 0, startY: 0 };
    element.onmousedown = createMouseDownHandler(element, state);
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
// whenLoaded.js
function whenLoaded()
{
    loadSounds(sounds);
    loadSounds(notes);
    window.addEventListener("keydown", whichKeyPressed, false);
    makeTitleOfApp();
    menuMajorScales();
    menuHarmonicMinorScales();
    makeNotes('octave8', notes, 20, 340, 8);
    makeNotes('octave7', notes, 20, 340, 7);
    makeNotes('octave6', notes, 20, 340, 6);
    makeNotes('octave5', notes, 20, 340, 5);
    makeNotes('octave4', notes, 20, 340, 4);
    makeNotes('octave3', notes, 20, 340, 3);
    makeNotes('octave2', notes, 20, 340, 2);
    makeNotes('octave1', notes, 20, 340, 1);
}
//--//
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
// https://github.com/ChristopherAndrewTopalian
</script>
</head>
<body onload = 'whenLoaded();'>
</body>
</html>
Page updated
Google Sites
Report abuse