使用音板按钮加载音频剪辑时出现问题

Question

https://editor.p5js.org/hvgrajciar/full/KIOn1sX6h

我在让这些音频文件与我的音板贴图一起使用时遇到问题。我想将每个音频文件附加到地图上相应的按钮，但每次我加载另一个音频文件时，它都会弄乱其他音频文件和它们所附加的按钮。

例如，我将在预加载中加载第二个音频文件后按下第一个音频按钮，第一个音频按钮将开始播放第二个音频文件而不是第一个。即使我已尽力将按钮声明为变量，这些变量附加到将在按下按钮时播放正确音频文件的函数，也会发生这种情况。

这是我与 p5js 的第一个任务，我觉得我真的很接近，但我错过了一些重要的东西。

var scotland;
let mySound;
var button1;
var button2;
var button3;
var button4;
var button5;
var button6;

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);
  button2 = createButton("Glasgow");
  button2.position(320, 730);
  button3 = createButton("Aberdeen");
  button3.position(540, 520);
  button4 = createButton("Isle of Lewis");
  button4.position(200, 380);
  button5 = createButton("The Scottish Borders");
  button5.position(400, 800);
  button6 = createButton("Argyll");
  button6.position(290, 620);
  button7 = createButton("Ross Sutherland");
  button7.position(320, 400);

  // Header Text for Map
  var div = createDiv("");

  div.html("Scottish Regions and Accents");
  div.position(60, 80);
  div.style("font-size", "32px");
  div.style("textStyle", "Impact");
}

function mousePressed(button1) {
  if (mySound.isPlaying()) {
    // .isPlaying() returns a boolean
    mySound.stop();
  } else {
    mySound.play();
  }
}

function mousePressed(button2) {
  if (mySound2.isPlaying()) {
    // .isPlaying() returns a boolean
    song.stop();
  } else {
    mySound2.play();
  }
}

function mousePressed(button3) {
  if (mySound3.isPlaying()) {
    // .isPlaying() returns a boolean
    mySound3.stop();
  } else {
    mySound3.play();
  }
}

function mousePressed(button4) {
  if (mySound4.isPlaying()) {
    // .isPlaying() returns a boolean
    mySound4.stop();
  } else {
    mySound4.play();
  }
}

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

Answer 1

正如我在 cmets 中提到的，function mousePressed() {} 是一个全局函数，而不是每个按钮的处理程序。参数名称并不像您想象的那样将其作为处理程序附加到该按钮变量。

将侦听器附加到特定元素的正确方法是调用Element.mouseClicked(handlerFunc)（或mousePressed）。

虽然这不是主要问题，但通过使用包含按钮原始数据的对象数组而不是一堆松散变量，您的代码会得到很大改进。当您遍历它的元素以对每个元素应用相同的逻辑时，数组的力量就会发挥作用，从而减少代码重复。

此外，noLoop() 很有用，因为您的应用程序中（目前）还没有任何动画，因此您无需循环重复渲染相同的地图图像每秒 60 多次。

在下面的示例中，我使用了随机的维基媒体共享剪辑作为音频占位符。你应该在这里使用你的原始文件。

const buttons = [
  {text: "Shetland", x: 600, y: 100, clip: "https://upload.wikimedia.org/wikipedia/commons/2/22/30_second_sample_of_Agnus_Dei_by_Ernesto_Herrera%2C_performed_by_BYU_Singers.ogg"},
  {text: "Glasgow", x: 320, y: 730, clip: "https://upload.wikimedia.org/wikipedia/en/d/d3/Aphex_Twin%2C_Green_Calx%2C_1992.ogg"},
  {text: "Aberdeen", x: 540, y: 520, clip: "https://upload.wikimedia.org/wikipedia/en/8/8a/AphexTwin4.ogg"},
  {text: "Isle of Lewis", x: 200, y: 300, clip: "https://upload.wikimedia.org/wikipedia/en/7/7d/Aphex_Twin_-_XMAS_EVET10_sample.ogg"},
  {text: "The Scottish Borders", x: 400, y: 800, clip: "https://upload.wikimedia.org/wikipedia/en/9/9b/Excerpt_of_F%C3%BCnf_geistliche_Lieder_f%C3%BCr_Sopran_und_f%C3%BCnf_Instrumente%2C_Op._15%2C_V._Fahr_hin%2C_o_Seel%2C_zu_deinem_Gott%3B_Anton_Webern%2C_composer%2C_1917%3B_Peter_Rosegger%2C_poet%2C_1900%3B_and_Halina_Lukomska%2C_soprano_and_Pierre_Boulez%2C_conductor%2C_1969.ogg"},
  {text: "Argyll", x: 290, y: 620, clip: "https://upload.wikimedia.org/wikipedia/en/8/81/Messiaen-ascension-3-latry.ogg"},
  {text: "Ross Sutherland", x: 320, y: 400, clip: "https://upload.wikimedia.org/wikipedia/en/d/d5/Messiaen-livre-7-soixante.ogg"},
];
let scotland;

function preload() {
  buttons.forEach(e => {
    e.clip = loadSound(e.clip);
  });
  scotland = createImg(
    "https://i.redd.it/czyk6caeln921.png",
    "Image of Scotland"
  );
}

function setup() {
  createCanvas(700, 900);
  buttons.forEach(e => {
    e.button = createButton(e.text);
    e.button.position(e.x, e.y);
    e.button.mouseClicked(() => {
      e.clip.isPlaying() ? e.clip.stop() : e.clip.play();
    });
  });

  // Header Text for Map
  const d = createDiv("Scottish Regions and Accents");
  d.position(60, 80);
  d.style("font-size", "32px");
  d.style("textStyle", "Impact");

  scotland.position(0, 0);
  scotland.size(700, 950);

  noLoop();
}

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