<div class="canvas"><canvas id="canvas" width="800" height="523"></canvas></div>

canvas {
    background-color: black;
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
var running = false;
var ball = {
  x: 500,
  y: 200,
  vx: 16,
  vy: 4,
  radius: 200,
  color: 'gold',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};
//function clear() {
//  ctx.fillStyle = 'rgba(255,255,255,0.3)';
//  ctx.fillRect(0,0,canvas.width,canvas.height);
//}
function animate() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
  ball.vy = -ball.vy;
  play();
} else {
  stop();
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
  ball.vx = -ball.vx;
  play();
}
  raf = window.requestAnimationFrame(animate);
};
//canvas.addEventListener('mousemove', function(e){
  //if (!running) {
    //clear();
    //ball.x = e.clientX;
    //ball.y = e.clientY;
    //ball.draw();
  //}
//};//);
canvas.addEventListener("mouseover",function(){
  if (!running) {
    window.requestAnimationFrame(animate);
    running = true;
  }
});
canvas.addEventListener("mouseout",function(){
  window.cancelAnimationFrame(raf);
  running = false;
});
//WEB AUDIO PART
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = 'sine';
oscillator.start(0);
var gain = context.createGain();
var mixGain = context.createGain();
gain.gain.value = 0;
function getSample(url, cb) {
  var request = new XMLHttpRequest()
  request.open('GET', url)
  request.responseType = 'arraybuffer'
  request.onload = function() {
    context.decodeAudioData(request.response, cb)
  }
  request.send()
}
getSample('https://dl.dropboxusercontent.com/u/30075450/Greek%207%20Echo%20Hall.wav', function(impulse){
var convolver = context.createConvolver()
var buffer = context.createBufferSource()
convolver.buffer = impulse
// Connections 
oscillator.connect(gain);
gain.connect(convolver);
convolver.connect(mixGain);
gain.connect(mixGain);
mixGain.connect(context.destination);
});
function play() {
  oscillator.frequency.value = Math.random() * (1000 - 100) + 100;
  gain.gain.value = 0.8;
}
function stop() {
  gain.gain.value = 0;
}
ball.draw();