Audio that loops and distorts

Processing Libraries
1

I’m having trouble finding the correct parameters to make a button that produces a sound so I went with if key == x do this. When the audio plays it doesn’t stop and gets distorted. How do I fix it? The code in /* */ is an attempt to make a button that didn’t work.

import processing.sound.*;
SoundFile dog;
SoundFile elephant;
SoundFile sheep;
SoundFile drum;
SoundFile piano;
SoundFile trumpet;
float xplacement = 100;
float mousex = mouseX;
float mousey = mouseY;
float width0 = width;
float height0 = height;
boolean clicked = false;
void setup() {
  size(800, 800);
  dog = new SoundFile(this, "dog.mp3");
  elephant = new SoundFile(this, "elephant.mp3");
  sheep = new SoundFile(this, "sheep.mp3");
  trumpet= new SoundFile(this, "trumpet.mp3");
  drum = new SoundFile(this, "drum.mp3");
  piano = new SoundFile(this, "piano.mp3");
}

void draw() {

  instrunment();
  animal();
  shapes();
  stop0();
}

/*void player() {
 if (mouseX<width/4 && mouseY <height/4 && mouseX >100 && mouseY > 100) {
 if (clicked) {
 dog.play();
 }
 if (mousePressed) {
 clicked = !clicked;
 }
 else{
 stop();
 }
 }
 }
 */
void animal() {
  if (key =='d') {
    dog.play();
  }
  if (key == 'e') {
    elephant.play();
  }
  if (key == 's') {
    sheep.play();
  }
}

void shapes() {
  textSize(40);
  text("Dog", 100, 100);
  ellipse(xplacement, 100, width/4, height/4);
  ellipse(xplacement+270, 100, width/4, height/4);
  ellipse(xplacement+550, 100, width/4, height/4);

  ellipse(xplacement, 300+20, width/4, height/4);
  ellipse(xplacement+270, 300+20, width/4, height/4);
  ellipse(xplacement+550, 300+20, width/4, height/4);
}

void instrunment() {
  if (key == 'p') {
    piano.play();
  }
  if (key == 't') {
    trumpet.play();
  }
  if (key == 'b') {
    drum.play();
  }
}

void stop0(){
 if(key == 'x'){
  pause(); 
 }
}```