Saving an audio blob as a file in a rails app

Question

I am using recorder.js and have successfully gotten to the point where I can record an audio snippet and play it back over and over again to my heart's content. But now I am trying to make a post of this "blob" (which I know contains proper data since it's playing back correctly) as an audio wav file in my /public folder. My issue is that I am not sure how to deal with the blob and actually post its content. This is my code:

function sendWaveToPost1() {
console.log(savedWAVBlob);

$.ajax({ url: '/worm/save',
    type: 'POST',
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
    data: 'someData=' + savedWAVBlob,
    success: function(response) {
        console.log("success");
    }
});

}

Controller:

class WormController < ApplicationController


 def create
  end

  def

 save
    audio = params[:someData]
    p audio
    save_path = Rails.root.join("public/audioFiles")

    # Open and write the file to file system.
    File.open(save_path, 'wb') do |f|
      f.write audio.read
    end

    render :text=> 'hi'
  end
end

That code was based on this post: Save audio file in rails. But although I am posting something, it seems to be a string instead of the actual bytes of the audio file. This is the rails console error I receive:

NoMethodError (undefined method `read' for "[object Blob]":String):

Any ideas? I feel like I must be missing some encoding step, or maybe I'm just completely misunderstanding what a blob is. Why can't I just post it directly like this?

savedWAVBlob is not a string. Its an object I guess. So you can not use "+" operator. BTW way can you give the exact URL of the plugin you are using? — Soundar Rathinasamy, Dec 09 '14 at 07:44
To send file data, you'll need to send a multipart request. See http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax On the server side, it will come through in params as a IO filedata object which you can then save to your filesystem. — Max Williams, Dec 09 '14 at 11:12
@soundar This is Recorderjs: https://github.com/mattdiamond/Recorderjs — ekofman, Dec 11 '14 at 06:13

score 5 · Answer 1 · edited Sep 08 '20 at 14:06

You need to convert blob to base64url and send it in data by ajax to upload in rails it is working for me

var reader  = new window.FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
    var base64data = reader.result;
    var savedWAVBlob=base64data
    console.log(savedWAVBlob );
}

also in controller

require 'base64'
save_path = Rails.root.join("public/audio")
unless File.exists?(save_path)
  Dir::mkdir(Rails.root.join("public/audio"))
end
data=params[:url]
audio_data=Base64.decode64(data['data:audio/ogg;base64,'.length .. -1])
File.open(save_path+"_audio", 'wb') do |f| f.write audio_data end
current_user.user_detail.audio=File.open(save_path+"_audio")
current_user.user_detail.audio_content_type="application/octet-stream"

Saving an audio blob as a file in a rails app

1 Answers1