I’ve finally started working on my Web Csound/p5.js project. Woohoo! However, I’m getting surprising behavior when testing the project in Firefox and Chrome. The CSD is a simple sampler based on a GEN01 table and loscil. When you click on the screen Csound plays the sample. I’m running a local server via Python3 and then running the index.html file in Firefox/Chrome. Sometimes it all loads and runs perfectly. Sometimes it doesn’t. Here’s some of the odd behavior:
When I make edits to the files they don’t show up right away when I refresh the page. There seems to be a lag before the changes get sent out to the server.
The code is working fine, but when I refresh the page the sample won’t load into the table in Csound.
Hard refreshing may or may not fix the problem. If I wait a couple minutes the problem might go away upon refreshing.
I feel like I’m missing something about how developing in this server environment works. Is there some caching system involved? Do you have any tips? I can share code if necessary, but I’m wondering if the experienced developers among you can already see the blindspots in my understanding.
It looks like the problem has to do with the GEN01 routine:
gisample ftgen 1, 0, 0, 1, "HC75.WAV", 0, 0, 0
It works sometimes but usually breaks upon refreshing the page. Then I get errors like the one below. If I use diskin2 instead of reading the sample from a table the refreshing problems mostly go away.
My project hinges on being able to read samples from tables, so I hope I can figure this out. Thanks!
deferred alloc for HC75.WAV [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
soundin cannot open HC75.WAV: No Error.�[m [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
�[mftable 1: �[mFailed to open file HC75.WAV�[m [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
�[mf 1 0.00 0.00 1.00 "HC75.WAV" ... [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
INIT ERROR in instr 0 (opcode ftgen.iS) line 11: �[mftgen error�[m [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
�[m from file looper.csd (1) [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
gisample ftgen.iS 1 0 0 1 "HC75.WAV" 0 0 0 [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
header init errors�[m [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)
�[mFailed to compile CSD file. [CsoundObj.js:1:6957351](http://localhost:8080/CsoundObj.js)```
Are you using csound.writeToFS()? You will need to load your samples to the file system that way before you can work with them. I have no experience with the python based server utilities. I typically run everything from Visual Studio Code and its Live Server extension. I’ve never seen any issues with live updates, they always appear straight away.
Yep, I’m using csound.writeToFS(). Here’s the setup code for CsoundObj, which I got from your sample project.
function startCsound() {
csound = new CsoundObj();
//use this code to load a .csd file and have Csound compile and start it
fetch('looper.csd').then((response) => {
response.arrayBuffer().then((buf) => {
csound.writeToFS('looper.csd', buf);
csound.compileCSD('looper.csd');
csound.start();
csound.readScore("f0 z");
csoundLoaded = true;
})
})
//imports files for use with Csound
function CopyUrlToLocal(name, callback = null) {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onload = function() {
var data = new Uint8Array(xmlHttpRequest.response);
csound.writeToFS(name, data);
};
xmlHttpRequest.open("get", name, true);
xmlHttpRequest.responseType = "arraybuffer";
xmlHttpRequest.send(null);
}
//import the four audio samples included with this project
CopyUrlToLocal("HC75.WAV");
}
CsoundObj.initialize().then(() => {
startCsound();
});
The sample loads correctly in some cases but then doesn’t load upon refreshing. It also works in Chrome more reliably than in Firefox. I just ran the code from Visual Studio Code with the live server, and I’m getting the same problems. I’m stumped. Must be a bug in my code…
Here’s the puzzling thing. On line 15 of setupCsound.js it attempts to load the WAV file into a table:
gisample ftgen 1, 0, 0, 1, "myFile.WAV", 0, 0, 0
The table load fails, and the CSD doesn’t compile. If you comment out this line, then the CSD compiles and the sketch is able to play the WAV file with diskin2 reading “myFile.WAV”. So “myFile.WAV” is available to Csound, but Csound isn’t loading it into a table.
Looks like you have a race condition due to asynchronous code. You’ll want to wait to load samples first, then load the csd, then run. Take a look at code here:
It’s using the new 6.16.0 API, a version from history is shown here using the 6.15.0 API:
For your project, you might want to copy the loadResources and use it in a similar way with await, or use a chain of promises such as:
loadResources(...).then(
fetch("your csd").then((res) => ) {
// etc.
}));
Thanks, Steven! I’ve incorporated this code into the p5.js editor, but now the console is telling me that process is not defined. Is that an environmental variable specific to React? If so, can you suggest a modification to the line that would allow it to work in the p5.js environment?
Sorry to bug you. I wish I could figure this out myself, but my web/JavaScript skills aren’t there yet.
Jason
EDIT: I figured out a solution. I just got rid of the whole ${process.env.PUBLIC_URL} segment. I still ran into the bug where the p5.js editor needs to write files to a new name instead of the original, but once I got around that the GEN01 table now loads, the CSD compiles, and the sketch now works with the loscil opcode instead of diskin2!