Javascript p5js中的音频文件循环_Javascript_P5.js

Javascript p5js中的音频文件循环

javascript

Javascript p5js中的音频文件循环,javascript,p5.js,Javascript,P5.js,首先，我想对所有在这个网站上帮助我的人说声谢谢。它真的帮助了我对javascript的信心我正在构建一个音频/视频应用程序，该应用程序应该在用户每次单击时播放不同的声音。每次用户单击时，动画也会重新启动，以此类推。我的问题是，我计划插入5-10个我自己设计的声音，我希望它们在每次点击时循环。意思是点击一下，soun1播放。再次单击，将播放声音2。所以在我看来，我应该用一组声音创建一个for循环。这个想法很简单，但我不知道如何在vanilla js中实现这一点，更不用说p5了。我正在使用p5，因

首先，我想对所有在这个网站上帮助我的人说声谢谢。它真的帮助了我对javascript的信心

我正在构建一个音频/视频应用程序，该应用程序应该在用户每次单击时播放不同的声音。每次用户单击时，动画也会重新启动，以此类推。我的问题是，我计划插入5-10个我自己设计的声音，我希望它们在每次点击时循环。意思是点击一下，soun1播放。再次单击，将播放声音2。所以在我看来，我应该用一组声音创建一个for循环。这个想法很简单，但我不知道如何在vanilla js中实现这一点，更不用说p5了。我正在使用p5，因为我以后可能想添加音频效果。无论如何，这是我在下面尝试过的。我可以很好地播放一个声音，感觉自己走在正确的轨道上，但我不断地出现错误，例如.play（）没有定义

我知道下面的语法在循环区域中是wayyy off。我刚开始把所有东西都扔到墙上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="resources\p5.js"></script>
    <script src="resources\p5.dom.js"></script>
    <script src="resources\p5.sound.js"></script>
    <script type="text/javascript" src="js\app.js"></script>
    <link rel="stylesheet" href="css\style.css">
    <title>Breathe</title>
</head>
<body>

</body>
</html>



    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    } 



    let outerDiam = 0;
    let cnv;
    let px;
    let py;
    let bgColor;
    let sound1;
    let sound2;
    let sound3;
    let sound4;
    let sound5;
    let allSounds;

    function centerCanvas() {
      let x = (windowWidth - width) / 2;
      let y = (windowHeight - height) / 2;
      cnv.position(x, y);
    }

    function setup() { 
      sound1 = loadSound('https://www.dl.dropboxusercontent.com/s/hkg7jnhfwic842j/bubbles.mp3?dl=0', loaded);
      sound2 = loadSound('https://www.dl.dropboxusercontent.com/s/9el41r25exizbwl/clay.mp3?dl=0', loaded);
      sound3 = loadSound('https://www.dl.dropboxusercontent.com/s/8o5rgfknx0do8ps/confetti.mp3?dl=0', loaded);
      sound4 = loadSound('https://www.dl.dropboxusercontent.com/s/g5auzxd6lkk522a/corona.mp3?dl=0', loaded);
      sound5 = loadSound('https://www.dl.dropboxusercontent.com/s/pc73ig27wmmnc4l/dotted-spiral.mp3?dl=0', loaded);
      cnv = createCanvas(windowWidth, windowHeight);
      cnv.style('display', 'block');
      centerCanvas();
      bgColor = random(150, 255);
    } 

    function loaded() {
      console.log('song is loaded');
    }

    function windowResized() {
      centerCanvas();
    }

    function draw() { 
      background(bgColor);
      for (let i = 0; i < 5; i++){
        let diam = outerDiam - 30 * i;  
      if (diam > 0) {
        let fade = map(diam, 0, width, 0, 255);
          stroke(fade);
          noFill();
          ellipse(px, py, diam);
      }
    } 
        outerDiam = outerDiam + 2;
    }

    function mousePressed() {
      outerDiam = 0;
      px = random(width);
      py = random(height);
      bgColor = random (150, 255);

    //  if (!sound1.isPlaying()) {
    //     sound1.play();
    //     sound1.play();
    // } else {
    //     sound1.pause();
    // }
     allSounds = [sound1, sound2, sound3, sound4, sound5];
     let newSound = [];
     for (let i = 0; i < allSounds.length; i++) {
       allSounds[i].push(newSound);
       allSounds[i].play();
      }
    }


呼吸
* {
保证金：0；
填充：0；
框大小：边框框；
} 
设outerDiam=0；
让cnv；
让px；
让py；
让我们的颜色；
让声音1；
让声音2；
让声音3；
让声音4；
让声音5；
让所有的声音；
函数centerCanvas（）{
设x=（windowWidth-width）/2；
设y=（窗高-高度）/2；
cnv.位置（x，y）；
}
函数设置（）{
sound1=加载声音（'https://www.dl.dropboxusercontent.com/s/hkg7jnhfwic842j/bubbles.mp3?dl=0",上载),；
sound2=加载声音（'https://www.dl.dropboxusercontent.com/s/9el41r25exizbwl/clay.mp3?dl=0",上载),；
sound3=加载声音（'https://www.dl.dropboxusercontent.com/s/8o5rgfknx0do8ps/confetti.mp3?dl=0",上载),；
sound4=加载声音（'https://www.dl.dropboxusercontent.com/s/g5auzxd6lkk522a/corona.mp3?dl=0",上载),；
sound5=加载声音（'https://www.dl.dropboxusercontent.com/s/pc73ig27wmmnc4l/dotted-spiral.mp3?dl=0",上载),；
cnv=createCanvas（窗口宽度、窗口高度）；
cnv.样式（“显示”、“块”）；
centerCanvas（）；
bgColor=random（150255）；
} 
函数加载（）{
log（'歌曲已加载'）；
}
函数windowResized（）{
centerCanvas（）；
}
函数draw（）{
背景色；
for（设i=0；i<5；i++）{
设直径=外径-30*i；
如果（直径>0）{
让淡入淡出=贴图（直径，0，宽度，0，255）；
笔划（淡入淡出）；
noFill（）；
椭圆（px，py，直径）；
}
} 
outerDiam=outerDiam+2；
}
函数mousePressed（）{
外层=0；
px=随机（宽度）；
py=随机（高度）；
bgColor=random（150255）；
//如果（！sound1.isPlaying（））{
//声音1.播放（）；
//声音1.播放（）；
//}其他{
//声音1.暂停（）；
// }
allSounds=[sound1，sound2，sound3，sound4，sound5]；
让newSound=[]；
for（设i=0；i

不是P5专家，但您可以使用普通Javascript，使用

音频

类：

var audio = new Audio("path/to/audio");
audio.loop = true; //loop
audio.play(); //play

然后，每当您要更改轨迹时：

audio.pause(); //stop playing old track
audio.currentTime = 0; //rewind
audio.src = "path/to/new_track" //change track
audio.play() //play

修复您的代码示例或更好地创建代码段。不太确定如何执行此操作。当我尝试的时候，它只是把所有的东西放在一起。谢谢你。是的，如果我不能用p5库解决这个问题，我会尝试香草。问题是，我将无法访问音频效果。此外，我是否应该将所有这些都放在单独的单击功能中？这会和动画一起工作吗？