单击按钮侦听器后，如何获得预加载调用？
[英]How would I get preload to be called after my button listener has been clicked?
问题描述
I have an html5 application that I have been working on. 
我有一个正在使用的html5应用程序。 In the app, I want the j5 audio library to run AFTER the user has uploaded a file from their computer (because I want to use it to visualize the amplitudes on a canvas). 在该应用程序中，我希望j5音频库在用户从其计算机上载文件后运行（因为我想使用它来显示画布上的振幅）。 However, I am confused about how I would go about solving this problem. 但是，我对如何解决这个问题感到困惑。
I need to import the item prior to preload, but the upload occurs only after the user has clicked the upload button. 我需要在预加载之前导入项目，但是仅在用户单击上传按钮后才进行上传。 How can I understand this asynchronous problem? 我如何理解这个异步问题？
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>
General structure of code: Take file from input -> preprocess the song so it is playable prior to the canvas loading. 代码的一般结构：从输入中获取文件->对歌曲进行预处理，以便在加载画布之前可以播放它。 To run the code yourself: https://repl.it/@JacksonEnnis/Mju 要自己运行代码： https : //repl.it/@JacksonEnnis/Mju
Note 注意
Interestingly enough, a previous attempt at the project I am doing has allowed me to succeed in doing this. 有趣的是，之前对我正在做的项目的尝试使我成功地做到了这一点。 But I cannot figure out how these two projects are different in a significant way: https://repl.it/@JacksonEnnis/MusicJournal 但是我无法弄清楚这两个项目之间的重大差异： https : //repl.it/@JacksonEnnis/MusicJournal
2 个解决方案
解决方案1
2 已采纳 2019-07-19 15:19:56
Leverage async/await and promisify the callback API of p5.SoundFile() . 利用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>
解决方案2
0 2019-07-19 15:03:20
您可以使用ajax和FormData提交文件，并使用.change()方法使用jquery在用户选择文件后开始上传，然后，如果上传成功，则可以设置音频库。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.