javascript - 如何在wordpress中通过ajax发布音频blob?
问题描述
我正在尝试设置网络录音机来录制音频,然后将其保存到服务器。
我的目标是让他们在单击保存按钮时将音频文件保存到 wordpress 服务器。
它可以工作并创建 blob。但是,我无法将其发布到 php,因此我可以保存它。当播放器停止时设置 blob,然后单击保存按钮时我尝试将其保存到服务器。
const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
chunks = [];
const audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
saveButton.onclick = function(e) {
const ajaxurl = '<?php echo admin_url("admin-ajax.php") ?>';
var data = {
action: 'wwd_save_audio',
audio: blob,
audioUrl: audioURL,
processData: false,
name: 'temp.ogg',
};
$.post(ajaxurl, data, function(response) {
console.log(response);
});
}
控制台中的 blob:
Blob {size: 11303, type: "audio/ogg; codecs=opus"}
size: 11303
type: "audio/ogg; codecs=opus"
__proto__: Blob
PHP(由于将其作为 blob 发布的问题,并未真正进行太多测试):
function wwd_save_audio_callback()
{
$data = file_get_contents($_FILES['audio']['tmp_name']);
$audioName = uniqid() . '.ogg';
$data = file_get_contents($_FILES['audio']['tmp_name']);
$fp = fopen('../wp-content/uploads/audio/' . $audioName, 'wb');
fwrite($fp, $data);
fclose($fp);
}
add_action('wp_ajax_wwd_save_audio', 'wwd_save_audio_callback');
add_action('wp_ajax_nopriv_wwd_save_audio', 'wwd_save_audio_callback');
如果我尝试将 blob 附加到上面的帖子,这是控制台中产生的错误:
Uncaught TypeError: Illegal invocation
at i (jquery-3.5.1.min.js?ver=3.5.1:2)
at Dt (jquery-3.5.1.min.js?ver=3.5.1:2)
at Dt (jquery-3.5.1.min.js?ver=3.5.1:2)
at Function.S.param (jquery-3.5.1.min.js?ver=3.5.1:2)
at Function.s.param (jquery-migrate-3.3.0.min.js?ver=3.3.0:2)
at Function.ajax (jquery-3.5.1.min.js?ver=3.5.1:2)
at Function.s.ajax (jquery-migrate-3.3.0.min.js?ver=3.3.0:2)
at Function.S.<computed> [as post] (jquery-3.5.1.min.js?ver=3.5.1:2)
at HTMLButtonElement.saveButton.onclick ((index):409)
如果我将上面的代码更改为音频只是一个字符串,它可以正常发布,所以我得到的错误与我认为它是一个音频文件有关。
audio: 'blob',
我也试过没有成功:
saveButton.onclick = function(e) {
const ajaxurl = '<?php echo admin_url("admin-ajax.php") ?>';
let formData = new FormData();
formData.append('audio', blob);
formData.append('name', String('id', '.ogg'));
formData.append('action', 'wwd_save_audio');
$.ajax({
action: 'wwd_save_audio',
method: 'post',
processData: false,
contentType: false,
cache: false,
data: formData,
enctype: 'multipart/form-data',
url: ajaxurl,
success: function (response) {
console.log(response);
}
});
}
它不起作用。有什么建议么?我已经被这件事困住了两天(发布音频),谢谢。
解决方案
我终于让它像这样工作:
var form = new FormData();
form.append('audio', blob);
form.append('action', 'wwd_save_audio');
$.ajax({
url: ajaxurl,
type: 'POST',
data: form,
processData: false,
contentType: false,
success: function (data) {
console.log('response' + JSON.stringify(data));
},
error: function () {
// handle error case here
}
});
推荐阅读
- amazon-web-services - 是否可以使用 AWS 代理为 http 后端启用 https?
- bash - 如何在带有密码提示的bash脚本中检查路由器的SSH登录状态
- android - Androidx底部导航栏在可隐藏的导航项上保持突出显示
- ruby-on-rails-5 - 活动管理员编辑器未成功上传表单
- amazon-web-services - CloudWatch Insights 过滤到仅包含查询字符串的主页请求
- pdf - iTextSharp v5 - 如何在内存中连接 PDF?
- excel - 使用 ID 更改重定位多个图像
- r - ggplot2 显着性水平,带星号,调整后的 p 值
- java - Spring-Boot在支持String Array(String [])数据类型的内存数据库中兼容
- clang - 使用 OpenMP 的 Clang 编译的 Python 扩展中的未定义符号