diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..9de6489
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Jos Dirksen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/webaudio-filters/index.html b/webaudio-filters/index.html
index 21d6184..83f18af 100644
--- a/webaudio-filters/index.html
+++ b/webaudio-filters/index.html
@@ -31,26 +31,17 @@ <h1 class="pagination-centered">Web audio: Filter Playground</h1>
 
     <div class="row">
         <div class="alert alert-info">
-            <p>
             On this page you can experiment with the filters provided by the
             <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio</a>
-            specifications. To run this you need a current build of chrome to work. If you want to
-            allow microphone input, make sure you use headphones for output, and you have to enable
-            the "Web Audio Input" flag in chrome://flags. For more information on how to get started
+            specifications. To run this you need a current build of chrome, firefox or safatir to work. If you want to
+            allow microphone input, make sure you use headphones for output. For more information on how to get started
             with Web Audio and how this works, look at this
             <a href="http://www.smartjava.org/content/exploring-html5-web-audio-api-filters">article</a>
-            on <a href="http://www.smartjava.org">http://www.smartjava.org</a> or contact me on twitter:
+            on <a href="http://www.smartjava.org">http://www.smartjava.org</a> or contact me on twitter: <br>
             <a href="https://twitter.com/josdirksen" class="twitter-follow-button" data-show-count="false">Follow @josdirksen</a>
             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
             <a href="https://twitter.com/intent/tweet?screen_name=josdirksen" class="twitter-mention-button" data-related="josdirksen">Tweet to @josdirksen</a>
             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-            <a href="https://twitter.com/share" class="twitter-share-button" data-via="josdirksen" data-related="josdirksen" data-count="none">Tweet</a>
-            </p>
-            <p>
-
-
-            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-            </p>
         </div>
     </div>
 
@@ -67,7 +58,7 @@ <h3>1. Enable inputs:</h3>
                             <a class="btn btn-primary" id="music-start" href="#"><i id="music-start-icon"
                                                                                     class="icon-play icon-white"></i></a>
                             <a class="btn btn-primary disabled" id="music-stop" href="#"><i id="music-stop-icon"
-                                                                                  class="icon-stop icon-white"></i></a>
+                                                                                            class="icon-stop icon-white"></i></a>
                         </div>
                     </div>
                 </div>
@@ -80,7 +71,7 @@ <h3>1. Enable inputs:</h3>
                             <a class="btn btn-primary" id="mic-start" href="#"><i id="mic-start-icon"
                                                                                   class="icon-play icon-white"></i></a>
                             <a class="btn btn-primary disabled" id="mic-stop" href="#"><i id="mic-stop-icon"
-                                                                                class="icon-stop icon-white"></i></a>
+                                                                                          class="icon-stop icon-white"></i></a>
                         </div>
                     </div>
                 </div>
@@ -93,19 +84,6 @@ <h3>1. Enable inputs:</h3>
                             <a class="btn btn-primary" id="sq-start" href="#"><i id="sq-start-icon"
                                                                                  class="icon-play icon-white"></i></a>
                             <a class="btn btn-primary disabled" id="sq-stop" href="#"><i id="sq-stop-icon"
-                                                                               class="icon-stop icon-white"></i></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="span1"><span>Speech:</span></div>
-                <div class="span2">
-                    <div class="btn-toolbar" style="margin-top: -7px; margin-left: 10px">
-                        <div class="btn-group">
-                            <a class="btn btn-primary" id="speech-start" href="#"><i id="speech-start-icon"
-                                                                                 class="icon-play icon-white"></i></a>
-                            <a class="btn btn-primary disabled" id="speech-stop" href="#"><i id="speech-stop-icon"
                                                                                          class="icon-stop icon-white"></i></a>
                         </div>
                     </div>
@@ -121,14 +99,14 @@ <h3>2. Select and configure the filter:</h3>
 
                     <div class="controls" >
                         <select name="filterType" id="filterType" style="width: 190px">
-                            <option value="lowpass">Lowpass</option>
-                            <option value="highpass">Highpass</option>
-                            <option value="bandpass">Bandpass</option>
-                            <option value="lowshelf" selected>Lowshelf</option>
-                            <option value="highshelf">Highshelf</option>
-                            <option value="peaking">Peaking</option>
-                            <option value="notch">Notch</option>
-                            <option value="allpass">Allpass</option>
+                            <option value="0">Lowpass</option>
+                            <option value="1">Highpass</option>
+                            <option value="2">Bandpass</option>
+                            <option value="3" selected>Lowshelf</option>
+                            <option value="4">Highshelf</option>
+                            <option value="5">Peaking</option>
+                            <option value="6">Notch</option>
+                            <option value="7">Allpass</option>
                         </select>
                         <span class="label label-info" id="filterInfo">info</span>
                     </div>
@@ -181,9 +159,9 @@ <h3>3. Enable outputs</h3>
                     <div class="btn-toolbar" style="margin-top: -7px; margin-left: 10px">
                         <div class="btn-group">
                             <a class="btn btn-primary" id="spk-start" href="#"><i id="spk-start-icon"
-                                                                                   class="icon-play icon-white"></i></a>
+                                                                                  class="icon-play icon-white"></i></a>
                             <a class="btn btn-primary disabled" id="spk-stop" href="#"><i id="spk-stop-icon"
-                                                                                 class="icon-stop icon-white"></i></a>
+                                                                                          class="icon-stop icon-white"></i></a>
                         </div>
                     </div>
                 </div>
@@ -210,7 +188,7 @@ <h3>3. Enable outputs</h3>
                             <a class="btn btn-primary" id="spectro-start" href="#"><i id="spectro-start-icon"
                                                                                       class="icon-play icon-white"></i></a>
                             <a class="btn btn-primary disabled" id="spectro-stop" href="#"><i id="spectro-stop-icon"
-                                                                                    class="icon-stop icon-white"></i></a>
+                                                                                              class="icon-stop icon-white"></i></a>
                         </div>
                     </div>
                 </div>
@@ -243,7 +221,7 @@ <h3>3. Enable outputs</h3>
             <div class="span4 " >
                 Frequencies:
                 <canvas id="spectrum" width="300" height="256"
-                style="display: block; background-color: black ;"></canvas>
+                        style="display: block; background-color: black ;"></canvas>
             </div>
             <div class="span4 ">
                 Spectrogram:
@@ -270,378 +248,333 @@ <h3>3. Enable outputs</h3>
 <script src="js/chroma.js"></script>
 <script>
 
-// some globals
-var context = new webkitAudioContext();
-var audioBuffer;
-var sourceNode;
-var mediaStreamSource;
-
-
+    // some globals
+    var context = new AudioContext();
+    var audioBuffer;
+    var sourceNode;
+    var mediaStreamSource;
 
-var osc = context.createOscillator();
+    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 
-var filter = context.createBiquadFilter();
-filter.type = 3;
-filter.frequency.value = 440;
-filter.Q.value = 0;
-filter.gain.value = 0;
 
+    var osc = context.createOscillator();
 
-// state variables
-var analyserRunning = false;
-var spectrumRunning = false;
-var waveRunning = false;
-var musicRunning = false;
-var micRunning = false;
-var sqRunning = false;
+    var filter = context.createBiquadFilter();
+    filter.type = 3;
+    filter.frequency.value = 440;
+    filter.Q.value = 0;
+    filter.gain.value = 0;
 
-// setup a javascript node
-var javascriptNode = context.createJavaScriptNode(2048, 1, 1);
 
-// connect to destination, else it isn't called
-javascriptNode.connect(context.destination);
-// when the javascript node is called
-// we use information from the analyzer node
-// to draw the volume
-javascriptNode.onaudioprocess = function () {
-
-    // get the average for the first channel
-    var array = new Uint8Array(analyser.frequencyBinCount);
-    analyser.getByteFrequencyData(array);
-
-    // draw the spectrogram
-    if ((musicRunning || micRunning || sqRunning)
-            && analyserRunning) {
-        drawSpectrogram(array);
-    }
-
-    if ((musicRunning || micRunning || sqRunning)
-            && spectrumRunning) {
-        drawSpectrum(array);
-    }
+    // state variables
+    var analyserRunning = false;
+    var spectrumRunning = false;
+    var waveRunning = false;
+    var musicRunning = false;
+    var micRunning = false;
+    var sqRunning = false;
 
-    if ((musicRunning || micRunning || sqRunning)
-            && waveRunning) {
-        var array2 = new Uint8Array(analyser.frequencyBinCount);
-        analyser.getByteTimeDomainData(array2)
+    // setup a javascript node
+    var javascriptNode = context.createScriptProcessor(2048, 1, 1);
 
+    // connect to destination, else it isn't called
+    javascriptNode.connect(context.destination);
+    // when the javascript node is called
+    // we use information from the analyzer node
+    // to draw the volume
+    javascriptNode.onaudioprocess = function () {
 
-        drawWave(array2);
-    }
+        // get the average for the first channel
+        var array = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteFrequencyData(array);
 
+        // draw the spectrogram
+        if ((musicRunning || micRunning || sqRunning)
+                && analyserRunning) {
+            drawSpectrogram(array);
+        }
 
+        if ((musicRunning || micRunning || sqRunning)
+                && spectrumRunning) {
+            drawSpectrum(array);
+        }
 
-}
+        if ((musicRunning || micRunning || sqRunning)
+                && waveRunning) {
+            var array2 = new Uint8Array(analyser.frequencyBinCount);
+            analyser.getByteTimeDomainData(array2)
 
-// setup a analyzer
-var analyser = context.createAnalyser();
-analyser.smoothingTimeConstant = 0;
-analyser.fftSize = 512;
 
-// create a buffer source node
-filter.connect(analyser);
-analyser.connect(javascriptNode);
+            drawWave(array2);
+        }
 
-// get the context from the canvas to draw on
-var ctx = $("#spectrogram").get()[0].getContext("2d");
 
-// create a temp canvas we use for copying
-var tempCanvas = document.createElement("canvas");
-tempCanvas.width = 460;
-tempCanvas.height = 300;
-var tempCtx = tempCanvas.getContext("2d");
 
-// used for color distribution
-var hot = new chroma.ColorScale({
-    colors:['#000000', '#ff0000', '#ffff00', '#ffffff'],
-    positions:[0, .25, .75, 1],
-    mode:'rgb',
-    limits:[0, 350]
-});
+    }
 
-$(document).ready(function () {
-    setupHandlers();
-    //loadSound("wagner-short.ogg");
-    loadSound("marcher.ogg");
-});
+    // setup a analyzer
+    var analyser = context.createAnalyser();
+    analyser.smoothingTimeConstant = 0;
+    analyser.fftSize = 512;
 
-function setupSourceAudio() {
     // create a buffer source node
-    sourceNode = context.createBufferSource();
-
-    sourceNode.connect(filter);
-    //filter.connect(context.destination);
-
-    // and connect to destination
-    //sourceNode.connect(context.destination);
-}
-
-function setupHandlers() {
-    $("#music-start").click(function () {
-        setupSourceAudio();
-        sourceNode.buffer = audioBuffer;
-        sourceNode.start(0);
-        sourceNode.loop = true;
-        musicRunning=true;
-
-        $("#music-start").addClass("disabled");
-        $("#music-stop").removeClass("disabled");
-
+    filter.connect(analyser);
+    analyser.connect(javascriptNode);
+
+    // get the context from the canvas to draw on
+    var ctx = $("#spectrogram").get()[0].getContext("2d");
+
+    // create a temp canvas we use for copying
+    var tempCanvas = document.createElement("canvas");
+    tempCanvas.width = 460;
+    tempCanvas.height = 300;
+    var tempCtx = tempCanvas.getContext("2d");
+
+    // used for color distribution
+    var hot = new chroma.ColorScale({
+        colors:['#000000', '#ff0000', '#ffff00', '#ffffff'],
+        positions:[0, .25, .75, 1],
+        mode:'rgb',
+        limits:[0, 350]
     });
 
-    $("#music-stop").click(function () {
-        sourceNode.stop(0);
-
-        musicRunning = false;
-        $("#music-stop").addClass("disabled");
-        $("#music-start").removeClass("disabled");
+    $(document).ready(function () {
+        setupHandlers();
+        loadSound("wagner-short.ogg");
     });
 
-    $("#sq-start").click(function () {
-        osc.frequency.value=600;
-        osc.type=2;
-        osc.connect(filter);
-        osc.start(0);
-
+    function setupSourceAudio() {
+        // create a buffer source node
+        sourceNode = context.createBufferSource();
 
-        sqRunning=true;
-
-        $("#sq-stop").removeClass("disabled");
-        $("#sq-start").addClass("disabled");
-    });
+        sourceNode.connect(filter);
+        //filter.connect(context.destination);
 
-    $("#sq-stop").click(function () {
-        osc.stop(0);
-        osc.disconnect(filter);
+        // and connect to destination
+        //sourceNode.connect(context.destination);
+    }
 
-        sqRunning=false;
+    function setupHandlers() {
+        $("#music-start").click(function () {
+            setupSourceAudio();
+            sourceNode.buffer = audioBuffer;
+            sourceNode.start(0);
+            sourceNode.loop = true;
+            musicRunning=true;
 
-        $("#sq-stop").addClass("disabled");
-        $("#sq-start").removeClass("disabled");
-    });
+            $("#music-start").addClass("disabled");
+            $("#music-stop").removeClass("disabled");
 
-    $("#speech-start").click(function () {
-        osc.frequency.value=600;
-        osc.type=2;
-        osc.connect(filter);
-        osc.start(0);
+        });
 
+        $("#music-stop").click(function () {
+            sourceNode.stop(0);
 
-        sqRunning=true;
+            musicRunning = false;
+            $("#music-stop").addClass("disabled");
+            $("#music-start").removeClass("disabled");
+        });
 
-        $("#speech-stop").removeClass("disabled");
-        $("#speech-start").addClass("disabled");
-    });
+        $("#sq-start").click(function () {
+            osc.frequency.value=600;
+            osc.type=2;
+            osc.connect(filter);
+            osc.start(0);
 
-    $("#speech-stop").click(function () {
-        osc.stop(0);
-        osc.disconnect(filter);
 
-        sqRunning=false;
+            sqRunning=true;
 
-        $("#speech-stop").addClass("disabled");
-        $("#speech-start").removeClass("disabled");
-    });
+            $("#sq-stop").removeClass("disabled");
+            $("#sq-start").addClass("disabled");
+        });
 
+        $("#sq-stop").click(function () {
+            osc.stop(0);
+            osc.disconnect(filter);
 
-    $("#mic-start").click(function () {
-        navigator.webkitGetUserMedia({audio:true},function(stream) {
-            mediaStreamSource = context.createMediaStreamSource(stream);
-            mediaStreamSource.connect(filter);
+            sqRunning=false;
 
-            micRunning = true;
-            $("#mic-start").addClass("disabled");
-            $("#mic-stop").removeClass("disabled");
+            $("#sq-stop").addClass("disabled");
+            $("#sq-start").removeClass("disabled");
         });
 
 
+        $("#mic-start").click(function () {
+//        navigator.webkitGetUserMedia({audio:true},function(stream) {
+            navigator.getUserMedia({audio:true},function(stream) {
+                mediaStreamSource = context.createMediaStreamSource(stream);
+                mediaStreamSource.connect(filter);
 
-    });
-
-    $("#mic-stop").click(function () {
-        mediaStreamSource.disconnect(filter);
-        micRunning = false;
-
+                micRunning = true;
+                $("#mic-start").addClass("disabled");
+                $("#mic-stop").removeClass("disabled");
+            }, function(fail) {console.log(fail)});
 
-        $("#mic-stop").addClass("disabled");
-        $("#mic-start").removeClass("disabled");
-    });
 
 
+        });
 
+        $("#mic-stop").click(function () {
+            mediaStreamSource.disconnect(filter);
+            micRunning = false;
 
-    $("#spectro-start").click(function () {
 
-        analyserRunning = true;
+            $("#mic-stop").addClass("disabled");
+            $("#mic-start").removeClass("disabled");
+        });
 
-        $("#spectro-start").addClass("disabled");
-        $("#spectro-stop").removeClass("disabled");
-    });
 
-    $("#spectro-stop").click(function () {
-        analyserRunning = false;
 
-        $("#spectro-start").removeClass("disabled");
-        $("#spectro-stop").addClass("disabled");
-    });
 
-    $("#freq-start").click(function() {
+        $("#spectro-start").click(function () {
 
-        spectrumRunning = true;
-        $("#freq-start").addClass("disabled");
-        $("#freq-stop").removeClass("disabled");
+            analyserRunning = true;
 
-    });
+            $("#spectro-start").addClass("disabled");
+            $("#spectro-stop").removeClass("disabled");
+        });
 
-    $("#freq-stop").click(function() {
+        $("#spectro-stop").click(function () {
+            analyserRunning = false;
 
-        spectrumRunning = false;
-        $("#freq-start").removeClass("disabled");
-        $("#freq-stop").addClass("disabled");
-    });
+            $("#spectro-start").removeClass("disabled");
+            $("#spectro-stop").addClass("disabled");
+        });
 
+        $("#freq-start").click(function() {
 
-    $("#wave-start").click(function() {
+            spectrumRunning = true;
+            $("#freq-start").addClass("disabled");
+            $("#freq-stop").removeClass("disabled");
 
-        waveRunning = true;
-        $("#wave-start").addClass("disabled");
-        $("#wave-stop").removeClass("disabled");
+        });
 
-    });
+        $("#freq-stop").click(function() {
 
-    $("#wave-stop").click(function() {
+            spectrumRunning = false;
+            $("#freq-start").removeClass("disabled");
+            $("#freq-stop").addClass("disabled");
+        });
 
-        waveRunning = false;
-        $("#wave-start").removeClass("disabled");
-        $("#wave-stop").addClass("disabled");
-    });
 
+        $("#wave-start").click(function() {
 
-    delayNode = context.createDelayNode();
-    delayNode.delayTime.value=0.1;
-    gainNodeDelay = context.createGainNode();
-    gainNodeDelay.gain.value=0.5;
-    gainNodeSignal = context.createGainNode();
-    gainNodeSignal.gain.value=0.5;
-    gainFeedback = context.createGainNode();
-    gainFeedback.gain.value=0.65;
+            waveRunning = true;
+            $("#wave-start").addClass("disabled");
+            $("#wave-stop").removeClass("disabled");
 
-    $("#spk-start").click(function() {
+        });
 
-        sourceNode.playbackRate.value=0.7;
+        $("#wave-stop").click(function() {
 
-        //filter.connect(context.destination);
-        filter.connect(delayNode);
-        filter.connect(gainNodeSignal);
-        delayNode.connect(gainNodeDelay);
+            waveRunning = false;
+            $("#wave-start").removeClass("disabled");
+            $("#wave-stop").addClass("disabled");
+        });
 
-        gainNodeDelay.connect(context.destination);
-        gainNodeDelay.connect(gainFeedback);
-        gainNodeSignal.connect(context.destination);
-        gainNodeSignal.connect(gainFeedback);
+        $("#spk-start").click(function() {
 
-        gainFeedback.connect(delayNode);
+            filter.connect(context.destination);
+            $("#spk-start").addClass("disabled");
+            $("#spk-stop").removeClass("disabled");
 
-        $("#spk-start").addClass("disabled");
-        $("#spk-stop").removeClass("disabled");
+        });
 
-    });
+        $("#spk-stop").click(function() {
 
-    $("#spk-stop").click(function() {
+            filter.disconnect(context.destination);
+            filter.connect(analyser);
+            $("#spk-start").removeClass("disabled");
+            $("#spk-stop").addClass("disabled");
+        });
 
-        filter.disconnect(context.destination);
 
-        $("#spk-start").removeClass("disabled");
-        $("#spk-stop").addClass("disabled");
-    });
 
+        $("#gainslider").slider({
+            min:-50,
+            max:50,
+            value:0,
+            slide:refreshGain
+        });
 
+        $("#qslider").slider({
+            min:0,
+            max:100,
+            value:0,
+            slide:refreshQFactor
+        });
 
-    $("#gainslider").slider({
-        min:-50,
-        max:50,
-        value:0,
-        slide:refreshGain
-    });
+        $("#frequencyslider").slider({
+            min:20,
+            max:20000,
+            value:440,
+            slide:refreshFrequency
+        });
 
-    $("#qslider").slider({
-        min:0,
-        max:100,
-        value:0,
-        slide:refreshQFactor
-    });
+        $("#filterType").change(refreshFilterType);
+        $("#filterType").val(3);
+        refreshFilterType();
+        refreshFrequency();
+        refreshGain();
+        refreshQFactor();
+    }
 
-    $("#frequencyslider").slider({
-        min:20,
-        max:20000,
-        value:440,
-        slide:refreshFrequency
-    });
 
-    $("#filterType").change(refreshFilterType);
-    $("#filterType").val(3);
-    refreshFilterType();
-    refreshFrequency();
-    refreshGain();
-    refreshQFactor();
-}
-
-
-function refreshFilterType() {
-    var currentFilterType = $("#filterType").val();
-    var asText = $("#filterType option:selected").text();
-    var value = "";
-
-    switch (currentFilterType) {
-        case "lowpass":
-            value = ("A lowpass filter allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. LOWPASS implements a standard second-order resonant lowpass filter with 12dB/octave rolloff.<br/><br/>" +
-                    "<strong>Frequency</strong>: The cutoff frequency above which the frequencies are attenuated<br/>" +
-                    "<strong>Q</strong>: Controls how peaked the response will be at the cutoff frequency. A large value makes the response more peaked.<br/>" +
-                    "<strong>Gain</strong>: Not used in this filter type");
-            break;
-        case "highpass":
-            value = ("A highpass filter is the opposite of a lowpass filter. Frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. HIGHPASS implements a standard second-order resonant highpass filter with 12dB/octave rolloff. <br/><br/>" +
-                    "<strong>Frequency</strong>: The cutoff frequency above which the frequencies are attenuated<br/>" +
-                    "<strong>Q</strong>: Controls how peaked the response will be at the cutoff frequency. A large value makes the response more peaked.<br/>" +
-                    "<strong>Gain</strong>: Not used in this filter type");
-            break;
-        case "bandpass":
-            value = ("A bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. BANDPASS implements a second-order bandpass filter.<br/><br/>" +
-                    "<strong>Frequency</strong>: The center of the frequency band<br/>" +
-                    "<strong>Q</strong>: Controls the width of the band. The width becomes narrower as the Q value increases.<br/>" +
-                    "<strong>Gain</strong>: Not used in this filter type");
-            break;
-        case "lowshelf":
-            value = ("The lowshelf filter allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. LOWSHELF implements a second-order lowshelf filter.<br/><br/>" +
-                    "<strong>Frequency</strong>: The cutoff frequency above which the frequencies are attenuated<br/>" +
-                    "<strong>Q</strong>: Not used in this filter type.<br/>" +
-                    "<strong>Gain</strong>: The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.");
-            break;
-        case "highshelf":
-            value = ("The highshelf filter is the opposite of the lowshelf filter and allows all frequencies through, but adds a boost to the higher frequencies. HIGHSHELF implements a second-order highshelf filter<br/><br/>" +
-                    "<strong>Frequency</strong>: The lower limit of the frequences where the boost (or attenuation) is applied.<br/>" +
-                    "<strong>Q</strong>: Not used in this filter type.<br/>" +
-                    "<strong>Gain</strong>: The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.");
-            break;
-        case "peaking":
-            value = ("The peaking filter allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies.<br/><br/>" +
-                    "<strong>Frequency</strong>: The center frequency of where the boost is applied.<br/>" +
-                    "<strong>Q</strong>: Controls the width of the band of frequencies that are boosted. A large value implies a narrow width.<br/>" +
-                    "<strong>Gain</strong>: The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.");
-            break;
-        case "notch":
-            value = ("The notch filter (also known as a band-stop or band-rejection filter) is the opposite of a bandpass filter. It allows all frequencies through, except for a set of frequencies.<br/><br/>" +
-                    "<strong>Frequency</strong>: The center frequency of where the notch is applied.<br/>" +
-                    "<strong>Q</strong>: Controls the width of the band of frequencies that are attenuated. A large value implies a narrow width.<br/>" +
-                    "<strong>Gain</strong>: Not used in this filter type");
-            break;
-        case "allpass":
-            value = ("An allpass filter allows all frequencies through, but changes the phase relationship between the various frequencies. ALLPASS implements a second-order allpass filter.<br/><br/>" +
-                    "<strong>Frequency</strong>: The frequency where the center of the phase transition occurs. Viewed another way, this is the frequency with maximal group delay.<br/>" +
-                    "<strong>Q</strong>: Controls how sharp the phase transition is at the center frequency. A larger value implies a sharper transition and a larger group delay.<br/>" +
-                    "<strong>Gain</strong>: Not used in this filter type");
-            break;
-    };
+    function refreshFilterType() {
+        var currentFilterType = $("#filterType").val();
+        var asText = $("#filterType option:selected").text();
+        var value = "";
+
+        switch (parseInt(currentFilterType)) {
+            case 0:
+                value = ("A lowpass filter allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. LOWPASS implements a standard second-order resonant lowpass filter with 12dB/octave rolloff.<br/><br/>" +
+                "<strong>Frequency</strong>: The cutoff frequency above which the frequencies are attenuated<br/>" +
+                "<strong>Q</strong>: Controls how peaked the response will be at the cutoff frequency. A large value makes the response more peaked.<br/>" +
+                "<strong>Gain</strong>: Not used in this filter type");
+                break;
+            case 1:
+                value = ("A highpass filter is the opposite of a lowpass filter. Frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. HIGHPASS implements a standard second-order resonant highpass filter with 12dB/octave rolloff. <br/><br/>" +
+                "<strong>Frequency</strong>: The cutoff frequency above which the frequencies are attenuated<br/>" +
+                "<strong>Q</strong>: Controls how peaked the response will be at the cutoff frequency. A large value makes the response more peaked.<br/>" +
+                "<strong>Gain</strong>: Not used in this filter type");
+                break;
+            case 2:
+                value = ("A bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. BANDPASS implements a second-order bandpass filter.<br/><br/>" +
+                "<strong>Frequency</strong>: The center of the frequency band<br/>" +
+                "<strong>Q</strong>: Controls the width of the band. The width becomes narrower as the Q value increases.<br/>" +
+                "<strong>Gain</strong>: Not used in this filter type");
+                break;
+            case 3:
+                value = ("The lowshelf filter allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. LOWSHELF implements a second-order lowshelf filter.<br/><br/>" +
+                "<strong>Frequency</strong>: The cutoff frequency above which the frequencies are attenuated<br/>" +
+                "<strong>Q</strong>: Not used in this filter type.<br/>" +
+                "<strong>Gain</strong>: The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.");
+                break;
+            case 4:
+                value = ("The highshelf filter is the opposite of the lowshelf filter and allows all frequencies through, but adds a boost to the higher frequencies. HIGHSHELF implements a second-order highshelf filter<br/><br/>" +
+                "<strong>Frequency</strong>: The lower limit of the frequences where the boost (or attenuation) is applied.<br/>" +
+                "<strong>Q</strong>: Not used in this filter type.<br/>" +
+                "<strong>Gain</strong>: The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.");
+                break;
+            case 5:
+                value = ("The peaking filter allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies.<br/><br/>" +
+                "<strong>Frequency</strong>: The center frequency of where the boost is applied.<br/>" +
+                "<strong>Q</strong>: Controls the width of the band of frequencies that are boosted. A large value implies a narrow width.<br/>" +
+                "<strong>Gain</strong>: The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.");
+                break;
+            case 6:
+                value = ("The notch filter (also known as a band-stop or band-rejection filter) is the opposite of a bandpass filter. It allows all frequencies through, except for a set of frequencies.<br/><br/>" +
+                "<strong>Frequency</strong>: The center frequency of where the notch is applied.<br/>" +
+                "<strong>Q</strong>: Controls the width of the band of frequencies that are attenuated. A large value implies a narrow width.<br/>" +
+                "<strong>Gain</strong>: Not used in this filter type");
+                break;
+            case 7:
+                value = ("An allpass filter allows all frequencies through, but changes the phase relationship between the various frequencies. ALLPASS implements a second-order allpass filter.<br/><br/>" +
+                "<strong>Frequency</strong>: The frequency where the center of the phase transition occurs. Viewed another way, this is the frequency with maximal group delay.<br/>" +
+                "<strong>Q</strong>: Controls how sharp the phase transition is at the center frequency. A larger value implies a sharper transition and a larger group delay.<br/>" +
+                "<strong>Gain</strong>: Not used in this filter type");
+                break;
+        };
 
 //    $("#filterInfo").tooltip({
 //        title: value,
@@ -650,124 +583,123 @@ <h3>3. Enable outputs</h3>
 //    });
 
 
-    $("#filterInfo").popover('destroy');
-    $("#filterInfo").popover({
-        title: asText + " filter info:",
-        content: value,
-        html: true,
-        placement: "bottom",
-        trigger: "hover"
-    });
-
-    // and update the filter type
-    filter.type = currentFilterType;
-}
-
-function refreshFrequency() {
+        $("#filterInfo").popover('destroy');
+        $("#filterInfo").popover({
+            title: asText + " filter info:",
+            content: value,
+            html: true,
+            placement: "bottom",
+            trigger: "hover"
+        });
 
-    var frequency = parseInt($('#frequencyslider').slider("value"));
+        // and update the filter type
+        filter.type = currentFilterType;
+    }
 
-    $("#currentFreq").text("(" + frequency + " Hz)");
-    filter.frequency.value = frequency;
+    function refreshFrequency() {
 
-}
+        var frequency = parseInt($('#frequencyslider').slider("value"));
 
-function refreshGain() {
-    var gain = parseInt($('#gainslider').slider("value"));
+        $("#currentFreq").text("(" + frequency + " Hz)");
+        filter.frequency.value = frequency;
 
-    $("#currentGain").text("(" + gain + ")");
-    filter.gain.value = gain;
-}
+    }
 
-function refreshQFactor() {
-    var q = parseInt($('#qslider').slider("value"));
+    function refreshGain() {
+        var gain = parseInt($('#gainslider').slider("value"));
 
-    $("#currentQfactor").text("(" + q + ")");
-    filter.Q.value = q;
-}
+        $("#currentGain").text("(" + gain + ")");
+        filter.gain.value = gain;
+    }
 
-// load the specified sound
-function loadSound(url) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url, true);
-    request.responseType = 'arraybuffer';
+    function refreshQFactor() {
+        var q = parseInt($('#qslider').slider("value"));
 
-    // When loaded decode the data
-    request.onload = function () {
+        $("#currentQfactor").text("(" + q + ")");
+        filter.Q.value = q;
+    }
 
-        // decode the data
-        context.decodeAudioData(request.response, function (buffer) {
-            // when the audio is decoded play the sound
-            audioBuffer = buffer;
-            console.log("decoded");
-        }, onError);
+    // load the specified sound
+    function loadSound(url) {
+        var request = new XMLHttpRequest();
+        request.open('GET', url, true);
+        request.responseType = 'arraybuffer';
+
+        // When loaded decode the data
+        request.onload = function () {
+
+            // decode the data
+            context.decodeAudioData(request.response, function (buffer) {
+                // when the audio is decoded play the sound
+                audioBuffer = buffer;
+            }, onError);
+        }
+        request.send();
     }
-    request.send();
-}
 
-function playSound(buffer) {
-    sourceNode.buffer = buffer;
-    sourceNode.noteOn(0);
-}
+    function playSound(buffer) {
+        sourceNode.buffer = buffer;
+        sourceNode.noteOn(0);
+    }
 
-// log if an error occurs
-function onError(e) {
-    console.log(e);
-}
+    // log if an error occurs
+    function onError(e) {
+        console.log(e);
+    }
 
-function drawSpectrum(array) {
-    var ctx = $("#spectrum").get()[0].getContext("2d");
-    ctx.fillStyle = "#ffffff"
-    ctx.clearRect(0, 0, 300, 256);
+    function drawSpectrum(array) {
+        var ctx = $("#spectrum").get()[0].getContext("2d");
+        ctx.fillStyle = "#ffffff"
+        ctx.clearRect(0, 0, 300, 256);
 
 
-    for ( var i = 0; i < (array.length); i++ ){
-        var value = array[i];
+        for ( var i = 0; i < (array.length); i++ ){
+            var value = array[i];
 
-        ctx.fillRect(i*2,300-value,1,300);
-    }
-};
+            ctx.fillRect(i*2,300-value,1,300);
+        }
+    };
 
-function drawWave(array) {
+    function drawWave(array) {
 
-    var ctx = $("#wave").get()[0].getContext("2d");
-    ctx.fillStyle = "#ffffff"
-    ctx.clearRect(0, 0, 300, 256);
+        var ctx = $("#wave").get()[0].getContext("2d");
+        ctx.fillStyle = "#ffffff"
+        ctx.clearRect(0, 0, 300, 256);
 
-    for ( var i = 0; i < (array.length); i++ ){
-        var value = array[i];
+        for ( var i = 0; i < (array.length); i++ ){
+            var value = array[i];
 
-        ctx.fillRect(i+22,256-value,1,1);
-    }
-};
+            ctx.fillRect(i+22,256-value,1,1);
+        }
+    };
 
-function drawSpectrogram(array) {
+    function drawSpectrogram(array) {
 
-    // copy the current canvas onto the temp canvas
-    var canvas = document.getElementById("spectrogram");
+        // copy the current canvas onto the temp canvas
+        var canvas = document.getElementById("spectrogram");
 
-    tempCtx.drawImage(canvas, 0, 0, 300, 256);
+        tempCtx.drawImage(canvas, 0, 0, 300, 256);
 
-    // iterate over the elements from the array
-    for (var i = 0; i < array.length; i++) {
-        // draw each pixel with the specific color
-        var value = array[i];
-        ctx.fillStyle = hot.getColor(value).hex();
+        // iterate over the elements from the array
+        for (var i = 0; i < array.length; i++) {
+            // draw each pixel with the specific color
+            var value = array[i];
+            ctx.fillStyle = hot.getColor(value).hex();
 
-        // draw the line at the right side of the canvas
-        ctx.fillRect(300 - 1, 256 - i, 1, 1);
-    }
+            // draw the line at the right side of the canvas
+            ctx.fillRect(300 - 1, 256 - i, 1, 1);
+        }
 
-    // set translate on the canvas
-    ctx.translate(-1, 0);
-    // draw the copied image
-    ctx.drawImage(spectrogram, 0, 0, 300, 256, 0, 0, 300, 256);
+        // set translate on the canvas
+        ctx.translate(-1, 0);
+        // draw the copied image
+        ctx.drawImage(spectrogram, 0, 0, 300, 256, 0, 0, 300, 256);
 
-    // reset the transformation matrix
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
+        // reset the transformation matrix
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
 
-}
+    }
 
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file