JustRec: a JavaScript + Flash Microphone MP3 Recording

Description

JustRec stands for JavaScript MP3 Recording.

It allows to save users' recordings as MP3 files on server.

It uses Adobe Flash(tm) (ActionScript) engine (justrec.swf)
to embed recording and MP3-converting capabilities inside any HTML page.

Flash plugin does not have any view for recording,
it hides behind your HTML layout and pops out only once during a session
while requesting access to user's camera and microphone.

You should make view and model for recording by HTML and JavaScript means.

You can communicate with ActionScript in your JavaScript file,
using ExternalInterface callbacks.

For example spawning justrec.record(60) allows you to start recording
user's microphone output (if they allow it of course)
during 60 seconds max or until justrec.stop() command will be spawned.
See full list of commands in Commands section.

See also section Usage for details about using JustRec.

JustRec is subject to MIT license, and you can use it in any product,
change source code and do what you want with it without permission.
See The MIT License (MIT) for the full text of this license.



Usage

  1. Download justrec.zip or justrec.tgz (see section Download).
  2. Unzip it somewhere inside your project.
    There are three files in this archive - justrec.js, justrec.swf and micupload.php.
  3. Make a link to justrec.js in you HTML page like this:
    <script src="justrec.js"></script>
  4. Change micupload.php to your needs.
    Of course you can use any server script language which fits best, for example, ASP, JSP, Perl, Ruby on Rails and so on.
    Just make sure that you set appropriate value for the 'host' option in justrec.init() (see below).
  5. Write justrec.init(options, element) somewhere in your JS script.
    All possible options are described in a section Options, and element (which is optional parameter) is the element where you want SWF-wrapper to be attached to (mostly it is your main recording window, see section Demo below). element defaults to body of the page if not set.
    Please note that you must use justrec.init() after document is ready (all DOM nodes placed out).
  6. Now, when you want to start recording, use justrec.record(maxTime) in JavaScript, where maxTime is the optional parameter which defines maximum recording time in seconds, default value is 30 seconds.
  7. To interrupt recording before maxTime exceeds you may use justrec.stop() in order to stop the recording
  8. After this you can convert recording using justrec.convert() command which will convert current recording from unpacked and larger of size WAV format to neat and fairly small MP3 format, which is in much extent suitable for usage and transferring.
  9. And the last step is to spawn justrec.send() command which will send MP3 recording data to your server (or just where you want to send it to) using server-side script micupload.php (or any that you defined in host parameter).
  10. You can preview recording before converting it to MP3, for converting process can take some time depending on the size of recording. Previewing may be done by justrec.preview() command. Command justrec.stoppreview() stops previewing. If you are unsatisfied with result you can spawn justrec.record() command anew in order to make new recording.
  11. Most of the job for recordings is done through callbacks that your JavaScript receives after some part of process occurs. For example, when process of recording really starts your script will receive recordingStarted() callback. During recording your script can catch recordingActivity(time, level) callback to see what's going on. There are 9 callbacks in JustRec, full list and description of which you may find in Options section.


Download

Choose download type of JustRec

Note: Downloadable files are distinct in zip method only and have same contents

Production release
justrec.zip (141.21 Kb)
justrec.tgz (141.5 Kb)

Files in these archives are:

  1. justrec.js - minified version of justrec.js. If you want normal version, see Development release section below
  2. justrec.swf - Flash plugin which does all job for recording and converting
  3. micupload.php - Server-side script for uploading MP3 data. You can use your server-side script of course if you change it in host option of justrec settings
Development release
justrec-dev.zip (316.96 Kb)
justrec-dev.tgz (308.24 Kb)

Files in these archives are:

  1. justrec.js - normal version of justrec.js with comments and formatting
  2. rec.js - helper script to init and use JustRec
  3. justrec.html - demo html page
  4. justrec.swf - Flash plugin which does all job for recording and converting
  5. micupload.php - Server-side script for uploading MP3 data
  6. FLA/Main.as - ActionScript source for justrec.swf
  7. FLA/justrec.fla - Flash project for compiling Main.as in Adobe(tm) Flash environment
  8. FLA/shine.swc - ShineMP3 lib for converting to MP3. Needed to compile Main.as. Add it to Flash included libraries before compiling
  9. fr/* , org/* - folders with some libraries needed to compile Main.as script
Note: you may compile Main.as in FLEX_SDK environment with command: mxmlc -o justrec.swf Main.as


Commands

CommandDescription
justrec.record([maxTime])Start recording. Can throw recordingStarted and recordingError callbacks. Keep throwing recordingActivity callback during recording process.
maxTime is optional parameter that defines maximum length of recording in seconds, it defaults to 30 seconds if not set
justrec.stop()Stop recording. Throws recordingStopped callback
justrec.preview()Start previewing recording from SWF object
justrec.stoppreview()Stop previewing spawned by justrec.preview() command
justrec.convert()Begin converting the recording from WAV to MP3 format. Can throw mp3Converting and mp3ConvertingError callbacks. Throws mp3Converted callback when converting succeeds.
justrec.send()Send prepared MP3 file to server. Must be runned after justrec.convert() command. Throws sendingProgress callback during sending process and sendingFinished callback when sending succeeds. If it is runned before converting throws mp3ConvertingError callback


Options

PropertyDefaultDescription
rec_width480Width of SWF plugin (in pixels)
rec_height320Height of SWF plugin (in pixels)
recorderlayout_id'justrec_area'id attribute of DIV wrapper with SWF object in it. Change it if it conflicts with ids of your HTML page
recorder_id'justrec'id attribute of the OBJECT with SWF plugin. Change it if it conflicts with ids of your HTML page
recorder_name'justrec'name attribute of the OBJECT with SWF plugin. Keep it as recorder_id for backward compatibilities
swf_path'justrec.swf'Pathname for injected SWF file
host'micupload.php?f=justrec.mp3'Pathname and parameter of a server side script
Callback functions
recordingStarted function(){}Spawns when recording really started, but if it's the first time for page session Flash box for camera/microphone acceptance will be popped up before recording process and user should allow it in order to start recording
recordingStopped function(){}Spawns when recording interrupts either by timer or by justrec.stop() command
recordingError function(){}Spawns when something goes wrong with recording process
recordingActivity function(time, level){}Spawns during recording process. time is elapsed time of recording and level is the percent of audible level of microphone (values are from 0 to 100)
sendingFinished function(){}Spawns when MP3 file fully transferred to the server by server-side script
sendingProgress function(percent){}Spawns during sending progress. percent parameter is the percent of sent data, from 0 to 100. May be useful to track if MP3 file is too big
mp3Converting function(percent){}Spawns during converting the recording from WAV to MP3. This process usually takes some time so you can make progress bar to inform users about the fact. percent parameter is the percent of job done, from 0 to 100
mp3Converted function(){}Spawns when converting finishes
mp3ConvertingError function(){}Spawns when something goes wrong with converting process. Should never occur, but justrec.send() command throws this callback when called without MP3 converting done


Demo and test

In this section you may try JustRec and see how it works,
see commands' results and callback functions calls.

justrec: Just Record and Enjoy!

maxTime:     Time left: 00:00

Level:





Your MP3 record:  

Note: you can preview recording before converting it to MP3 and sending to server.
Send MP3 data to server only after converting.
Your MP3 recording is in a public domain and will be live for at least 1 hour.

Events Log    



Support

If JustRec is not working, check that you specified right path for SWF plugin file and for the server-side script.

Paths are relative to the current HTML page but not to included JavaScript files.

Also you must have Adobe(tm) Flash Player plugin installed in your browser,
the same for your users that will be using your product.

Using server-side script

MP3 files are sent to server-side script as POST data.
You can grab it and save anywhere.
For the name of this MP3 data you may use either parameter from JavaScript
(in option 'host' like 'micupload.php?f=jrec.mp3' for example, where '?f=jrec.mp3' is the part defines filename), or make any filename string inside your server-side script.

Some notes on using JustRec

Q.: Does JustRec require jquery?
A.: No, JustRec does not require jquery or any other library. It should work out of the box in any modern browser (older IEs (<9) are not modern browsers) and if you have Flash Player plugin installed in it.

Issues

It seems that sendingProgress callback is spawned after 100% of sent data only.
I do not know if it is a bug in Main.as ActionScript or in a Flash Player engine.
Needed some research.

  If you still need help, please email to beotiger@beotiger.com




Thank you for using JustRec