js+css实现支持Synthesizer调节浏览器可弹奏并输出声音的钢琴代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js+css实现支持Synthesizer调节浏览器可弹奏并输出声音的钢琴代码，通过webkitAudioContext这个api来输出声音。

代码标签： js css 支持 Synthesizer 调节浏览器弹奏输出声音钢琴代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">


<style>
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,300italic,400italic,500,500italic,700,700italic,900,900italic,100italic);
* {
  -webkit-appearance: none;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: #333;
  font-family: "Roboto", sans-serif;
}

h1 {
  font-size: 3em;
  line-height: 0.8em;
  font-weight: 100;
}

input:focus {
  outline: none;
}

.container {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 0px;
  color: #fff;
  text-align: center;
}

.container .parts {
  text-align: left;
  padding: 20px;
}

.synth {
  width: 1010px;
  height: 450px;
  padding: 0px;
  margin: 0px;
  background-color: #ED5565;
  font-weight: 300;
  display: inline-block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: 6px 10px 3px -4px #2f090d;
}

.synth .touch-move-scroll-blocker {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  position: absolute;
}

.synth .modules {
  margin-left: 27px;
  margin-top: 40px;
}

.synth .modules .module {
  float: left;
  text-transform: uppercase;
  height: 100%;
  margin: auto;
}

.synth .modules .module .module-label {
  float: left;
  clear: both;
  width: 100%;
  font-weight: 600;
  color: #FFF;
  padding: 3px 0;
  text-align: center;
  font-size: 12px;
}

.synth .modules .module .slider {
  padding: 10px 30px 0 0;
  float: left;
  height: 100%;
  text-align: center;
  position: relative;
}

.synth .modules .module .slider .label {
  position: absolute;
  width: 100px;
  top: 200px;
  font-size: 10px;
  color: #fceef0;
  text-transform: uppercase;
}

.synth .modules .module .slider input[type="range"] {
  background-color: #af2331;
  -webkit-appearance: none;
  -webkit-transform: rotate(270deg);
  width: 180px;
  margin: 80px -100px 0px -40px;
  border-radius: 25px;
}

.synth .modules .module .slider input[type='range']::-webkit-slider-thumb {
  height: 20px;
  width: 50px;
  border: 1px solid #ddd;
  background-color: #ffeac8;
}

#piano-keys {
  width: 1000px;
  height: 180px;
  margin-left: 60px;
  margin-top: 275px;
}

#piano-keys .key {
  display: inline-block;
  width: 6%;
  height: 100%;
  float: left;
  position: relative;
  margin-right: 4px;
  background-color: #fff;
  -webkit-transition: background-color ease-out .25s;
  border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 0px 2px;
  -webkit-border-radius: 0px 0px 10px 10px;
}

#piano-keys #sharp {
  background-color: #6f161f;
  height: 66.6%;
  width: 66.6%;
  margin-right: 50%;
  position: absolute;
  left: 66.6%;
  z-index: 100;
  -webkit-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 0px 0px 10px 10px;
}

/*#piano-keys .key.held {
  background-color: $color4;
  height: 96%; 
}*/
#natural:hover {
  background-color: #de5967;
  height: 99%;
}

#piano-keys #sharp:hover {
  background-color: #9a1e2b;
}

input[type=range] {
  -webkit-appearance: none;
  background-color: LightGray;
  height: 10px;
  width: 200px;
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: gray;
  width: 50px;
  height: 20px;
  border-radius: 3px;
}

input:focus {
  outline: none;
}
</style>
</head>
<body>

<div class="container">
  <h1>Synth</h1>
 
  <div class="synth">
    
    <div class="touch-move-scroll-blocker"></div>
    
    <div class="modules">
      
      <div class="module osc">
        <div class="slider waveform">
          <span class="label">Osc</span>
          <input type="range" id="osc-shape" min="0" max="3" step="1" value="4" />                    
        </div>
      </div>
      
      
      <div class="module lpf">
        <div class="slider">
          <span class="label">Freq</span>
          <input type="range" id="lpf-freq" min="0" max="1" step=".05" value=".7" />
        </div>
        
        
        <div class="slider">
          <span class="label">Resolution</span>
          <input type="range" id="lpf-res" min="0" max="1" step=".01" value=".4" />
        </div>
        
      </div>
      
      <div class="module env">
        
        <div class="slider">
          <span class="label">Attack</span>
          <input type="range" id="env-attack" min="0.0" max="3.0" step=".01" value="0.2" />
        </div>
        
        <div class="slider">
          <span class="label">Decay</span>
          <input type="range" id="env-decay" min="0.0" max="3.0" step=".01" value="3.0" />
        </div>
        
        <div class="slider">
          <span class="label">Sustain</span>
          <input type="range" id="env-sustain" min="0.0" max="1.0" step=".01" value="1.0" />
        </div>
        
        <div class="slider">
          <span class="label">Release</span>
          <input type="range" id="env-release" min="0.0" max="3.0" step=".01" value="1.0" />
        </div>
        
        <div class="slider">
          <span class="label">Octave</span>
          <input type="range" id="osc-octave" min="0" max="6" step="1" value="3" />
        </div>
        
        <div class="slider">
          <span class="label">Glide</span>
          <input type="range" id="osc-portamento" min="0" max="1" step="0.1" value="1" />
        </div>
        
      </div>              
      
    </div>
    
    
    <div id="piano-keys">
      
      <!--OCTAVE 1--> 
      <!--<div class="octave1">-->
        <div class="key" id="natural" data-note="C" data-octaveSet="0">
          <div class="key" id="sharp" data-note="C#" data-octaveSet="0"></div>
        </div>
       
        <div class="key" id="natural" data-note="D">
          <div class="key" id="sharp" data-note="D#"></div>
        </div>
        
        <div class="key" id="natural" data-note="E"></div>
        
        <div class="key" id="natural" data-note="F">
          <div class="key" id="sharp" data-note="F#"></div>
        </div>
        
        <div class="key" id="natural" data-note="G">
          <div class="key" id="sharp" data-note="G#"></div>
        </div>
        
        <div class="key" id="natural" data-note="A">
          <div class="key" id="sharp"  data-note="A#"></div>
          
        </div>
        <div class="key" id="natural" data-note="B"></div>
      <!--</div>-->
      
      <!--OCTAVE 2-->
      <!--<div class="octave2">-->
        <div class="key" id="natural" data-note="Cb" data-octave="1">
          <div class="key" id="sharp".........完整代码请登录后点击上方下载按钮下载查看