【在线应用开发】音乐类在线应用的设计和开发 Music Keyboard 1.0

上学期音乐类在线应用的设计和开发结业时制作了Music Keyboard 1.0在线应用界面，可直接用CodePen在线编程网站进行修改和试运行：https://codepen.io/your-work

Music Keyboard 1.0
钢琴键盘波形发声器：
该界面制作的是一个根据钢琴键盘控制频率的波形发声器，通过点击Waveform可选择发声波形（锯齿波/正弦波/三角波/方波），每个振荡器可以分别调整，开关，频率和音量三个参数。实现通过钢琴键盘发出相对应的声音频率，且可控制转换波形与滑动频率的基本功能。

如需查看本产品效果可直接网页跳转：
https://codepen.io/ZhaoYuqian/pen/oNzoOoo

现将相关代码附上——

下面展示一些 内联代码块。

Music Keyboard 1.0

        </div>
        <div class="osc-controls">
            <form>
                <input id="on-off" type="button" value="start">
                <span>Click to start oscillator</span>
                <p>Use slider to modify frequency</p>
                <input type="range">
            </form>
            <div id="keyboard">
                <ul>
                    <li class="keyboard keyboard-white" id="262">

                    </li>
                    <li class="keyboard keyboard-black" id="277">
                    </li>
                    <li class="keyboard keyboard-white" id="294">
                    </li>
                    <li class="keyboard keyboard-black" id="311">
                    </li>
                    <li class="keyboard keyboard-white" id="330">
                    </li>
                    <li class="keyboard keyboard-white" id="349">
                    </li>
                    <li class="keyboard keyboard-black" id="370">
                    </li>
                    <li class="keyboard keyboard-white" id="392">
                    </li>
                    <li class="keyboard keyboard-black" id="415">
                    </li>
                    <li class="keyboard keyboard-white" id="440">
                    </li>
                    <li class="keyboard keyboard-black" id="466">
                    </li>
                    <li class="keyboard keyboard-white" id="494">
                    </li>
                    <li class="keyboard keyboard-white" id="523">
                    </li>
                </ul>
            </div>
        </div>
        <div class="osc-controls">
            <h2>Waveform</h2>
            <ul id="oscillator-list">
                <li id="sawtooth">sawtooth</li>
                <li id="sine"> sine</li>
                <li id="triangle">triangle</li>
                <li id="square">square</li>
            </ul>
        </div>
        <div>
            <p>赵钰茜 MR201904 《音乐类在线应用的设计与开发》课程作业(274289869@qq.com)</p>
        </div>
    </div>

// CSS代码

 body {
            position: relative;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: url('https://img-blog.csdnimg.cn/20201228200829405.gif#pic_center') bottom center #efeff3;
            background-repeat: repeat-y;
            background-size: 100% 100%;
            text-align: center;
            letter-spacing: 2px;
            color: #fff
        }

        .application {
            width: 550px;
            margin: 0 auto;
        }

        p,
        span,
        li,
        input {
            font-size: 1.5em;
        }


        #sawtooth {
            background-color: #9999CC;
        }

        #sine {
            background-color: #6666CC;
        }

        #triangle {
            background-color: #333399;
        }

        #square {
            background-color: #330099;
        }


        .osc-controls {
            border-style: solid;
            border-color: #003366;
            border-width: 2px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        div {
            padding: 20px;
        }

        #oscillator-list li {
            /* Descendent selector */
            list-style-type: none;
            color: white;
        }

        #oscillator-list {
            padding-left: 0px;
        }

        .selected-waveform {
            outline: 2px solid white;
        }

        #keyboard {
            width: 50%;
            height: 200px;
            position: relative;
            text-align: center;
            margin-bottom: 20px;
            left: 25%;
        }

        #keyboard ul {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        #keyboard li {
            box-sizing: border-box;
            list-style: none;
        }

        .keyboard {
            transition: background-color .1s ease 0s;
        }

        .keyboard-white:active {
            background-color: #F0F0F0;
        }

        .keyboard-black:active {
            background-color: #ADADAD;
        }

        .keyboard-white {
            float: left;
            width: calc(100% / 8);
            height: 100%;
            background-color: #fff;
            border: 1px solid black;
        }

        .keyboard-black {
            height: 60%;