Loading samples in csound/browser

Web Csound
#1

Hi All

I am building csound web based playback for an interactive app for my phd project, and am struggling to get csound to load samples. Sample and csd file is served from Spring Boot backend and the current code tests that everything can be downloaded into the browser and played back.

current react front end is as follows:

let csound

function App() {

const loadCsound = async () => {
if (csound) {
console.log(‘csound already instantiated’);
} else {
console.log(‘initializing csound…’);

    csound = await Csound();
    await csound.setOption("-m0");
    

    // console.log(csound)
    console.log('done!');
}

}

const loadAudioSamples = async() => {

const url = "http://localhost:8080/csound_snadbox/audio_samples/Bassdrum2.wav";

axios.get(url)
.then(response => {
  // console.log(response)
  csound.fs.writeFile('Bassdrum2.wav', response.data)
  // response.data.pipe(csound.fs.createWriteStream('Bassdrum2.wav'))
})

}

const pressMe = async() => {
console.log(‘i got pressed’)
await loadCsound()

console.log('acquiring csd file...')
const csd = await getInitialCsd()
console.log(csd.data);

console.log('loading audio samples...')
await loadAudioSamples()
console.log('done.')

console.log('loading csd...')
await csound.compileCsdText(csd.data);
console.log('done.')

console.log('starting csound....');
await csound.start();

}

return (



Press Me


)
}

export default App

.csd file:-------------------

-o dac --port=10000 ; Initialize the global variables. sr = 44100 ksmps = 32 nchnls = 2 0dbfs = 1

giKik ftgen 0, 0, 0, 1, “Bassdrum2.wav”, 0, 0, 0

instr 1 ;kik

iSize tableng giKik

;prints("giKik length=%f", iSize)


andx    line 0, iSize/sr, 1
aSig    tab andx, giKik, 1
        out aSig, aSig

endin

r 4 i 1 0 0.1 i 1 .5 1 i 1 1 1 i 1 1.5 0.5

e

The above works fine (delivers audio output) in Cabbage where the .csd was developed. Also, the react code plays back if the .csd employs non sample based playback (instr is basic vco2 based synth).

Here is the console output from the browser for the situation when downloading the Bassdrum2.wav sample and loading it to csound.fs:

i got pressed
App.jsx:21 initializing csound…
DevTools failed to load source map: Could not load content for http://localhost:5173/dist/__compiled.worklet.singlethread.worker.js.map: Fetch through target failed: Target not supported; Fallback: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
App.jsx:28 done!
App.jsx:83 acquiring csd file…
App.jsx:85

-o dac --port=10000


; Initialize the global variables.
sr = 44100
ksmps = 32
nchnls = 2
0dbfs = 1

giKik ftgen 0, 0, 0, 1, “Bassdrum2.wav”, 0, 0, 0

instr 1 ;kik

iSize tableng giKik

;prints("giKik length=%f", iSize)


andx    line 0, iSize/sr, 1
aSig    tab andx, giKik, 1
        out aSig, aSig

endin

r 4 i 1 0 0.1 i 1 .5 1 i 1 1 1 i 1 1.5 0.5

e


App.jsx:87 loading audio samples…
App.jsx:89 done.
App.jsx:95 loading csd…
App.jsx:97 done.
App.jsx:99 starting csound…
worklet.singlethread.main.js:243 {isRequestingRealtimeOutput: true}
eventemitter3.min.js:1 --Csound version 6.18 (double samples) Dec 2 2022
eventemitter3.min.js:1 [commit: HEAD]
eventemitter3.min.js:1 libsndfile-1.1.0
eventemitter3.min.js:1 sr = 48000.0, kr = 1500.000, ksmps = 32
eventemitter3.min.js:1 0dBFS level = 1.0, A4 tuning = 440.0
eventemitter3.min.js:1 soundin cannot open Bassdrum2.wav: Format not recognised.ftable 101: Failed to open file Bassdrum2.wav
eventemitter3.min.js:1 f101 0.00 0.00 1.00 “Bassdrum2.wav” …
eventemitter3.min.js:1 INIT ERROR in instr 0 (opcode ftgen.iS) line 12: ftgen error
eventemitter3.min.js:1 from file string (1),giKik ftgen.iS 0 0 0 1 “Bassdrum2.wav” 0 0 0
eventemitter3.min.js:1 header init errors
eventemitter3.min.js:1 audio buffered in 256 sample-frame blocks
eventemitter3.min.js:1 SECTION 1:
eventemitter3.min.js:1 end of section 1 sect peak amps: 0.00000 0.00000
eventemitter3.min.js:1 SECTION 2:
eventemitter3.min.js:1 end of section 2 sect peak amps: 0.00000 0.00000
eventemitter3.min.js:1 SECTION 3:
eventemitter3.min.js:1 end of section 3 sect peak amps: 0.00000 0.00000
eventemitter3.min.js:1 SECTION 4:
eventemitter3.min.js:1 end of section 4 sect peak amps: 0.00000 0.00000
eventemitter3.min.js:1 SECTION 5:

… so it seems the file has made it to csound.fs, but format has got mixed up. Any help greatly appreciated

D