I think it might related to the p5-sound library as it’s the only place where I’ve found arraySequence[0].
I’ve looked around and tried to figure it out but can’t find anything.
The web app is actually working ok, so I am not sure what the error is about and if it might be related to other things.
Anyone with the same issue or with any info on this?
Hi @slow_izzm, thanks for replying.
I didn’t post the code because it’s too long and I wouldn’t know which part is relevant to be honest. I’ve extracted the code relative to the audio part (here) and it works fine, no errors in the console. However, the only arraySequence[0] available in my scripts is in the ps5-sound library, I think it relates to the buffer (here). So it should be that, crashing with some other thing in the code, no idea what.
The app works just fine a part from this error in the console which exists only in Firefox.
I was just wondering if anyone encountered a similar problem or had a hint to what I could look at to start debugging. It’s more about curiosity at this point.
I am getting the same error with Firefox 77 and 78, but not 75 (on Linux if that matters). In my case I can easily reproduce it already with the sample code in https://p5js.org/reference/#/p5.Amplitude, and in fact it breaks the functionality of that example: while a sound plays after clicking the canvas, the size of the ellipse does not change at all. @antocreo can you check if you also see that behaviour? I will keep you posted if I figure out where the problem lies.
@siJ2ZeL1qI1wA yes, I do. In my Firefox I don’t actually see the ellipse, I guess it stays at radius 0.
Sounds works fine but no ellipse. Same error. Thanks for spotting that out.
I checked this out, I didn’t have the audio so I pointed to some archived sounds and everything worked just fine … never threw an error.
I did notice a couple of things … one being your eventListener onended() being registered every time you invoke playMusic() … this only needs to be registered once (unless you deregister and need to register again), so I would move it intosetup()
const tracks = [],
sng_src = ['https://ia800702.us.archive.org/6/items/cd_tee-vee-toons-the-commercials_various-artists-ajax-cleanser-ajax-laundry/disc1/01.%20Kellogg%27s%20Rice%20Krispies%20-%20Snap%2C%20Crackle%2C%20Pop%20%5BKellogg%27s%20Rice%20Krispies%5D_sample.mp3',
'https://ia800702.us.archive.org/6/items/cd_tee-vee-toons-the-commercials_various-artists-ajax-cleanser-ajax-laundry/disc1/02.%20Chiquita%20Bananas%20-%20I%27m%20A%20Chiquita%20Banana_sample.mp3'
];
let trackCounter = 0,
page = 'click';
function preload() {
for (let i = 0; i < sng_src.length; i++) {
tracks.push(createAudio(sng_src[i]));
}
}
function setup() {
createCanvas(512, 512);
noStroke();
textSize(50);
textAlign(CENTER, CENTER);
shuffle(tracks, true);
for (let t of tracks) t.onended(playNext);
}
function draw() {
background(255);
checkPageState();
}
const checkPageState = _ => {
switch (page) {
case 'click':
text(page, width / 2, 50);
fill(0);
ellipse(width / 2, 200, 100, 100);
break;
case 'track':
text(page + " " + trackCounter, width / 2, 50);
fill(0, 255, 120);
ellipse(width / 2, 200, 100, 100);
break;
}
}
function playMusic() {
tracks[trackCounter].play();
}
function playNext() {
tracks[trackCounter = (trackCounter + 1) % tracks.length].play();
}
function mouseReleased() {
switch (page) {
case 'click':
playMusic();
page = 'track';
break;
case 'track':
tracks[trackCounter].stop();
playNext();
break;
}
}
Just ran into this issue as well while testing Firefox (no problem in Chrome or Safari) and have potentially isolated it to the getLevel() function, specifically in the latest p5.sound version 0.3.12 (the editor.p5js.org links a CDN of version 0.3.11, which doesn’t have this issue).
Here’s an example to test in various browsers. The equalizer at the bottom works in all, but a getlevel() reactive ellipse doesn’t appear in Firefox (with size of 0). You can toggle the two p5.sound versions to compare within index.html
Hi @slow_izzm, thanks for spotting that. That code is actually extracted (quickly) from a larger one and in the final one I do need to access that function multiple times, but you are right, in that code it works better your way
The thing is that even with the error, my app works just fine. or so it seems. I am more curious about this error rather than actually wanting to sort it out.