上学期音乐类在线应用的设计和开发结业时制作了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%;
position: absolute;
top: 0;
width: calc(100% / 12);
backgrou