jRecorder – jQuery plugin for audio recording

Recently I made a jQuery plugin named jRecorder to record voice in html pages.

This plugin is very easy to integrate with your web page and you DON’T need a flash server or RED5 server to do the recording

What all you need is a Web Server (PHP or any server scripting language).

You can find the documentation and Download the plugin HERE.

eg: $.jRecorder( settings );

Another advantage is your can decide your recorder design, buttons , mic activity level , recording progress etc in HTML+CSS and this plugin gives you many recording callback events to manage. It is like jPlayer plugin for audio playback.

This plugin sends recorded WAV file to your webserver, where you can save this file where ever you wish. You can use FFMPEG tool to convert this WAV to MP3 or any other format for further use

The technology used here is, the plugin uses hidden swf file to record the voice and save the binary data in browser’s cache and when the recording finishes, it sends the data to webserver. Thats why you don’t need any Flash media server to capture the recording on time.

The plugin is good for recording voice less than 180 seconds (3 min), else the time to upload the final data to server takes longer.

Feel free to add comments here if the plugin causes any problem or error.

Those who wish to continue the development, the GIT version is available at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

 

60 thoughts on “jRecorder – jQuery plugin for audio recording

  1. rcampoverde

    Hi Mr Me
    I have a problem when I call $.Jrecorder.sendData(); the file is not uploaded to the server.

    This is part of my code:

    function doSave(){
    alert(“saving);
    $.jRecorder.sendData();
    alert(“saved”);
    ………more to do…….
    }

    I go to the path and nothing, the file was not saved.

    This is the host setting:

    ‘host’: ‘http://xxx.xxx.xxx.xxx/recordwav/record.php?filename=test.wav’

    I tested your example and works fine.
    Can you help me?
    Thanx

  2. Iamar

    Hi,

    Terrific work! Really awesome.

    I got it working on chrome and firefox, but IE, as always, is giving problems.

    I’ve fixed the trailing comma, but still flash’s permission popup is not appearing.

    Any clue?

    Thank you so much, Iamar.

      1. ahmad

        i use project shine and edit your source code in action script but does not working convert to mp3
        code :
        import fr.kikko.lab.ShineMP3Encoder;

        private function makemp3():void{
        mp3Bytes.position = 0;
        mp3Encoder = new ShineMP3Encoder(mp3Bytes);
        mp3Encoder.addEventListener(Event.COMPLETE, mp3EncodeComplete);
        mp3Encoder.start();
        }
        private function mp3EncodeComplete(e:Event):void
        {
        mymp3data = mp3Encoder.mp3Data;
        finalize_recording();
        }
        //functioon send data to server
        private function finalize_recording():void
        {
        var _var1:String= ”;

        var globalParam = LoaderInfo(this.root.loaderInfo).parameters;
        for (var element:String in globalParam) {
        if (element == ‘host’){
        _var1 = globalParam[element];
        }
        }

        ExternalInterface.call(“$.jRecorder.callback_finished_recording”);

        if(_var1 != ”)
        {
        var req:URLRequest = new URLRequest(_var1);
        req.contentType = ‘application/octet-stream’;
        req.method = URLRequestMethod.POST;
        req.data = recorder.output;

        var loader:URLLoader = new URLLoader(req);
        ExternalInterface.call(“$.jRecorder.callback_finished_sending”);

        }

        }

Leave a Reply