Question

我正在制作一个草图（在 p5js 中），其中将根据您鼻子的位置播放声音。现在我有两组声音：自然声音和城市声音。我将它们放在不同的功能中，这样自然声音就会在一段时间后开始播放。

现在我不知道如何在一定时间后停止播放城市声音。在此草图中，我尝试调用一个函数，该函数会在几秒钟后停止 makeCITYSounds 函数，但它不起作用。

我复制了一些相关的代码。声音都在播放，很好。我只想在几秒钟后停止 citySounds。

function setup(){
  createCanvas(1500, 1200);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelLoaded);
  poseNet.on('pose', gotPoses);
  //timeout from the start.
  setTimeout(makeNATURESound, 60000);
  setTimeout(makeCITYSound,1000);
  setTimeout(stopCitySound,5000);
}

function makeCITYSound(){
  if(noseX < 50){
    if(!kids_Amsterdam.isPlaying()){
      kids_Amsterdam.play();
    }
  }else if(noseX >= 50 && noseX <100){
      if(!bells.isPlaying()){
        bells.play();
      }
    }else if(noseX >= 100 && noseX <150){
      if(!insideSubway.isPlaying()){
        insideSubway.play();
      }
    }else if(noseX >= 150 && noseX <200){
      if(!subwayStation.isPlaying()){
        subwayStation.play();
      }
    }else if(noseX >= 200 && noseX <250){
      if(!seoulMarket.isPlaying()){
        seoulMarket.play();
      }
    }else if(noseX >=250 && noseX <300){
      if(!onBridge.isPlaying()){
        onBridge.play();
      }
    }else if(noseX >=300 && noseX <350){
      if(!kids_Amsterdam.isPlaying()){
        kids_Amsterdam.play();
      }
    }else if(noseX >=350 && noseX <400){
      if(!insideSubway.isPlaying()){
        insideSubway.play();
      }
    }else if(noseX >=400 && noseX <450){
      if(!fountain.isPlaying()){
        fountain.play();
      }
    }else if(noseX >=450 && noseX <500){
      if(!insects.isPlaying()){
        insects.play();
      }
    }else if(noseX >=500 && noseX <550){
      if(!onBridge.isPlaying()){
        onBridge.play();
      }
    }else if(noseX >=550 && noseX <600){
      if(!birds.isPlaying()){
        birds.play();
      }
    }else if(noseX >=600 && noseX <650){
      if(!insideSubway.isPlaying()){
        insideSubway.play();
      }
    }else if(noseX >=650 && noseX <700){
      if(!kids_Amsterdam.isPlaying()){
        kids_Amsterdam.play();
      }
    }else if(noseX >=700 && noseX <750){
      if(!bells.isPlaying()){
        bells.play();
      }
    }
    setTimeout(makeCITYSound, 1000);
}


function makeNATURESound(){
  fill(255, 255, 255);
  // ellipse(noseX, noseY,10);
  // image(leaf,noseX, noseY,50,50);
  // for(z=0; z<leaf.length; z++){
  //   image(leaf[z], noseX, noseY,50,50);
  // }
  let leaf = random(leafs);
  image(leaf, noseX, noseY,random(50,100),random(50,100));

  if(noseX < 50){
    if(!birds.isPlaying()){
      birds.play();
    }
  }else if(noseX >= 50 && noseX <100){
      if(!insects.isPlaying()){
        insects.play();
      }
    }else if(noseX >= 100 && noseX <150){
      if(!water2.isPlaying()){
        water2.play();
      }
    }else if(noseX >= 150 && noseX <200){
      if(!fountain.isPlaying()){
        fountain.play();
      }
    }else if(noseX >= 200 && noseX <250){
      if(!birdsMorning.isPlaying()){
        birdsMorning.play();
      }
    }else if(noseX >=250 && noseX <300){
      if(!birdsMorning.isPlaying()){
        birdsMorning.play();
      }
    }else if(noseX >=300 && noseX <350){
      if(!autumnLeaves.isPlaying()){
        autumnLeaves.play();
      }
    }else if(noseX >=350 && noseX <400){
      if(!birds.isPlaying()){
        birds.play();
      }
    }else if(noseX >=400 && noseX <450){
      if(!fountain.isPlaying()){
        fountain.play();
      }
    }else if(noseX >=450 && noseX <500){
      if(!insects.isPlaying()){
        insects.play();
      }
    }else if(noseX >=500 && noseX <550){
      if(!autumnLeaves.isPlaying()){
        autumnLeaves.play();
      }
    }else if(noseX >=550 && noseX <600){
      if(!birds.isPlaying()){
        birds.play();
      }
    }else if(noseX >=600 && noseX <650){
      if(!water2.isPlaying()){
        water2.play();
      }
    }else if(noseX >=650 && noseX <700){
      if(!insects.isPlaying()){
        insects.play();
      }
    }else if(noseX >=700 && noseX <750){
      if(!birdsMorning.isPlaying()){
        birdsMorning.play();
      }
    }
  //timeout in between poses.
  setTimeout(makeNATURESound, 1000);
}

function stopCitySound(){
  makeCITYSound().noLoop();
}

感谢您的帮助和时间！

Answer 1

我认为您误解了 noLoop 函数。不幸的是，实际上有几个 noLoop 函数。一个是全局 p5.js 函数，它停止自动调用 draw 函数（参见 documentation）。您尝试调用的更有可能是 instance function on p5.MediaElement。但是，在任何情况下，您尝试调用它的方式都应该导致类似 Cannot read property 'noLoop' of undefined 的错误。这是因为 makeCITYSound 没有返回值。为了使其工作，makeCITYSound 必须返回单个 p5.MediaElement 实例。但这可能也不是您想要做的，因为对 makeCITYSound() 进行新调用然后只停止单个 p5.MediaElement 循环是没有意义的。

  //             \/-- this doesn't make sense
  makeCITYSound().noLoop();

从您共享的代码来看，您并不清楚您对这些 p5.MediaElement 使用了循环，因此很难说最好的方法是什么。如果事情正在循环并且您想停止，则需要在每个 p5.MediaElement 实例（即 bells.noLoop()）上调用 noLoop。如果您想停止播放新的城市声音而不管 noseX 和 noseY 的值如何，那么您需要停止由该函数的最后一行产生的对 makeCITYSounds 的重复调用： setTimeout(makeCITYSound, 1000)。为此，您只需要添加一个局部变量来确定这些调用是否应该继续：

let stopCITYSound = false;
function makeCITYSound() {
  if (stopCITYSound) {
    // Return without playing any new sounds or scheduling another call to makeCITYSound
    return;
  }

  // ... Your existing code
}

function stopCitySound(){
  stopCITYSound = true;
}

设定时间后停止功能

1 个答案: