I've implemented a straightforward Record Wave script using Recorder.js
Encountering an Issue
- Recording works fine
- Playback of my recording is successful
- Downloading the recorded file from blob works smoothly
- The problem arises when trying to upload the record file
- Issues with operating system (Windows 10 & appserv)
My upload.php
<?php
print $_FILES["audio_data"]["tmp_name"]; //this will display temporary details about the uploaded file
//checking if the upload folder exists or not
if(!is_dir("uploads")){
$res = mkdir("uploads",0777);
}
$size = $_FILES['audio_data']['size']; //size in bytes
$input = $_FILES['audio_data']['tmp_name']; //temporary name assigned by PHP
$output = $_FILES['audio_data']['name'].".wav"; //client controls filename, could be improved
//moving the file from temp location to local folder using given $output name
move_uploaded_file($input, $output)
?>
Snippet from My js file
function createDownloadLink(blob) {
var url = URL.createObjectURL(blob);
var au = document.createElement('audio');
var li = document.createElement('li');
var link = document.createElement('a');
//defining filename for .wav file used during upload and download (without extension)
var filename = new Date().toISOString();
//controlling audio element
au.controls = true;
au.src = url;
//link to save file to disk
link.href = url;
link.download = filename+".wav";
link.innerHTML = "Save to disk";
//appending controls to the list item
li.appendChild(au);
//adding filename to the list item
li.appendChild(document.createTextNode(filename+".wav "))
//including save to disk link into the list item
li.appendChild(link);
//link for uploading
var upload = document.createElement('a');
upload.href="#";
upload.innerHTML = "Upload";
upload.addEventListener("click", function(event){
var xhr=new XMLHttpRequest();
xhr.onload=function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
var fd=new FormData();
fd.append("audio_data",blob, filename);
xhr.open("POST","upload.php",true);
xhr.send(fd);
})
li.appendChild(document.createTextNode (" "))//add a space between elements
li.appendChild(upload)//add the upload link
//append the list item to the ordered list
recordingsList.appendChild(li);
}
Error encountered on clicking upload button
<b>Warning</b>: move_uploaded_file(2019-12-05T17:30:46.190Z.wav): failed to open stream: Invalid argument in <b>F:\AppServ\www\audio\upload.php</b> on line <b>12</b><br />
<br />
<b>Warning</b>: move_uploaded_file(): Unable to move 'C:\Windows\Temp\php891B.tmp' to '2019-12-05T17:30:46.190Z.wav' in <b>F:\AppServ\www\audio\upload.php</b> on line <b>12</b><br />