单击按钮侦听器后如何调用预加载？

Question

我有一个我一直在处理的 html5 应用程序。在应用程序中，我希望 j5 音频库在用户从他们的计算机上传文件后运行（因为我想用它来可视化 canvas 上的振幅）。但是，我对如何解决这个问题感到困惑。

我需要在预加载之前导入项目，但只有在用户单击上传按钮后才会进行上传。我如何理解这个异步问题？

var test, song, path, audio;
    function preload(){
      song = loadSound();
    }
    
    function setup(){
      createCanvas(200, 200);
    }
    
    function draw(){
      background(0);
    }
    
    document.querySelector('input[type="file"]').addEventListener('input', (e) => {
      if (e.target.files.length) {
        path = URL.createObjectURL(e.target.files[0])
        audio = new Audio(path);
        
        //HERE is where setup, etc show occur.
        //Create Canvas, etcetc
      }
    });

      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Mju</title>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.js"></script>
    
        <link href="style.css" rel="stylesheet" type="text/css" />
      </head>
    
      <body>
        <h3>Upload Song:  <input onclick="this.style.display='none';" id="song" type="file" accept="audio/*"></h3>
      </body>

代码的一般结构：从输入获取文件 -> 预处理歌曲，使其在 canvas 加载之前可以播放。给自己运行代码：https://repl.it/@JacksonEnnis/Mju

备注

有趣的是，之前对我正在做的项目的尝试让我成功地做到了这一点。但我无法弄清楚这两个项目有何显着不同：https://repl.it/@JacksonEnnis/MusicJournal

Answer 1

您可以使用ajax和FormData提交您的文件，jquery使用.change()方法在用户选择文件后开始上传，然后如果上传成功，您可以设置您的音频库。

Answer 2

利用 async/await 并承诺 p5.SoundFile() 的回调 API。

const form = document.getElementById("audio-form");
const input = document.getElementById("audio-file");

form.addEventListener("submit", async e => {
  e.preventDefault();

  // Make ObjectURL
  const path = URL.createObjectURL(input.files[0]);

  // Promisify the callback function
  const sound = await new Promise((resolve, reject) => {
    new p5.SoundFile(path, s => resolve(s), err => reject(err));
  });

  // Do stuff with sound
  console.log(sound);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.js"></script>

<form id="audio-form">
  <input type="file" id="audio-file" />
  <br />
  <button type="submit">Load audio</button>
</form>

单击按钮侦听器后如何调用预加载？

How would I get preload to be called after my button listener has been clicked?

html

javascript

p5.js

备注