setValuetAtTime

by Chinmay Pendharkar

HTML

<input disabled="true" type="submit" id="play" onclick="play()" value="Play" />
<br>
<input type="range" min="-1" max="5" value="0" step="0.1" oninput="change(this)">
 <br>
<output id="rangevalue">0</output>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext
var context = new AudioContext();
var source = context.createBufferSource();
source.loop = true;
source.connect(context.destination);


load('https://dl.dropboxusercontent.com/u/2117088/WorkoutTrack.mp3', function (buffer) {
    //console.log('tone loaded');
    document.getElementById('play').disabled = false;
    source.buffer = buffer;
});

function play(){
    v = document.getElementById("rangevalue");
    s = parseFloat(rangevalue.value);
    source.playbackRate.setValueAtTime(s,context.currentTime);
    console.log("starting with playbackRate ", s);
    source.start(0);
    window.source = source;
}

function load(url, successCallback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function () {
        context.decodeAudioData(request.response, successCallback,

        function () {
            console.error('decodeAudioData failed.');
        });
    };
    request.send();
}

function change(range){
    v = document.getElementById("rangevalue");
    rangevalue.value = range.value;
   //source.playbackRate.setValueAtTime(parseFloat(range.value),context.currentTime);
    source.playbackRate.cancelScheduledValues(0);
    source.playbackRate.value = parseFloat(range.value);
}