javascript - 使用网络录音机需要将音频保存到服务器
问题描述
我有网络录音机工作:https ://github.com/mdn/web-dictaphone/
我的目标是让它像默认情况下一样工作,但我想添加一个保存按钮,将录制的文件保存到 wordpress 服务器上。
有人对如何做到这一点有任何建议吗?这是录制后执行的代码,我想我需要对 audioURL 做一些事情,并在 php.ini 中使用类似 file_put_contents() 的东西。我不确定是否需要转换为 base64 或其他什么?任何帮助表示赞赏,谢谢。
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
const clipName = prompt('Enter a name for your sound clip?','My unnamed clip');
const clipContainer = document.createElement('article');
const clipLabel = document.createElement('p');
const audio = document.createElement('audio');
const deleteButton = document.createElement('button');
clipContainer.classList.add('clip');
audio.setAttribute('controls', '');
deleteButton.textContent = 'Delete';
deleteButton.className = 'delete';
if(clipName === null) {
clipLabel.textContent = 'My unnamed clip';
} else {
clipLabel.textContent = clipName;
}
clipContainer.appendChild(audio);
clipContainer.appendChild(clipLabel);
clipContainer.appendChild(deleteButton);
soundClips.appendChild(clipContainer);
audio.controls = true;
const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
chunks = [];
const audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
deleteButton.onclick = function(e) {
let evtTgt = e.target;
evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
}
clipLabel.onclick = function() {
const existingName = clipLabel.textContent;
const newClipName = prompt('Enter a new name for your sound clip?');
if(newClipName === null) {
clipLabel.textContent = existingName;
} else {
clipLabel.textContent = newClipName;
}
}
}
解决方案
不需要转换为base64,只需附加blob
到FormData
类的实例并发送。
var formData = new FormData();
formData.append('attachment', blob);
var request = new XMLHttpRequest();
request.open('POST', 'URL', true); // edit URL
request.onload = function() { console.log("Status: %s", request.responseText) };
request.send(formData);
在后端,接收可以$_FILES
像move_uploaded_file()
正常的上传过程一样存档。
推荐阅读
- reactjs - 在“SurveySettingTypes”类型上找不到具有“字符串”类型参数的索引签名
- python-3.x - 警告:pyjwt 1.1.0 不提供额外的“加密”
- java - 如何指示 Mapstruct 使用 lombok builder?
- android - 如何在 DropdownButtonFormField 中制作多级
- azure - 如何从天蓝色点访问互联网到站点 vpn(不工作)?
- linux - 如何使用 shell 脚本在文件中写入历史记录
- matlab - 多图 Matlab 包括图像
- asp.net-core - 发布到不同端口的路由
- gcc - 使用 GCC 和 GNU Make 自动生成依赖项有何用处?
- nativescript - 在 Nativescript 中获取 iOS 安全区域的宽度/高度