问加载带有声音板按钮的音频剪辑时出错
EN

Stack Overflow用户

提问于 2022-09-28 12:11:08

回答 1查看 24关注 0票数 1

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);
}

javascript

arrays

button

audio

p5.js

回答 1

Stack Overflow用户

发布于 2022-09-28 16:06:12

正如我在注释中提到的，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.4.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/addons/p5.sound.min.js"crossorigin="anonymous" referrerpolicy="no-referrer"></script>