wordpress - 如何在 WordPress Post 中上传 Web 记录 Base64 Wave 音频文件（前端形式）

Question

我创建了一个运行良好的 WordPress 帖子表单

我想添加一个字段：

基于base64的浏览器录制音频文件-（blob文件）

并在发布时上传。我的 javascript 代码是： https ://subinsb.com/html5-record-mic-voice/

这是我的代码示例：

<?php
if ( isset( $_POST['submitted'] ) && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' ) ) {

    if ( trim( $_POST['postTitle'] ) === '' ) {
        $postTitleError = 'Please enter a title.';
        $hasError = true;
    }

    $post_information = array(
        'post_title' => wp_strip_all_tags( $_POST['postTitle'] ),
        'post_content' => $_POST['postContent'],
        'episode' => $_POST['postEpisode'],
        'post_type' => 'post',
        'post_status' => 'draft'
    );

    $post_id = wp_insert_post( $post_information );
    add_post_meta($post_id, 'episode', $_POST['postEpisode'], true);



/* upload file here */

    $file_name = $_FILES['fileToUpload']['name'];
    $file_temp = $_FILES['fileToUpload']['tmp_name'];

    $upload_dir = wp_upload_dir();
    $image_data = file_get_contents( $file_temp );
    $filename = basename( $file_name );
    $filetype = wp_check_filetype($file_name);
    $filename = time().'.'.$filetype['ext'];

    if ( wp_mkdir_p( $upload_dir['path'] ) ) {
      $file = $upload_dir['path'] . '/' . $filename;
    }
    else {
      $file = $upload_dir['basedir'] . '/' . $filename;
    }

    file_put_contents( $file, $image_data );
    $wp_filetype = wp_check_filetype( $filename, null );
    $attachment = array(
      'post_mime_type' => $wp_filetype['type'],
      'post_title' => sanitize_file_name( $filename ),
      'post_content' => '',
      'post_status' => 'inherit'
    );

    $attach_id = wp_insert_attachment( $attachment, $file );
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    $attach_data = wp_generate_attachment_metadata( $attach_id, $file,$post_id );
    wp_update_attachment_metadata( $attach_id, $attach_data,$post_id );

    echo $attach_id;
    }





?>
<?php if ( $postTitleError != '' ) { ?>
    <span class="error"><?php echo $postTitleError; ?></span>
    <div class="clearfix"></div>
<?php } ?>
<?php
if ( $post_id ) {
    wp_redirect( home_url() );
    exit;
}
?>
<form action="" id="primaryPostForm" method="POST" enctype="multipart/form-data">

    <fieldset>
        <label for="postTitle"><?php _e('Post Title:', 'framework') ?></label>

        <input type="text" name="postTitle" id="postTitle" class="required" value="" />
    </fieldset>

    <fieldset>
        <label for="postContent"><?php _e('Post Content:', 'framework') ?></label>

        <textarea name="postContent" id="postContent" rows="8" cols="30" class="required"></textarea>
    </fieldset>


    <fieldset>
        <label for="postEpisode"></label>

        <textarea name="postEpisode" id="postEpisode" rows="8" cols="30" class="required"></textarea>
    </fieldset>



    <?php
    /*----------------- recorder filed here -----------------*/
    ?>
    <audio controls id="audio"></audio>
    <div>
      <a class="button recordButton" id="record">Record</a>
      <a class="button recordButton" id="recordFor5">Record For 5 Seconds</a>
      <a class="button disabled one" id="pause">Pause</a>
      <a class="button disabled one" id="stop">Reset</a>
    </div><br/>
    <div>
      <input class="button" type="checkbox" id="live"/>
      <label for="live">Live Output</label>
    </div>
        <div data-type="wav">
            <p>WAV Controls:</p>
            <a class="button disabled one" id="play">Play</a>
            <a class="button disabled one" id="download">Download</a>
      <a class="button disabled one" id="base64">Base64 URL</a>
      <a class="button disabled one" id="save">Upload to Server</a>
        </div>



    <canvas id="level" height="200" width="500"></canvas>


    <fieldset>
    <?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
        <input type="hidden" name="submitted" id="submitted" value="true" />

        <button type="submit"><?php _e('Add Post', 'framework') ?></button>
    </fieldset>

</form>

javascript文件：

            function restore(){
              $("#record, #live").removeClass("disabled");
              $(".one").addClass("disabled");
              Fr.voice.stop();
            }
            $(document).ready(function(){
              $(document).on("click", "#record:not(.disabled)", function(){
                elem = $(this);
                Fr.voice.record($("#live").is(":checked"), function(){
                  elem.addClass("disabled");
                  $("#live").addClass("disabled");
                  $(".one").removeClass("disabled");
                });
              });

              $(document).on("click", "#stop:not(.disabled)", function(){
                restore();
              });

              $(document).on("click", "#play:not(.disabled)", function(){
                Fr.voice.export(function(url){
                  $("#audio").attr("src", url);
                  $("#audio")[0].play();
                }, "URL");
                restore();
              });

              $(document).on("click", "#download:not(.disabled)", function(){
                Fr.voice.export(function(url){
                  $("<a href='"+url+"' download='MyRecording.wav'></a>")[0].click();
                }, "URL");
                restore();
              });

              $(document).on("click", "#base64:not(.disabled)", function(){
                Fr.voice.export(function(url){
                  console.log("Here is the base64 URL : " + url);
                  alert("Check the web console for the URL");

                  $("<a href='"+ url +"' target='_blank'></a>")[0].click();
                }, "base64");
                restore();
              });

              $(document).on("click", "#mp3:not(.disabled)", function(){
                alert("The conversion to MP3 will take some time (even 10 minutes), so please wait....");
                Fr.voice.export(function(url){
                  console.log("Here is the MP3 URL : " + url);
                  alert("Check the web console for the URL");

                  $("<a href='"+ url +"' target='_blank'></a>")[0].click();
                }, "mp3");
                restore();
              });
            });

我搜索了几个网站，不幸的是没有找到解决这个问题的正确方法。

我想将此文件与帖子一起上传。并显示在后端的自定义字段中

谁能帮我？