ajaxでBlobのデータをPOST送信したいです

Question

マイクから入力した音声を使ったアプリを開発中です。
mediarecorderというAPIを通して返り値のevent.dataをajaxでpost送信し,リダイレクト先のページで再生できるようにしたいです。
event.dataの返り値はコンソールログで以下のように表示されました

Blob {size: 10042, type: 'audio/webm;codecs=opus'}
size: 10042
type: "audio/webm;codecs=opus"
[[Prototype]]: Blob

以下のように他の要素と一緒にpost送信するとエラーが出ます。
エラーの原因を調べたところ、
dataに指定した値はデフォルトで"application/x-www-form-urlencoded"への変換が行われるから、
変換したくない場合は、processData = falseを指定すべきとありました。
しかしこれをオプションに指定すると他の要素も送れなくなってしまいます。

mediaRecorder.ondataavailable = function (event){
　　var voice= event.data;
   console.log(voice);
   var data = { 'voice':voice, 'fast_talking_score': fast_talking_score,'word_count': word_count, 'talking_time': talking_time};
    $.ajax({
      type: 'POST', 
      url: '/games', 
      data: data,
      dataType: 'json', // サーバーから返却される型
      #このようにオプションをつけるとvoice以外の値も送れない
      processData: false
     }).done(function(result){
         if (result.redirect) {
           window.location.href = result.redirect;
         }
     })
 }
            
localStream.getTracks().forEach(track => track.stop());

Uncaught TypeError: Illegal invocation
    at add (serialize.js:44)
    at buildParams (serialize.js:33)
    at buildParams (serialize.js:29)
    at Function../node_modules/jquery/src/serialize.js.jQuery.param (serialize.js:62)
    at Function.ajax (ajax.js:491)
    at MediaRecorder.mediaRecorder.ondataavailable (game.js:86)
add @ serialize.js:44
buildParams @ serialize.js:33
buildParams @ serialize.js:29
./node_modules/jquery/src/serialize.js.jQuery.param @ serialize.js:62
ajax @ ajax.js:491
mediaRecorder.ondataavailable @ game.js:86
serialize.js:44 Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation
    at add (serialize.js:44)
    at buildParams (serialize.js:33)
    at buildParams (serialize.js:29)
    at Function../node_modules/jquery/src/serialize.js.jQuery.param (serialize.js:62)
    at Function.ajax (ajax.js:491)
    at MediaRecorder.mediaRecorder.ondataavailable (game.js:86)

processData:falseを付けるとパラメータが渡せない

     4:   def new
     5: 
     6:   end
     7: 
     8:   def create
 =>  9:     binding.irb
    10:     @game=Game.new(
    11:       fast_talking_score:params[:fast_talking_score],
    12:       talking_time:params[:talking_time],
    13:       word_count:params[:word_count],
    14:       voice:params[:voice]

irb(#<GamesController:0x00007fad86d18b58>):001:0> params
=> <ActionController::Parameters {"object Object"=>nil, "controller"=>"games", "action"=>"create"} permitted: false>
irb(#<GamesController:0x00007fad86d18b58>):002:0> 

リダイレクト先のviewでは以下のようにaudio要素で再生させたいです。

game.controller

def create

    @game=Game.new(
      fast_talking_score:params[:fast_talking_score],
      talking_time:params[:talking_time],
      word_count:params[:word_count],
      voice:params[:voice]
    )
    if @game.save
      respond_to do |format|
        format.json { render json: { redirect: result_game_url(@game) } }
      end
    end
  end

  def result
 
    @game= Game.find(params[:id])
    #gonというgemでrails側からjavaスクリプトに変数を渡して使えるようにしています
    gon.voice = @game.voice
  end

result.html.erb

<audio id="audio" controls></audio>

<script>
post 送信で送られていた値を引数に入れて音声を再生させたい
document.getElementById("audio").src = window.URL.createObjectURL(gon.voice)
const audioElement = document.querySelector("audio");
</script>

Comments

[m.ts10806]

>しかしこれをオプションに指定すると他の要素も送れなくなってしまいます。

そのコードはどこでしょうか。提示コード内にはありません。

[atyabo]

失礼しました。
ajaxの文に追記しました。

Answer 1

解答してくださったお二人の方、ありがとうございました。
オブジェクトではなく、formdataで送信することで値をDBに保存することができました。
どちらの方もformdataのことを指摘してくださったので、先に回答いただいた方をベストアンサーとさせていただきます。

var fd = new FormData
  fd.append("voice", event.data);
  fd.append("fast_talking_score", fast_talking_score)
  fd.append("word_count",word_count)
  fd.append("talking_time", talking_time)
          
  $.ajax({
    type: 'POST', // リクエストのタイプ
    url: '/games', // リクエストを送信するURL
    data: fd,
                    // サーバーに送信するデータ
    dataType: 'json',// サーバーから返却される型
    processData: false,
    contentType: false
   }).done(function(result){
   if (result.redirect) {
   window.location.href = result.redirect;
   }               
  })
                

Answer 2

以下のコードは input type="file" 要素で取得したファイルと追加の文字列をアップロードするのに使った JavaScript / jQuery のコードです。

質問者さんのケースでは変数 voice に送信するデータを取得できるようですが、であれば、それを下のコードのような fd.append で追加してみたらどうなるでしょう？

 <script type="text/javascript">
    //<![CDATA[
    $(function () {
      $('#ajaxUpload').on('click', function (e) {
        // FormData オブジェクトの利用
        var fd = new FormData(document.querySelector("form"));
 
        // 追加データを以下のようにして送信できる。フォーム
        // データの一番最後に追加されて送信される
        fd.append("CustomField", "This is some extra data");
 
        $.ajax({
          url: '/home/upload',
          method: 'post',
          data: fd,
          processData: false, // jQuery にデータを処理させない
          contentType: false  // contentType を設定させない
          }).done(function(response) {
            $("#result").empty;
            $("#result").text(response);
          }).fail(function( jqXHR, textStatus, errorThrown ) {
            $("#result").empty;
            $("#result").text('textStatus: ' + textStatus +
                            ', errorThrown: ' + errorThrown);
          });
      });
    });
    //]]>
  </script>

Answer 3

ファイル実体を送信したい場合、objectではなくFormDataでリクエストを構成してください。

質問修正前の回答

dataType: 'json'　←ここに,がないのでJavaScriptのエラー出てるのでは。
あくまでJavaScriptの構文の問題です。

Comments

[atyabo]

すみません。' , 'を付け忘れて質問を修正していました。
コード本文には確かに付けていますがエラーが出ております。

[m.ts10806]

ああなるほど。