jquery - 用 JavaScript 和 jQuery 制作的吉他弦不会再弹了

Question

我一直在尝试制作带有声音的吉他弦动画，到目前为止，我已经让线条轻弹并上下移动以模拟吉他弦弹拨，但由于某种原因，我无法让它做两次。我的意思是我第一次将鼠标悬停在它应该起作用的弦上，但第二次我将鼠标悬停在它上面只是声音播放，但弦不会重复向上/向下运动。这是字符串的代码：

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.moveTo(0, 5);
  context.bezierCurveTo(0, 5, 250, 5, 500, 5);

  context.strokeStyle = '#00DFFF';
  context.stroke();
  var a=5; var interv = null;

  $(document).ready(function(){
    var beepOne = $("#beep-one")[0];
    $("#myCanvas")
      .mouseenter(function() {
        beepOne.play();
        interv = setInterval(pluck, 50);
      });
    });

    function pluck() {
          var x=5;
          if(a>0) a-=0.1; else if(a==0){ unpluck; a=5;} else a+=0.1;
          a=a*-1;
          x=x+a;
          canvas.width = canvas.width;
          context.moveTo(0, 5);
          context.bezierCurveTo(0, 5, 250, x, 500, 5);
          context.strokeStyle = '#00DFFF';
          context.stroke();
        }

  function unpluck() {
      clearInterval(interv);
  }

有人可以帮助解决这个问题吗？