# Loading samples in csound/browser

**URL:** <https://forum.csound.com/t/loading-samples-in-csound-browser/1066>\
**Category:** Web Csound\
**Created:** [January 30, 2023, 1:17pm UTC](https://forum.csound.com/t/loading-samples-in-csound-browser/1066 "2023-01-30T13:17:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dougron](https://forum.csound.com/letter_avatar_proxy/v4/letter/d/ed8c4c/32.png) [@dougron](https://forum.csound.com/u/dougron)\
**Post date:** [January 30, 2023, 1:17pm UTC](https://forum.csound.com/t/loading-samples-in-csound-browser/1066/1 "2023-01-30T13:17:12Z")

</div>

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:](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