如何将 HTMLAudioElement 音频文件上传到节点服务器？

Question

I'm currently playing an audio file using an external URL:

const url = 'http://s5.qhres.com/static/465f1f953f1e6ff2.mp3';
const audio = new Audio(url);
audio.play();

How can I programmatically upload this file to the node server? (so the mp3 file can be stored in the server)

Should I get the audio data and send it to the server using fetch() ?

Some guidance would be appreciated.

Answer 1

This is how you can implement an upload function to upload your audioFile

• first we download the file turn it into binary
• second we uploaded

For the backend in nodejs you can use multer with express to setup and upload API so you can receive the file this is a guide that can help you

TBN : Read the code comment and you will understand how it works

 // load status span let Status = document.getElementById("status"); // messages for status const DOWN_START = "File is being downloaded ..."; const DOWN_SUCCESS = "File is downloaded ..."; const DOWN_FAIL = "File failed to download with : "; const UPLOAD_START = "File is being Uploaded "; const UPLOAD_SUCCESS = "File is Uploaded"; const UPLOAD_FAILD = "File failed to upload with : "; // function to update status span const updateStatusMsg = (msg) => { Status.innerHTML = msg; }; // instansiate XMLHttpRequest let downloadReq = new XMLHttpRequest(); let fileUrl = null; // XMLHttpRequest Progress Listeners downloadReq.addEventListener("progress", () => updateStatusMsg(DOWN_START)); downloadReq.addEventListener("load", () => updateStatusMsg(DOWN_SUCCESS)); downloadReq.addEventListener("error", () => updateStatusMsg(DOWN_FAIL)); // Grab url from input const getUrl = (self) => { fileUrl = self.value; }; // Download File const getFile = () => { // [TIP] here i added a proxy for the app so you can have a valid cors so it can work locally downloadReq.open( "GET", "https://api.allorigins.win/get?url=" + encodeURIComponent(fileUrl), true ); downloadReq.responseType = "blob"; // Setup listener onLoad downloadReq.onload = function () { //When the file is downloaded we pass it to the upload function uploadFile(downloadReq.response); // if you want also to read the file and play it you can use this let reader = new FileReader(); reader.readAsDataURL(downloadReq.response); reader.onload = function (e) { console.log(reader); console.log("DataURL:", e.target.result); }; }; // Start Request downloadReq.send(); }; // Upload const uploadFile = (blob) => { // Create A file let audioFile = new File([blob], "audioFile"); updateStatusMsg(UPLOAD_START); // Sending Using fetch here you can add your node.js End point fetch("http://www.example.net", { method: "POST", headers: { "Content-Type": "Your Content Type", }, body: audioFile, }) .then((response) => response.json()) .then((success) => updateStatusMsg(UPLOAD_SUCCESS)) .catch((error) => updateStatusMsg(UPLOAD_FAILD + error.message)); };

 <input type="text" placeholder="Enter the file link" onchange="getUrl(this)" /> <input type="button" value="Upload File" onClick="getFile()" /> <br /> <span id="status"></span>