nao consigo incluir som nenhum

ja tentei colocar som tanto na colisao da raquete com a bolinha quanto tentei o loop e os dois dao o mesmo erro n reconhecendo a funçao seja ela loop ou play.

segue o erro

TypeError: Cannot read properties of undefined (reading 'play')

alguem pode me explicar pq eu faço exatamente igual o do professor e o meu da erro e o dele n? ja n e primeira vez q isso acontece.

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 30;
let raio = diametro / 2 ;
let colidir = false

//velocidade da bolinha
let velocidadeXBolinha = 6
let velocidadeYBolinha = 6

//variaveis da raquete
let xRaquete = 5
let yRaquete = 150
let lRaquete = 10
let aRaquete = 90

//variaveis do bot
let xRaqueteBot = 585
let yRaqueteBot = 150
let velocidadeYBot;

//placar

let pontosDoPai = 0
let pontosDele = 0

//sons do jogo
let batida
let ponto
let trilha

function preloud(){
trilha = loudSound ("trilha.mp3")
ponto = loudSound("ponto.mp3")
batida = loudSound("raquetada.mp3")

}

function setup() {
  createCanvas(600, 400);

}

function draw() { 
  background(0); 
  mostraBolinha()
  movimentaBolinha(); 
  verificaColisaoBorda(); 
  Raquete(xRaquete,yRaquete); 
  Raquete(xRaqueteBot,yRaqueteBot); 
  movimentoMRaquete(); 
  colisao(xRaquete,yRaquete); 
  movimentoBot(); 
  colisao(xRaqueteBot,yRaqueteBot); 
  pontos(); 
 //raquetada();
}

function mostraBolinha(){
  circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function verificaColisaoBorda(){
  if (xBolinha + raio> width ||
     xBolinha - raio< 0){
    velocidadeXBolinha *= -1;
  }
  if (yBolinha + raio> height ||
     yBolinha - raio < 0){
    velocidadeYBolinha *= -1;
  }
}
function Raquete(x,y){

  rect(x,y,lRaquete,aRaquete)
}


function movimentoMRaquete(){

 if (keyIsDown(UP_ARROW)) {
  yRaquete -= 10;
}

 if (keyIsDown(DOWN_ARROW)){
  yRaquete += 10;
}
}
function raquetada(){

if (xBolinha - raio < xRaquete + lRaquete
   && yBolinha - raio < yRaquete + aRaquete && yBolinha + raio > yRaquete){
  xBolinha *= -1;
}
}   
function colisao(x,y){
  colidir = collideRectCircle(x, y, lRaquete, aRaquete, xBolinha, yBolinha, diametro);
  if (colidir){
    velocidadeXBolinha *= -1;
    batida.play()
  }
}

function movimentoBot(){
  velocidadeYBot = yBolinha - yRaqueteBot - lRaquete /2 -30;
  yRaqueteBot += velocidadeYBot
}
function pontos(){ 
  textAlign(CENTER)
  textSize(20)
  fill (color(255,140,0)); 
  rect(180,10,40,20)
  rect(380,10,40,20)
  fill (300);
  text(pontosDoPai, 200, 26)
  text(pontosDele, 400, 26)
if (xBolinha > 585){
    pontosDoPai += 1}
if (xBolinha < 15){
    pontosDele += 1
}}