时间戳

首页 > 解决方案 > P5JS 声音仅在我离开活动选项卡时播放

javascript - P5JS 声音仅在我离开活动选项卡时播放

问题描述

我正在尝试编写代码，以便当 rect() 达到某个点时，将开始播放歌曲。我的实际代码有问题，所以我开始了一个新的测试文件来处理它并尝试让它工作（我的实际 js 文件很长，我想要一些简短而简单的东西）但我只是遇到了问题再次。

代码应该可以工作，所以如果按下鼠标，左边的方块会滑到右边的方块上，当它碰到右边的方块时，歌曲就会播放。如果再次单击鼠标，歌曲将停止。

我已经完成了大部分工作，但是当我添加时麻烦就来了

if ( backtoblack.isPlaying() ) {
    backtoblack.stop();
  } else {
    backtoblack.play();
  }

这是草图的完整代码：

var backtoblack;
var rect1X = 20;
var speed = 1;
var mouseWasPressed; 


function preload(){

    backtoblack = loadSound('assets/backtoblack.mp3');
}


function setup() {

    createCanvas(590,630);
    background("#704e34");
}


function draw(){

    fill("#fff");

    rect(rect1X, 20, 120, 120);

    rect(450, 20, 120, 120);

    if (mouseWasPressed == true ) {

        if(rect1X <= 390){

            rect1X += speed;
        }
    }

    if ( backtoblack.isPlaying() ) {
        backtoblack.stop();
    } else {
        backtoblack.play();
    } 
}  

function mousePressed(){
    mouseWasPressed = true;
}

标签： javascriptp5.js

解决方案

问题是您if else切换歌曲是否正在播放的块在draw()函数内部。这意味着每秒 60 次，您切换歌曲！就像您不断地按播放和停止按钮一样。然后，当您切换选项卡时，该draw()功能会暂停，这就是它停止切换的原因。

要解决您的问题，您不需要每帧都切换歌曲。也许把它放在mousePressed()函数里面来测试一下。

退后一步，我还鼓励您调试代码（该指南适用于处理，但这里是关于 JavaScript 的指南）。将一个较小的示例程序放在一起进行测试真的很棒，但是您还应该尝试逐行执行代码，或添加打印语句，以弄清楚发生了什么。单步执行或添加打印语句会帮助您了解发生了什么。

无论如何，祝你好运！

推荐阅读