Spike - Adjust Number for Percent, Direction, Offset

by Aubrey Taylor

HTML

<div><span>Volume </span><span id="volume">0</span>

</div>
<div><span>Percent </span><span id="progress">0</span>

</div>

JavaScript

var duration = 5000, // milliseconds
    interval = -1,
    freq = 30, // milliseconds
    loops = duration / freq,
    count = 0,
    progress = 0,
    el_progress = document.getElementById('progress'),
    el_volume = document.getElementById('volume'),
    volume = 0,
    maxVolume = 1;

function loop() {
    count++;
    progress = count / loops;
    el_progress.innerHTML = progress.toFixed(2);

    setVolumeForPercent(progress, .8, 'up');

    if (count >= loops) {
        killLoop();
    }
}

function startLoop() {
    interval = setInterval(loop, freq);
}

function killLoop() {
    clearInterval(interval);
}

function setVolumeForPercent(percent, offset, direction) {
    direction = direction === 'down' ? -1 : 1;

    var delta = maxVolume - offset,
        result = ((delta * progress) * direction) + offset;

    el_volume.innerHTML = result.toFixed(2);
}

startLoop();