Hey there! Let's walk through the issues in your code step by step—there are a few small fixes that should get your music player up and running smoothly.

1. 音频加载时机问题（播放按钮无响应的核心原因） #

Right now you’re loading your sound files directly in setup(), but p5.js might not finish loading them before you click the play button. If you try to call song.play() before the audio file is fully ready, it won’t do anything at all.

The fix here is to use p5.js’s preload() function—it’s designed specifically to load assets like audio, images, etc., before the sketch starts running. Move all your loadSound calls into this function:

let song1, song2, song3, song4, song5;
var track = 1;

function preload() {
  song1 = loadSound('Burn The World Waltz.mp3');
  song2 = loadSound('Le Grande Chase.mp3');
  song3 = loadSound('Mesmerizing Galaxy.mp3');
  song4 = loadSound('Guzheng City.mp3');
  song5 = loadSound('Holiday Weasel.mp3');
}

function setup() {
  createCanvas(500, 250);
  
  // 所有按钮创建的代码保留在这里，不要在setup里加载音频了
  let playButton = createButton('>|');
  playButton.size(100, 100);
  playButton.position(200,150);
  playButton.style('background:green');
  playButton.mousePressed(toggleSong);
  
  let rightButton = createButton('>>|');
  rightButton.size(100, 100);
  rightButton.position(300,150);
  rightButton.style('background:cyan');
  rightButton.mousePressed(right);
  
  let leftButton = createButton('|<<');
  leftButton.size(100, 100);
  leftButton.position(100,150);
  leftButton.style('background:cyan');
  leftButton.mousePressed(left);
}

Also double-check: make sure your audio files are in the exact same folder as your sketch’s HTML file (or adjust the path if they’re in a subfolder, like 'assets/Burn The World Waltz.mp3'). Filenames are case-sensitive too—match the capitalization exactly to what’s in your folder.

2. Track边界错误（导致标题显示undefined） #

Your left() and right() functions don’t stop the track number from going out of the 1-5 range. Right now, clicking left when track is 1 will set it to 0, and clicking right when track is 5 will set it to 6. Since your draw() function only handles tracks 1-5, the title variable stays undefined, which is why you see that error. Fix the conditionals to clamp the track number:

function left() {
  if (track > 1) { // 只有当track大于1时才减1
    track -= 1;
  }
}

function right() {
  if (track < 5) { // 只有当track小于5时才加1
    track += 1;
  }
}

3. 容易遗漏的p5.sound库引入 #

Make sure you’ve added the p5.sound library to your HTML file—without it, the loadSound() function won’t exist at all. Add this line right after your p5.js script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>

可选：添加加载反馈（方便调试） #

If you want to confirm your audio files are loading correctly, you can add a callback to each loadSound call to log when a file is ready:

song1 = loadSound('Burn The World Waltz.mp3', () => {
  console.log("Song 1 loaded successfully!");
});

This will help you spot if a specific file is failing to load.

Putting all these fixes together should get your play button working and stop the undefined title issue. Let me know if you hit any other snags!

备注：内容来源于stack exchange，提问作者user29731287