Question

我有一个正在使用的html5应用程序。在该应用程序中，我希望j5音频库在用户从其计算机上载文件后运行（因为我想使用它来显示画布上的振幅）。但是，我对如何解决这个问题感到困惑。

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

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>

代码的一般结构：从输入->中获取文件，对歌曲进行预处理，以便在加载画布之前可以播放该歌曲。要自己运行代码，请执行以下操作：https://repl.it/@JacksonEnnis/Mju

注意

有趣的是，之前对我正在做的项目的尝试使我成功地做到了这一点。但是我无法弄清楚这两个项目之间的重大差异：https://repl.it/@JacksonEnnis/MusicJournal

Answer 1

利用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>

Answer 2

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

点击按钮监听器后，如何调用预加载功能？

注意

2 个答案: