加载带有声卡按钮的音频剪辑时出现问题

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

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

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

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

此外，noLoop()也很有用，因为你的应用程序中还没有任何动画，所以你不必每秒重复渲染同一张地图图像超过60次。

在下面的例子中，我使用了随机的wikimedia公共剪辑作为音频占位符。你应该在这里使用你的原始文件。

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.6.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>