# loadSound for a user uploaded file

**URL:** <https://discourse.processing.org/t/loadsound-for-a-user-uploaded-file/19407>\
**Category:** Libraries\
**Created:** [April 4, 2020, 9:28pm UTC](https://discourse.processing.org/t/loadsound-for-a-user-uploaded-file/19407 "2020-04-04T21:28:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trumpet63](https://avatars.discourse-cdn.com/v4/letter/t/5e9695/32.png) [@Trumpet63](https://discourse.processing.org/u/Trumpet63)\
**Post date:** [April 4, 2020, 9:28pm UTC](https://discourse.processing.org/t/loadsound-for-a-user-uploaded-file/19407/1 "2020-04-04T21:28:31Z")

</div>

I’m building a rhythm game in TypeScript, and I need to let the user upload a sound file, load it, and then play it on demand. I know this is possible in vanilla JS, but I want to do it “the P5 way” so my code is cleaner. Below is a minimal example of what I’m trying to do. I expected loadSound to work, but it’s not even an available method, and the p5 examples online don’t address this use case. Am I missing something, or does this have to be a feature request?

```auto
let p: p5 = myP5SketchInstance;
p.createFileInput(handleAudioFileInput);

function handleAudioFileInput(file: p5.File) {
    let p: p5 = myP5SketchInstance;
    let song = p.loadSound(file);
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [April 12, 2020, 1:11am UTC](https://discourse.processing.org/t/loadsound-for-a-user-uploaded-file/19407/2 "2020-04-12T01:11:43Z")

</div>

If you are wanting to use p5 then you can use the `drop()` method and callback the `loadSound()` method. Then in the success callback of the `loadSound()` method, play the sound …

```auto
function setup() {
  let cnv = createCanvas(400, 400);
  background(222);
  cnv.dragOver(_ => {
    background(157);
  });

  cnv.dragLeave(_ => {
    background(222);
  });

  cnv.drop(file => {
    let snd = loadSound(file.data, _ => {
      snd.play();
      p.html('playing').position(125, 100);
    });
  }, _ => {
    background(222);
  });

  let p = createP('Drag your file here ...').position(25, 100).style('font-size', '27pt');
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [April 12, 2020, 1:43am UTC](https://discourse.processing.org/t/loadsound-for-a-user-uploaded-file/19407/3 "2020-04-12T01:43:01Z")

</div>

Sorry, just realized you were using the `createFileInput()` method …

```auto
function setup() {
  ...
  createFileInput(file => {
    let snd = loadSound(file.data, _ => {
      snd.play();
    });
  });
}

```