RecordMe

record_me gem is a very simple gem that allows you to record user's audio input by using a simple javascript interface and an already built flash object. If you have questions about why I opted using flash and other info, you might want to take a look to my post What? Rails can't hear you? Use Flash!

Installation

Add this line to your application's Gemfile:

gem 'record_me'

And then execute:

$ bundle

Or install it yourself as:

$ gem install record_me

Run generators:

$ rails generate record_me:install
$ rails generate record_me:initialize

Usage

Configuration file

Specify default settings:

  • top: sets top absolute position of flash object window. Default is 40%.
  • left: sets left absolute position of flash object window. Default is 40%.
  • time: sets recording limit of seconds; maximum available are 180 seconds (3 minutes). Default is 30 seconds.
  • name: sets name of the record. Default is record.wav.
  • destination: the folder where all your records will be placed. Default is public/records.

top, left, time, and name can be overridden in your views as you will see next.

In your view

Add next CSS class selectors to your HTML elements:

  • .record_me_timer: attaches a counter in seconds to the element
  • .record_me_start: when element with this selector is clicked, it triggers recording action
  • .record_me_stop: when element with this selector is clicked, recording stops
  • .record_me_reproduce: when element with this selector is clicked, recorded audio is reproduced
  • .record_me_save: when element with this selector is clicked, recorded audio is sent to server

Then add next function to your view (since it will embed js code in your view you may want to add it at the bottom of your view/layout):

record_me_js(some_path)

where save_path is the path of the action where the recorded audio will be sent once element with .record_me_save class is clicked.

Also, you can pass time, name, top, and left values to override config/record_me.yml settings.

Example of how the code would look:

<%= link_to 'Save', '#', :class => 'record_me_save'%>
<div class='record_me_timer'></div>
<div class='record_me_start'>Start</div>
<div class='record_me_stop'>Stop</div>
<div class='record_me_reproduce'>Reproduce</div>
<%= record_me_js({save_path: audios_save_path, time: 3, name:'my_record.wav'}) %>

In your controller

Go to the action defined for save_path and add just add record_me_save. 'true' will be returned if file was successfully created.

Flash warning message

Additionally you can display a message asking to install Flash if it is not installed, just call .flash_warning_message method and pass it the class of the html element you want to display the message:

<div class='flash_warning'></div> <%= flash_warning_message('flash_warning') %>

That's it!

Wish list

  • Add tests
  • Ensure Rails 4.x compatibility

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request