WebSpeechJammer

HTML

<h1 class="center">WebSpeechJammer</h1>

<div class="center">
    <label for="delay-time">Delay Time  <span id="delay-time-value"></span> (seconds)</label><br>
    <input type="range" id="delay-time" min="0" max="1" step="0.05" value="0.4">
</div>

CSS

body {
    background-color: #333;
    color: #eee;
    font-family: "Century Gothic", Helvetica, sans-serif;
    font-size: 24px;
}

h1 {
    color: #9c3;
}

.center {
    margin: 1em 0;
    line-height: 1.5em;
    text-align: center;
}

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

navigator.getUserMedia({audio: true, video: false}, function(stream) {
    var context = new AudioContext;
    var delay = context.createDelay();
    var microphone = context.createMediaStreamSource(stream);
    
    var span = document.querySelector("#delay-time-value");
    var range = document.querySelector("#delay-time");
    
    function changeDelayTime() {
        span.innerHTML = range.value;
        delay.delayTime.value = range.value;
    }
    changeDelayTime();
    range.addEventListener("input", changeDelayTime, false);
    
    microphone.connect(delay);
    delay.connect(context.destination);
}, function(e){ alert(JSON.stringify(e, null, "  ")) });