notepadwebdev

// bin 3 : ~86 Hz
let percVol = this.dataArray[2] / 255;
TweenLite.to(this.wooferConeOuter, 0.001, {css:{scale: (1 + (percVol * 0.05)) }});

// bin 8 : ~301 Hz
percVol = this.dataArray[7] / 255;
TweenLite.to(this.wooferConeMid, 0.001, {css:{scale: (1 + (percVol * 0.1)) }});

// bin 17 : ~689 Hz
percVol = this.dataArray[16] / 255;

notepadwebdev

<div class="cone">
    <div class="cone-outer"></div>
    <div class="cone-mid"></div>
    <div class="cone-inner"></div>
</div>

notepadwebdev

this.analyser.getByteFrequencyData(this.dataArray);

notepadwebdev

onTick() {

    this.raf = requestAnimationFrame(this.onTick.bind(this));
    this.analyser.getByteFrequencyData(this.dataArray);

    // animations go here...
}

notepadwebdev

// Create Analyser
this.analyser = Pizzicato.context.createAnalyser();
this.analyser.fftSize = 1024;
this.bufferLength = this.analyser.frequencyBinCount;
this.dataArray = new Uint8Array(this.bufferLength);

this.LPF.connect(this.analyser);

notepadwebdev

// Set the stereo panner position based on pageX position
// pos value will be between -1 and 1
setPan(e) {
    let pos = (((this.getEvent(e).pageX / $(window).width())*2)-1);
    this.panner.pan = pos;
}

notepadwebdev

// Set the low pass filter based on pageY position
// freq value will be between 0 and 10,000
setLPF(e) {
    let freq = 10000 - ((this.getEvent(e).pageY / $(window).height()) * 10000);
    this.LPF.frequency = freq;
}

notepadwebdev

// Event handlers
onTouchStart(e) {
    e.preventDefault();
    this.drumloop.play();
    this.isPlaying = true;
}

onTouchEnd(e) {
    this.drumloop.stop();
    this.isPlaying = false;

notepadwebdev

// Event Listeners
$('.speaker')
    .on('touchstart mousedown', this.onTouchStart)
    .on('touchmove mousemove',  this.onTouchMove)
    .on('touchend mouseup',     this.onTouchEnd);

notepadwebdev

// Load the audio file for the loop
this.drumloop = new Pizzicato.Sound({
    source: 'file',
    options: {
        path: '/assets/audio/drum-break-99bpm.wav',
        loop: true
    }
});

// Create the Low Pass Filter effect