addPhrase() error in p5.sound

FreshMint

I want to use the p5 sound library with p5.Part to play back a composition, but I can't even get it to work properly with the simplest examples. The examples on the p5.js site (like this ) work just fine and throw up no console errors, but if I try to paste this code into my own sketch (obviously using different audio files) it doesn't work. It is loading the files (there is no server issue; I'm hosting it on a local server this is not the problem, and the same thing happens if I actually post it online) because it plays something, but what it plays is a garbled sequence of drums which is slightly different every time the page is loaded. You can see the code below is almost directly from the composition example that works fine on the p5.js site, only with my files and simpler sequences in an effort to get it to work. It should play the low drum four beats, followed by the high drum four beats. It throws the following console error times the length of the sequences (in this case, 8) when I run it:

TypeError: undefined is not an object (evaluating 'phraseArray.length') p5.sound.js:5196

I think this indicates that somehow, when I'm passing boxPat or drumPat to addPhrase(), it's empty/unefined (even though it's clearly defined globally). I'm using the most up-to-date version of both p5.js and the sound library.

Why is this happening? Any ideas or help are greatly appreciated!

var box, drum;
var boxPat = [1,1,1,1,0,0,0,0];
var drumPat = [0,0,0,0,1,1,1,1];
var osc, env;

function preload() {
  box = loadSound('DrumLo.mp3');
  drum = loadSound('DrumHi.mp3');
}

function setup() {
  var myPart = new p5.Part();
  myPart.addPhrase('box', playBox, boxPat);
  myPart.addPhrase('drum', playDrum, drumPat);
  myPart.setBPM(60);
  myPart.start();

  osc = new p5.Oscillator();
  env = new p5.Env(0.01, 1, 0.2, 0);
}

function playBox(playbackRate, time) {
  box.rate(playbackRate);
  box.play(time);
}

function playDrum(playbackRate, time) {
  drum.rate(playbackRate)
  drum.play(time);
}

GoToLoop

http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

GoToLoop

• No idea what the problem is, sorry!
• I've tried those online examples like this 1 here: http://p5js.org/reference/#/p5.SoundFile
• But those "/assets/" files were not loading in all of my browsers but Firefox.
• I've tweaked your code and finally was able to play it on Firefox once.
• I've had to reload the page every time in order to re-run the program though.

// forum.processing.org/two/discussion/10009/addphrase-error-in-p5-sound

function preload() {
  bbox = loadSound('assets/beatbox.mp3'); 
  drum = loadSound('assets/drum.mp3');
}

function setup() {
  const bboxCallback = function(playbackRate, time) {
    bbox.rate(playbackRate);
    bbox.play(time);
  }

  const drumCallback = function(playbackRate, time) {
    drum.rate(playbackRate);
    drum.play(time);
  }

  const bboxPattern = new Uint8Array([1, 1, 1, 1, 0, 0, 0, 0]);
  const drumPattern = new Uint8Array([0, 0, 0, 0, 1, 1, 1, 1]);

  const part = new p5.Part();
  part.addPhrase(null, bboxCallback, bboxPattern);
  part.addPhrase(null, drumCallback, drumPattern);
  part.setBPM(60);
  part.loop();

  const oscl = new p5.Oscillator(440, 'sine');
  const envl = new p5.Env(.01, 1, .2);
  oscl.amp(envl);
  oscl.start();
  envl.play();
}

FreshMint

I seem to have figured out the problem - in Firefox it was throwing an error related to gibber (that didn't appear in Chrome or Safari) which was odd since I wasn't using it, but I was loading the script in my html file (because I had been experimenting with it earlier). This was somehow interfering with the p5 sound library...this is kind of a shame because I was hoping I might be able to use the two together at some point (my impression is that gibber can do more but takes more resources). Before I commented out the gibber load in my .html file, even the code you gave was playing sort of a random cacophony of only the first file loaded, and always throwing that same TypeError.