JavaScriptを使いブラウザ経由で取得した音声を、Ajaxを利用してrailsのコントローラーに渡したい

Question

前提・実現したいこと

Ruby on Railsを利用したポートフォリオを作成しており、機能として、ブラウザ上から音声を録音し、その録音した音声を、ajaxを用いて、controllerに渡し、そこでさらにWebApiにデータを渡したいと考えております。

その音声録音したデータを上手くcontroller側に渡せずに困っています。
音声の録音はjavascriptのWebAudioApiを用いています。

発生している問題・エラーメッセージ

コントローラー内でbyebugを記載し、paramsを確認するも、下記のように期待する値は入っておりませんでした。

(byebug) params
#<ActionController::Parameters {"controller"=>"static_pages", "action"=>"top"} permitted: false>

chromeデベロッパーツール、Railsコンソールでのエラーは出てきておりません。

該当のソースコード

#top.html.erb

methods: {
  //  録音を開始する部分
  startRecording() {
    this.status = 'recording';
    this.audioData = [];
    this.recorder.start();
  },
  //  音声ファイルの拡張子を取得する部分
  getExtension(audioType) {
    let extension = 'wav';
    const matches = audioType.match(/audio/([^;]+)/);
    if(matches) {
       extension = matches[1];
    }  
    return '.'+ extension;
  },
},
mounted() {
  //  マイクにアクセス
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      let audioBlob;
      this.recorder = new MediaRecorder(stream);
      this.recorder.addEventListener('dataavailable', e => {
        this.audioData.push(e.data);
        this.audioExtension = this.getExtension(e.data.type);
      });
      //ここから音声録音を開始
　　　　　　　　　　　　this.recorder.addEventListener('stop', () => {
        audioBlob = new Blob(this.audioData,{type: 'audio/wav'});
        console.log(audioBlob);
        formData = new FormData();
        formData.append("audio", audioBlob);
        console.log(formData);
        $.ajax({
          url: '/static_pages',  
          type: 'POST', 
          contentType: false,
          processData: false,
          //dataType: 'json',
          data: {audio: formData},
        })
        .done(function(data){
          console.log(data);
        })
        .fail(function(data){
          console.log("送信に失敗しました");
        });

#controller

def create
  @audio = params[:audio]
end

試したこと

参考記事
上記参考記事をもとにコードなど確認しましたが、渡せていない直接の原因がわかりませんでした。
しかしformData.append("audio", audioBlob);の後のconsole.log(formData);でForm Dataが入っていないと思われるので

Comments

[tabuu]

AJAXのtypeがGETになっていますがよい？

[hasaya]

ご指摘いただきありがとうございます。元々GETにしていたのですが、POSTの方が適切だと気づき、修正いたしました。音声録音したデータをcontroller側に渡せていない事象はまだ解決出来ておりません。恐れ入りますが宜しくお願い致します。

[tabuu]

AJAXのパラメータですが、
contentTypeをfalseにしていますが何か理由ありますか？
送信先のurlもあっていますか？

data: {audio: formData}
↓
data: formData
ではないですか？

[hasaya]

contentTypeは下記記事を参考にした際にそのようにしていたので指定したのですが、
https://stackoverflow.com/questions/35872448/jquery-post-blob-object-gives-uncaught-typeerror-illegal-invocation
改めて調べたところデフォルトのtrueで問題なさそうでしたので削除しました。

送信先のURLは$rails routesで確認し、下記でしたので問題ありませんでした。
static_pages POST /static_pages(.:format) static_pages#create

data: {audio: formData}部分は仰るとおりdata: formDataが正しいと思うので変更いたしました！

上記訂正をした上で確認したところ下記の別でエラーが出てきました。
ActionController::BadRequest - Invalid request parameters: invalid %-encoding ("audio"; filename="blob"
Content-Type: audio/wav

これは　audioBlob = new Blob(this.audioData,{type: 'audio/wav'});　の部分が原因で無効なエンコーディングのリクエストを行っているからRailsは適切に処理出来ずに例外を出しているという認識です。恐らく　type: 'audio/wav'のところを変更する必要があるのかと思っていて調べているのですが、今のところ解決に繋がる記事が見つかっておりません。もし上記のエラーに関して何かしら情報をいただけましたら幸いです。

Answer 1

こちら解決しました。contentType: false,を再度記載した上で下記のようにしたところ無事にパラメーターを渡すことが出来ました。

      //ここから音声録音を開始
　　　　　　　　　　　　this.recorder.addEventListener('stop', () => {
        audioBlob = new Blob(this.audioData);
        console.log(audioBlob);
        formData = new FormData();
        formData.append("audio", audioBlob);
        console.log(formData);
        $.ajax({
          url: '/static_pages',  
          type: 'POST', 
          contentType: false,
          processData: false,
          data: {audio: formData},
        })

tabuu様色々ご教示いただきありがとうございました。