时间戳

首页 > 解决方案 > 单击按钮侦听器后如何调用预加载？

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

问题描述

我有一个我一直在研究的 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

标签： javascripthtmlp5.js

解决方案

利用async/await并承诺p5.SoundFile().

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>

推荐阅读