Issues with loading sound using p5sound #100

kyavichev · 2025-09-16T22:53:50Z

kyavichev
Sep 16, 2025

I have used react-p5-wrapper for years in my nextjs website. I was able to import p5 sound into it with no issues. Recently, I decided to update some libraries and saw that react-p5-wrapper has been depricated and instead we should use @p5-wrapper/next. So, I swapped out libraries and most of my sketches work just fine. But all the ones that use p5 sound library fail. Basically loadSound function is not found on the p5 instance. I looked at dozen of websites and I tried all the different solution, but I just can't get it to work. Please help!

import { useEffect, useState } from "react";
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import { Sketch } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";
import p5Types from "p5";

// import p5 from "p5";
// (window as any).p5 = p5;
// import "p5/lib/addons/p5.sound";

const sketch: Sketch = (p5Inst) => {
	let song: p5Types.SoundFile;
  	let button: p5Types.Element;

  	p5Inst.setup = async () => {

		console.log("sketch setup");
		console.log("p5Inst");
		console.log(p5Inst);

		p5Inst.createCanvas(600, 400, p5Inst.WEBGL);
		p5Inst.background(255, 0, 0);
		button = p5Inst.createButton("Toggle audio");

		button.mousePressed(() => {
			if (!song) {
				const songPath = "/tracks/Ankon_Anubis.mp3";
				song = p5Inst.loadSound(
					songPath,
					() => { song.play(); },
					() => { console.error( `Could not load the requested sound file ${songPath}` ); }
				);
				return;
			}

			if (!song.isPlaying()) {
				song.play();
				return;
			}

			song.pause();
		});
  	};

  	p5Inst.draw = () => {
		p5Inst.background(250);
		p5Inst.normalMaterial();
		p5Inst.push();
		p5Inst.rotateZ(p5Inst.frameCount * 0.01);
		p5Inst.rotateX(p5Inst.frameCount * 0.01);
		p5Inst.rotateY(p5Inst.frameCount * 0.01);
		p5Inst.plane(100);
		p5Inst.pop();
  	};
};


function renderP5()
{
	const width = 600;
	const height = 600;

	return <NextReactP5Wrapper sketch={sketch}/>
}


export default function Bar() {

	const [isSSR, setIsSSR] = useState(true);
	const [ready, setReady] = useState(false);

	useEffect(() => {
		console.log("useEffect 1");
		setIsSSR(false);
	}, []);

	useEffect(() => {

		console.log("useEffect 2");

		const initP5 = async () => {
			const p5 = (await import("p5")).default;
			(window as any).p5 = p5;
			await import("p5/lib/addons/p5.sound.js");
			//await import('../source/lib/p5.sound');

			console.log("Sound was loaded!");
			console.log(p5);

			setReady(true);
		}

		initP5();
		console.log("Sound loading...");

	}, [isSSR]);

	return (
		<Layout home>
			<Head>
				<title>{siteTitle}</title>
			</Head>

			{ready && (
				<section>
					<center>
						{renderP5()}
					</center>
				</section>
			)}
		</Layout>
	)
}

I am using next version 14.2.32, @p5-wrapper/next version 1.0.3 and @p5-wrapper/react version 4.4.2, p5 version 1.11.10. I did not want to upgrade to next 15 due to the router changes. I am hoping that does not matter.

Can someone help me with this? I am lost.

Update 1: I noticed that the window object has a property p5, it has a prototype and that has function loadSound. This function does not seem to appear on the p5 object itself even after loading p5, setting window.p5 to it and then loading sound library.
If I do call window.p5.prototype.loadSound I get errors once the sound is getting played. In Firefox I get this:

InvalidStateError: AudioWorkletNode constructor: Unknown AudioWorklet name 'sound-file-processor'

In Safari, from AudioWorkletNode:

InvalidStateError: No ScriptProcessor was registered with this name

In Brave (and I assume Chrome):

InvalidStateError: Failed to construct 'AudioWorkletNode': AudioWorkletNode cannot be created: AudioWorklet does not have a valid AudioWorkletGlobalScope. Load a script via audioWorklet.addModule() first.

It is exact same library version as I used previously and the same as the one that gets included in the latest p5 version. So, I assume it has something to do with my React / Nextjs / p5 setup.

Update 2: Digging around a bit more I noticed that p5 that I load within useEffect has a version 1.11.10 and that does have loadSound on the prototype. The version on the instance is 1.9.4 and that does not have loadSound. Where does that version come from? When I run npm ls p5 it shows that I have version 1.11.10 installed and p5-wrapper/next also uses that version and it was deduped. I did a search for 1.9.4, and that is the minimum version that p5-wrapper/next requires, but it is not installed anywhere. I deleted .next and node_modules, still same issue.

kyavichev · 2025-09-21T18:19:11Z

kyavichev
Sep 21, 2025
Author

I've been trying to figure this out. I think the version difference is the main clue. Where does the 1.9.4 of p5js version come from?
First thing I did is I tried the same code on a different machine to see if something was cached or something, but it didn't help.
Then, I decided to start a brand new project using Reach 14 and version 1.0.3 of this library. I installed version 1.11.10 of p5. Same issue, when I load sound library via import, it loads p5 1.11.10 and it has a loadSound function. When Sketch is created, version 1.9.4 of P5 is used and there is no loadSound function.
Here is my stripped down project: https://github.com/kyavichev/nextP5app
Please help!

0 replies

kyavichev · 2025-09-21T18:30:24Z

kyavichev
Sep 21, 2025
Author

Another thing I tried is downgrading p5 to 1.9.4. Same version is used in both places, but when the sketch is created loadSound does not exist on the prototype.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Issues with loading sound using p5sound #100

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Issues with loading sound using p5sound #100

Uh oh!

Uh oh!

kyavichev Sep 16, 2025

Replies: 2 comments

Uh oh!

kyavichev Sep 21, 2025 Author

Uh oh!

kyavichev Sep 21, 2025 Author

kyavichev
Sep 16, 2025

kyavichev
Sep 21, 2025
Author

kyavichev
Sep 21, 2025
Author