p5.js音效板按钮绑定音频文件异常问题求助

核心问题 #

你重复定义了多个mousePressed函数，JavaScript里同名函数会被最后一个完全覆盖，不管点击哪个按钮，实际触发的都是最后那个mousePressed的逻辑，这就是音频对应混乱的核心原因。另外还有几个细节问题：

• 部分音频变量（mySound2、mySound3、mySound4）未提前声明，属于隐式全局变量，容易引发意外问题
• 第二个按钮的回调里错误使用了未定义的song变量
• button7未声明变量

修复后的完整代码 #

var scotland;
// 提前声明所有音频变量
let mySound, mySound2, mySound3, mySound4;
// 声明所有按钮变量
var button1, button2, button3, button4, button5, button6, button7;

function preload() {
  scotland = createImg("https://i.redd.it/czyk6caeln921.png");
  mySound = loadSound("audio/1clip.ogg");
  mySound2 = loadSound("audio/2clip.mp3");
  mySound3 = loadSound("audio/3clip.mp3");
  mySound4 = loadSound("audio/4clip.mp3");
}

function setup() {
  createCanvas(700, 900);
  button1 = createButton("Shetland");
  button1.position(600, 100);
  // 给按钮绑定专属的点击回调函数
  button1.mousePressed(() => {
    toggleSound(mySound);
  });

  button2 = createButton("Glasgow");
  button2.position(320, 730);
  button2.mousePressed(() => {
    toggleSound(mySound2);
  });

  button3 = createButton("Aberdeen");
  button3.position(540, 520);
  button3.mousePressed(() => {
    toggleSound(mySound3);
  });

  button4 = createButton("Isle of Lewis");
  button4.position(200, 380);
  button4.mousePressed(() => {
    toggleSound(mySound4);
  });

  button5 = createButton("The Scottish Borders");
  button5.position(400, 800);
  // 后续补充对应音频后，替换为toggleSound(mySound5)即可
  button5.mousePressed(() => {
    console.log("Borders button clicked");
  });

  button6 = createButton("Argyll");
  button6.position(290, 620);
  button6.mousePressed(() => {
    console.log("Argyll button clicked");
  });

  button7 = createButton("Ross Sutherland");
  button7.position(320, 400);
  button7.mousePressed(() => {
    console.log("Ross Sutherland button clicked");
  });

  // Header Text for Map
  var div = createDiv("");
  div.html("Scottish Regions and Accents");
  div.position(60, 80);
  div.style("font-size", "32px");
  div.style("font-family", "Impact"); // 修正原错误的textStyle属性
}

// 封装通用的音频切换函数，避免重复代码
function toggleSound(sound) {
  if (sound.isPlaying()) {
    sound.stop();
  } else {
    sound.play();
  }
}

function draw() {
  background(220);
  scotland.position(0, 0);
  scotland.size(700, 950);
}

关键修改说明 #

1. 移除重复的mousePressed函数：改用p5.js按钮的.mousePressed()方法，给每个按钮绑定专属回调，确保点击不同按钮触发对应音频操作
2. 封装通用切换函数：把重复的播放/停止逻辑抽成toggleSound函数，减少冗余，方便后续维护
3. 补全变量声明：提前声明所有音频和按钮变量，避免隐式全局变量问题
4. 修复细节错误：修正原代码里的样式属性错误，替换未定义的song变量

内容的提问来源于stack exchange，提问作者hvg