Question

I’m experimenting with the Web Audio API and my goal is to create a digital guitar where each string has an initial sound source of an actual guitar playing the string open and then I would like to generate all other fret position sounds dynamically. After some research into the subject (this is all pretty new to me) it sounded like this might be achieved by altering the frequency of the source sound sample.

The problem is I’ve seen lots of algorithms for altering synthesized sin waves but nothing to alter the frequency of an audio sample. Here is a sample of my code to give a better idea of how i’m trying to implement this:

// Guitar chord buffer    
var chordBuffer = null;

// Create audio context
var context = new webkitAudioContext();

// Load sound sample
var request = new XMLHttpRequest();
request.open('GET', 'chord.mp3', true);
request.responseType = 'arraybuffer';
request.onload = loadChord;
request.send();

// Handle guitar string "pluck"
$('.string').mouseenter(function(e){
    e.preventDefault();

    var source = context.createBufferSource();
    source.buffer = chordBuffer;

    // Create javaScriptNode so we can get at raw audio buffer
    var jsnode = context.createJavaScriptNode(1024, 1, 1);
    jsnode.onaudioprocess = changeFrequency;

    // Connect nodes and play
    source.connect(jsnode);
    jsnode.connect(context.destination);
    source.noteOn(0);
});

function loadChord() {
    context.decodeAudioData(
        request.response,
        function(pBuffer) { chordBuffer = pBuffer; },
        function(pError) { console.error(pError); }
    );
}

function changeFrequency(e) {
    var ib = e.inputBuffer.getChannelData(0);
    var ob = e.outputBuffer.getChannelData(0);
    var n = ib.length;

    for (var i = 0; i < n; ++i) {
        // Code needed...
    }
}

So there you have it – I can play the sound just fine but am at a bit of a lose when to comes to creating the code in the changeFrequency function which would change the chord samples frequency so it sounded like another fret position on the string. Any help with this code would be appreciated or opinions on whether what I’m attempting to do is even possible.

Thanks!

Answer 1

You can get the desired behavior by setting playbackRate, but as Brad says, you’re going to have to use multi-sampling. Also see this SO question: Setting playbackRate on audio element connected to web audio api.