如何通过 wordpress 中的 ajax 发布音频 blob？

Question

我正在尝试设置网络录音机来录制音频，然后将其保存到服务器。

我的目标是让他们在单击保存按钮时将音频文件保存到 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);
                }
            });
          }

它不起作用。 有什么建议么？ 我已经被这件事困住了两天（发布音频），谢谢。

Answer 1

我终于让它像这样工作：

        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
            }
        });