loop recording

by jmchen

HTML

<div>
    <button id='metronome' class='mybutton'>metronome</button>
    <button id='kick' class='mybutton'>kick</button>
    <button id='record' class='mybutton'>record</button>
    <button id='clear' class='mybutton'>clear</button>
</div>
<div>Set bpm
    <input id='bpm' value=120 style='width:6em'></input>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src='https://jyunming-chen.github.io/WebAudio/js/shared.js'></script>

CSS

div {
    margin: 15px;
}
.mybutton {
    margin: 10px;
    background-color: white;
    display: block;
}

JavaScript

function playSound2(buffer, time, intensity) {
    var gainNode = context.createGain();
    var source = context.createBufferSource();
    source.buffer = buffer;

    // Connect source to a gain node
    source.connect(gainNode);
    // Connect gain node to destination
    gainNode.connect(context.destination);

    var gainval = intensity || 0.15;
    gainNode.gain.value = gainval;

    source[source.start ? 'start' : 'noteOn'](time);
    
    /////////////////////////////////
    // source.start (when, in seconds) 
    // The 'when' parameter defines when the play will start. 
    // If when represents a time in the past, the play will start immediately.
    // https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start
}


//////////////////////////////////////////////////////////////////////////////
var RhythmSample = function () {
    loadSounds(this, {
        click: 'https://jyunming-chen.github.io/WebAudio/metronome_click.wav',
        ding: 'https://jyunming-chen.github.io/WebAudio/ding.wav',
        dingding: 'https://jyunming-chen.github.io/WebAudio/dingding.wav',
        kick: 'https://jyunming-chen.github.io/WebAudio/kick.wav',
        snare: 'https://jyunming-chen.github.io/WebAudio/snare.wav',
        hihat: 'https://jyunming-chen.github.io/WebAudio/hihat.wav'
    });
};

// play score, exactly ONCE (has 'barsInScore' bars)
RhythmSample.prototype.playSequence = function (score) {
    var startTime = context.currentTime;  // in seconds, from webaudio
    var eighthNoteTime = 60/tempo/2;  // seconds

    for (var ii = 0; ii < score.length; ii++) {
        if (score[ii].instrument == 'k') 
            playSound2(this.kick, startTime + score[ii].time * eighthNoteTime, score[ii].intensity);
        if (score[ii].instrument == 's') 
            playSound2(this.snare, startTime + score[ii].time * eighthNoteTime, score[ii].intensity);
        if (score[ii].instrument == 'h') 
            playSound2(this.hihat, startTime + score[ii].time *...