How to upload Web-record Base64 Wave Audio file in WordPress Post (front-end form)

I created a WordPress post form that works well

And I want to add a field:

Browser recording audio file Based on base64 - (blob file)

And upload when posting. My javascript code is : https://subinsb.com/html5-record-mic-voice/

This is my code example:

 <?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>

I have searched several websites and unfortunately found no right solution to this problem.

I want to upload this file along with the post.And display in a custom field in the backend

Can anyone help me?

Share: