如何在Wordpress中通过Ajax发布音频Blob? [英] How to post audio blob via ajax in wordpress?

问题描述

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

I am trying to set up web-dictaphone to record audio then save it to the server.

我的目标是让他们在单击保存"按钮时将音频文件保存到wordpress服务器.

My goal is to simply have them save the audio file to the wordpress server when clicking the save button.

它可以工作并创建Blob.但是，我无法将其发布到php，所以可以保存它.当播放器停止时会设置blob，然后单击保存"按钮时，我尝试将其保存到服务器.

It works and creates the blob. However, I can't get it to post to php so I can save it. The blob is set when the player stops, then when the save button is clicked I try to save it to the server.

    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发布的问题，因此并未进行太多测试):

PHP (not really tested much because of issues getting it to post as a 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附加到上面的帖子中，这是在控制台中产生的错误:

This is the error in the console that is produced if I try to attach the blob to the post like above:

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)

如果我将上面的代码更改为音频只是一个字符串，它可以很好地发布， 所以我得到的错误与我认为是音频文件有关.

If I change the above code to where the audio is just a string it posts fine, so the error I'm getting is related to it being an audio file I believe.

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

，它不起作用. 有什么建议?我已经在这件事上坚持了两天(发布音频)，谢谢.

and it doesn't work. Any suggestions? I have literally been stuck on this one thing (posting an audio) for two days now, thanks.

推荐答案

我终于让它像这样工作:

I finally got it to work like this:

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

这篇关于如何在Wordpress中通过Ajax发布音频Blob?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！