loading... infinito

a partir do momento que acrescentei a function preload, o negócio desandou.. o jogo não carrega mais, no preview fica uma tela branca com um "loading" eterno lá.

já verifiquei o nome dos arquivos, inclusive tentei renomear o arquivo e tentei também adaptar na função para o nome do arquivo como estava "._trilha.mp3", sem sucesso.

vou deixar o código completo: obs: tentei apenas com a trilha, nem incluí as lógicas de ponto e da raquetada ainda.. queria resolver o som pra poder ver tudo funcionando

//tamanhos e medidas

  //bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 22;
let raio = diametro / 2;

  //raquetes
let alturaRaquetes = 70;
let larguraRaquetes = 10;
let xRaqueteEsquerda = 10;
let yRaqueteEsquerda = 162;
let xRaqueteDireita = 580;
let yRaqueteDireita = 162;

//movimento

  //bolinha
let velocidadeXbolinha = 6;
let velocidadeYbolinha = 6;

  //raquetes
let velocidadeYraqueteDireita;

  //placar
let pontosEsquerda = 0;
let pontosDireita = 0;

  //sons do jogo
let raquetada;
let ponto;
let trilha;

function preload(){
  trilha = loadSound("trilha.mp3");
  //ponto = loadSound("._ponto.mp3");
  //raquetada = loadSound("._raquetada.mp3");
}

function setup() {
  createCanvas(600, 400);
  trilha.play();
}

function draw() {
  background(0);
  mostraBolinha();
  mostraRaquetes();
  moveBolinha();
  moveRaqueteEsquerda();
  moveRaqueteDireita();
  verificaColisaoRaquete(xRaqueteEsquerda, yRaqueteEsquerda);
  verificaColisaoRaquete(xRaqueteDireita, yRaqueteDireita);
  mostraPlacar();
  marcaPonto();
}

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

function mostraRaquetes(){
  rect(xRaqueteEsquerda, yRaqueteEsquerda, larguraRaquetes, alturaRaquetes);
  rect(xRaqueteDireita, yRaqueteDireita, larguraRaquetes, alturaRaquetes);  
}

function moveBolinha(){
  xBolinha += velocidadeXbolinha;
  yBolinha += velocidadeYbolinha;

  if (xBolinha + raio > width || 
      xBolinha - raio < 0 ){
    velocidadeXbolinha *= -1;
  }

  if (yBolinha + raio > height || 
      yBolinha - raio <0){
    velocidadeYbolinha *= -1;
  }
}

function moveRaqueteEsquerda(){
  if (keyIsDown(87)){ //TECLA W
    yRaqueteEsquerda -= 10;
  }
  if (keyIsDown(83)){ //TECLA S
    yRaqueteEsquerda += 10;
  }
  if (yRaqueteEsquerda < 0){
    yRaqueteEsquerda = 0;
  }
  if (yRaqueteEsquerda > height - alturaRaquetes){
    yRaqueteEsquerda = height - alturaRaquetes;
  }
}

function moveRaqueteDireita(){
  /*if (keyIsDown(UP_ARROW)){
    yRaqueteDireita -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yRaqueteDireita += 10;
  }*/

  velocidadeYraqueteDireita = yBolinha - yRaqueteDireita - alturaRaquetes / 2 - 30;
    yRaqueteDireita += velocidadeYraqueteDireita

  //yRaqueteDireita = yBolinha - 80;
  if (yRaqueteDireita < 0){
    yRaqueteDireita = 0;
  }
  if (yRaqueteDireita > height - alturaRaquetes){
    yRaqueteDireita = height - alturaRaquetes;
  }
}

function verificaColisaoRaquete(x, y){
  colidiu = collideRectCircle(x, y, larguraRaquetes, alturaRaquetes, xBolinha, yBolinha, raio);
  if (colidiu){
    velocidadeXbolinha *= -1;
  }
}

function mostraPlacar(){
  stroke(255);
  textSize(20);
  textAlign(CENTER);
  fill(color(255,140,0));
  rect(150, 10, 40, 25);
  rect(450, 10, 40, 25);
  fill(255);
  text(pontosEsquerda, 170, 30);
  text(pontosDireita, 470, 30);

}

function marcaPonto(){
  if (xBolinha > 590){
    pontosEsquerda += 1;
  }
  if (xBolinha < 10){
    pontosDireita +=1;
  }

}