Web Audio Test

by amindunited

HTML

<button id="initButton">Init</button>
<button id="startButton">Start</button>
<button id="stopButton">Stop</button>
<div class="keyboardWrap"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.4/jquery.gridster.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.js"></script>
<!--
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.8/ember-data.min.js"></script>
-->

CSS

.keyboardWrap {
    overflow-x: scroll;
    height: 102px;
}
.key {
    background-color: #cdcdcd;
    border: solid 1px black;
    float: left;
    width: 20px;
    height: 100px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: rgb(237,237,237); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,237,237,1)), color-stop(53%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}
.key.black {
   background-color: #333333;
    position: relative;
    margin-left: -10px;
    margin-right: -10px;
    height: 70px;
    width: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
background: rgb(149,149,149); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(149,149,149,1) 0%, rgba(13,13,13,1) 20%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 79%, rgba(78,78,78,1) 94%, rgba(56,56,56,1) 97%, rgba(27,27,27,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(149,149,149,1)), color-stop(20%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(79%,rgba(10,10,10,1)), color-stop(94%,rgba(78,78,78,1)),...

JavaScript

var numKeys = 88;

var webAudioContext;
var mySynth = null;
//window.addEventListener('load', init, false);
var frequency = function(noteNumber){
    // the frequency of the noteNumber 
    // (2 * ( (n-49) / 12 ) ) * 440;
    //freq = (2  ( (noteNumber - 49) / 12 ) ) * 440;
    //freq = Math.pow(2, ( (noteNumber - 49) / 12 )) * 400;
    var n = noteNumber - 49;
    console.log("in frequency .... noteNumber", n / 12);
    freq = Math.pow(2, n/12) * 440;
    console.log('freq', freq, "should be 440");
    return freq;
    
};

var synth = (function(){
    
    this.oscillator = null;
    this.gainNode = null;//webAudioContext.createGainNode();
    
    this.stopSound = function(event) {
        console.log('stop');
        this.oscillator.stop(0);
    };
    this.playNote = function(noteNum){
        console.log('mirster osc', this.oscillator);
        console.log("noteNum", noteNum);
        //this.oscillator.stop(0);
        this.oscillator.frequency.value = frequency(noteNum);
        
console.log("....",        this.oscillator.frequency.value);
        //this.oscillator.start(0);
    };
    this.startSound = function(event) {
        console.log('start');
        
        this.oscillator = webAudioContext.createOscillator();

        this.gainNode = webAudioContext.createGain();
        console.log('.....');        
        this.gainNode.connect(webAudioContext.destination);
        
        this.oscillator.connect(this.gainNode);
        this.oscillator.type = 'triangle';
        
        this.oscillator.frequency.value = frequency(40);
        
        this.gainNode.gain.value = 1;//volumeValue;
        
        this.oscillator.start(0);
    };

    return this;
});

function web_audio_init() {

    try {
        // Fix up for prefixing
        window.AudioContext = window.AudioContext||window.webkitAudioContext;
        webAudioContext = new AudioContext();
    }
    catch(e) {
        alert('Web Audio API is not supported in this browser');
    }
   ...