How would I get preload to be called after my button listener has been clicked?
Question
I have an html5 application that I have been working on. 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). 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
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
2 answers
solution1
2 ACCPTED 2019-07-19 15:19:56
Leverage async/await and promisify the callback API of 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>
solution2
0 2019-07-19 15:03:20
您可以使用ajax和FormData提交文件，并使用.change()方法使用jquery在用户选择文件后开始上传，然后，如果上传成功，则可以设置音频库。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.