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" data-note="C#b" data-octave="1"></div>
        </div>
        
        <div class="key" id="natural" data-note="Db">
          <div class="key" id="sharp" data-note="D#b"></div>
        </div>
        
        <div class="key" id="natural" data-note="Eb"></div>
        
        <div class="key" id="natural" data-note="Fb">
          <div class="key" id="sharp" data-note="F#b"></div>
        </div>
        
        <div class="key" id="natural" data-note="Gb">
          <div class="key" id="sharp" data-note="G#b"></div>
        </div>
        
        <div class="key" id="natural" data-note="Ab">
          <div class="key" id="sharp"  data-note="A#b"></div>
        </div>
        
        <div class="key" id="natural" data-note="Bb"></div>
      <!--</div>-->
    </div> 
    
  </div>
</div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>

<script  >
    (function () {
  var root = this;
  var previousUnderscore = root._;
  var breaker = {};
  var ArrayProto = Array.prototype,
      ObjProto = Object.prototype,
      FuncProto = Function.prototype;
  
  var nativeForEach = ArrayProto.forEach;
  
  var _ = function (obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj
  };
  root._ = _;
  
  
  var each = _.each = _.forEach = function (obj, iterator, context) {
    
    if (nativeForEach && obj.forEach === nativeForEach) obj.forEach(iterator, context);
    else if (obj.length === +obj.length)
      for (var i = 0, l = obj.length; i < l; i++) {
        if (iterator.call(context, obj[i], i, obj) === breaker) return
          } else
            for (var key in obj)
              if (_.has(obj, key))
                if (iterator.call(context, obj[key], key, obj) === breaker) return
                  };
}).call();


PianoKeyboard = function (audioContext, noteOnCallback, noteSlideCallback, noteOffCallback) {
  _this = this;
 this.audioContext= new (window.AudioContext || window.webkitAudioContext)();


  this.noteOnCallback = noteOnCallback;
  this.noteSlideCallback = noteSlideCallback;
  this.noteOffCallback = noteOffCallback;
  this.audioReady = false;
  
  
  var oscOctave = document.querySelector("#osc-octave");
  this.octave = parseInt(oscOctave.value);
  this.octaveOffset = 0;
  
  
  
  
  this.heldNote = "";
  this.keyElements = document.querySelectorAll("#piano-keys .key");
  _.each(this.keyElements, function (keyElement) {
    keyElement.onmousedown = function (event) {
      event.preventDefault();
      _this.noteOn(event.target.dataset["note"] +
                   (_this.octave ), event.target)
    };
    keyElement.onmouseup = function (event) {
      event.preventDefault();
      _this.noteOff()
    };
    keyElement.onmousemove = function (event) {
      event.preventDefault();
      if (_this.heldNote != "") {
        var element = document.elementFromPoint(event.x, event.y);
        if (element.dataset["note"]) {
          var note = element.dataset["note"] + _this.octave;
          if (note != _this.heldNote) _this.noteOn(note, element)
            } else _this.noteOff()
              }
    };
    keyElement.ontouchstart = function (event) {
      event.preventDefault();
      if (!this.audioReady) {
        this.audioReady = true;
        var osc =
            audioContext.createOscillator();
        osc.connect(_this.audioContext.destination);
        osc.noteOn(0);
        osc.disconnect(0)
      }
      _this.noteOn(event.target.dataset["note"] + _this.octave, event.target)
    };
    keyElement.ontouchmove = function (event) {
      event..........完整代码请登录后点击上方下载按钮下载查看