title: addEventListener sound on click
body: <p>What I want to do is an 'addEventListener' function. When the canvas is clicked and the raindrop appears, a sloshing sound is made. So no matter how many times you click, the sound will always play. </p>
  
  <p>I had no idea what it was called and my professor suggested it. However, when I combed the google, all I find is button clicks or Jquery things. I don't want a button and I am not allowed to use Jquery.</p>
  
  <p>As always, I only seek a push in the right direction.</p>
  
  <p>Thanks for all the help you all have given me thus far. </p>
  
  <pre><code>var canvas;
  var context;
  var drops = [];
  var squares = [];
  
  
  function Drop(x,y,color){
      this.x = x;
      this.y = y;
      this.color = color;
      this.dy = Math.random();
  }
  
  
  function Square(x,y,w,color){
      this.sx = x;
      this.sy = y;
      this.sw = w;
      this.color = color;
      this.qy = Math.random();
  }
  
  function init(){
      canvas = document.getElementById('canvas');
      context = canvas.getContext('2d');
  
      alert("Hello!\nClick on the screen for rain drops!");
  
      window.addEventListener('resize', resizeCanvas, false);
      window.addEventListener('orientationchange', resizeCanvas, false);
      resizeCanvas();
      canvas.onclick = function(event){
          handleClick(event.clientX, event.clientY);
      };
      setInterval(handleClick,5);
  
  
  
  }
  function handleClick(x,y,w){
      var found = false;
      for(var i = 0; i&lt;drops.length; i++){
          d = Math.sqrt((drops[i].x-x)*(drops[i].x-x) + (drops[i].y-y)*(drops[i].y-y));
          if(d&lt;=5){
              drops.splice(i,1);
              found = true;
          }
  }
  
      fillBackgroundColor();
      if(!found){
      var colors = ["#000080", "#add8e6", "blue"];
          var color = colors[Math.floor(Math.random()*colors.length)];
          drops.push(new Drop(x,y,color));
          squares.push(new Square(x,y,w,color));
  
      }
  
              for(var i = 0; i&lt;drops.length; i++){
          drawDrop(drops[i]);
  }
                  for(var i = 0; i&lt;squares.length; i++){
          drawSquare(squares[i]);
  }
  
  }
  
  
  function drawDrop(drop){
      context.beginPath();
      context.arc(drop.x, drop.y, 5, 0, Math.PI);
      context.fillStyle = drop.color;
      context.moveTo(drop.x - 5, drop.y);
      context.lineTo(drop.x, drop.y - 7);
      context.lineTo(drop.x + 5, drop.y);
      context.closePath();
      context.fill();
      if (drop.y + drop.dy &gt; canvas.height || drop.y + drop.dy &lt; 0)
          drop.dy != -drop.dy;
      drop.y += drop.dy;
  };
  
  
  function drawSquare(square){
      var sw = Math.floor(4);
      var sx = Math.floor(Math.random() * canvas.width);
      var sy = Math.floor(Math.random() * canvas.height);
      context.beginPath();
      context.rect(sx, sy, sw, sw); 
      context.fillStyle = '#add8e6';
      context.fill();
  
  };
  
  
  
  
  function fillBackgroundColor(){
      context.fillStyle = 'gray';
      context.fillRect(0,0,canvas.width,canvas.height);
  }
  function resizeCanvas(){
      canvas.width = window.innerWidth - 20;
      canvas.height = window.innerHeight - 20;
      fillBackgroundColor();
      for(var i = 0; i&lt;drops.length; i++){
          drawDrop(drops[i]);
      }
  
              for(var i = 0; i&lt;squares.length; i++){
          drawSquare(squares[i]);
      }
  
  
  
  }
  
  function degreesToRadians(degrees) {
          return (degrees * Math.PI)/180;
      }
  window.onload = init;
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id='canvas' width=500 height=500&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  </code></pre>