Wednesday 26th October 2011

by Mr Me

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.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.jRecorder ({
'rec_width': '300',
'rec_height': '200',
'rec_top': '0px',
'rec_left': '0px',
'recorderlayout_id' : 'flashrecarea',
'recorder_id' : 'audiorecorder',
'recorder_name': 'audiorecorder',
'wmode' : 'transparent',
'bgcolor': '#ff0000',
'swf_path': 'jRecorder.swf',
'host': 'acceptfile.php?filename=hello.wav',
'callback_started_recording' : function(){},
'callback_finished_recording' : function(){},
'callback_stopped_recording': function(){},
'callback_error_recording' : function(){},
'callback_activityTime': function(time){},
'callback_activityLevel' : function(level){}
});

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

 

· · · ◊ ◊ ◊ · · ·

277 Responses to “jRecorder – jQuery plugin for audio recording”

  1. Darren says:

    How can I get an upload to the server confirmation back? I need to know when the upload is 100% complete! Thanks!

  2. Daren says:

    How can I adjust the sampling rate? It is recording in 44,100Hz. I would like to change that. Would that have to be done inside the flash file?

  3. Sara says:

    Hi Everybody,
    Can we specify the name of the file at runtime , each time we start a new recording?
    I will be so much grateful if anybody can help me.

    Sara.

  4. Sara says:

    Hi everybody,
    . Can someone please tell me how can I specify the name of the file each time I record the voice.Please its an urgent need.I will be so much thankful if anybody can help me.

  5. Hammad says:

    HI

    I am not a programmer. WIll you tell me how can i use your plugin to incooperate sound recording option in my website. Plz email me the procedure (HOW TO) @ hammad.moeen@gmail.com

  6. magesh says:

    i tried to chnage swf file to have 8000khz but still not working.any update how to chnage

  7. ibrahim says:

    how to integrate it with java

  8. emiliano says:

    how could do not to stop when I press play?

  9. Jonathan says:

    I fail to save the file on localhost hello.wav, I change something in the code? so far modify this line

    host : ‘http://localhost:/myfolder/acceptfile.php?filename=hello.wav’ ,

  10. Sara says:

    Hi,
    Admin thanks for this wonderful script and this is really awesome.A little bit favor is needed more.Can you please tell me how to remove the Allow and Deny options windows and directly srtart recording upon record button click?

    Will be waiting for your response.
    Thanks again.

  11. Makara says:

    Dear,

    Thanks for your plugin. I’ve been using it in my project. Everything is fine, except for one thing. It’s when the user clicks on “Deny” button. The flash object is hidden, but its div container is not. It blocks all things underneath it. It would be great if the plugin also hides the div container as well.

  12. Sergio says:

    Hey everyone -

    I was wondering if anyone can help me figure out how i can pass more than one variable to the acceptfile.php. I tried adding the following to the “host” option “?filename=test&id=1″ but only the filename was passed. Can we add more variables in there?

    Thanks

  13. Richard says:

    This works great in Firefox but doesn’t do anything in Internet Explorer for me. Could it be a setting for IE that I am missing, a security thing or such?

  14. Kris says:

    Is there a way to get the response text from the host php file?

    echo ‘File was saved as blah blah blah’;

  15. Vikash Sharma says:

    how can i get more clear and reduced voice from jrecorder

  16. phpspider says:

    Hello,

    I am getting this error

    TypeError: getFlashMovie(…).jStartRecording is not a function
    Source File: http://www.sajithmr.me/jrecorder/jRecorder.js
    Line: 163

    on the following url

    http://www.sajithmr.me/jrecorder/example1.html

    Thanks

  17. JOHN says:

    when i try play example in IE 0.8 don’t work

    what can i do to play example in IE 0.8

  18. SINE says:

    *NEW: You can preview the recorded voice before sending to Server

    ——
    The new Features above really bugs me.
    when i click the ‘stop’ button, I just want to stop recording,but i don’t want to play the voice at once.
    Is there any way to add a ‘play’ function,when i click a button then it start to play?

  19. nikhil says:

    hi , can you please help to disable preview option in new version

  20. Awais says:

    Thanks a lot for this amazing script sir,

    I would like to do Http Live streaming for Apple devices, How do I send the file at run time i.e while recording to ffmpeg so that it could segment it.

    Beacuse it saves .wav file only when i stop it. what i want sir is, the moment recording is started it should be able to send the recording to ffmpeg. is that possible , if yes then Please help sir.

  21. markus says:

    why if i use web-player for play the file.wav….not start….never???
    i use this for play the file
    http://wpaudioplayer.com/standalone/

    but not work…never!?

  22. gx says:

    “TypeError: getFlashMovie(jRecorderSettings.recorder_name).jStartRecording is not a function
    [在此错误处中断]

    getFlashMovie(jRecorderSettings['recorder_name']).jStartRecording(max_time);”

    Errors in FF,is there anybody the same ?

  23. raman says:

    in example code i removed jrecorder.zip is removed means is ask not for allow dency window. can u please help me

  24. raman says:

    in example code i removed jrecorder.zip is removed means is ask for allow dency window. can u please help me

  25. vinoth says:

    Hi
    i am trying to develop audio recording in asp.net . i had searched a lot about this task . i didn’t get.
    can u give any solution to this.

  26. Hello!

    Good recorder. But can you clarify:

    >The plugin is good for recording voice less than 180 seconds

    But I can’t add sound more than 30 sec.
    I’ve tried these ways:

    $.jRecorder.record(600);
    and
    $.jRecorder.record();

  27. Nikhil Gupta says:

    Hi,

    This package works fine 100% on windows and then I uploaded this project on my cent os Linux system. Everything works fine But it doesn’t create .wav file. Please suggest me what should I do to get it worked om my linux system.

  28. Sunil says:

    hi dear
    Where is the top picture used, i need record ,play ,stop button flash object

    Thanks

  29. Davo says:

    Just awesome , thank you very much !!!

  30. Eric says:

    If this scripts cant work in your IE, pls try to modify this line in jRecorder.js

    change “if($.browser.msie && Number($.browser.version) <= 8) {"

    to

    "if($.browser.msie) {"

    hope this helps

  31. Conflicker says:

    Hello Mr Me

    This example is not working http://www.sajithmr.me/jrecorder/example2.html.

    I’m using Ubuntu 11, firefox 17.0 and flash player 10, I’m just wondering if it has something to do with my applications.

    Thanks

  32. Conflicker says:

    The swf file is included in fact it is showing in the browser, but jStartRecording function is not recognized. I wonder if it has something to do with browser compatibility.

    I’m using firefox 17.0.

    Thanks for the help.

  33. Conflicker says:

    Not working at all, firebug error console says:

    TypeError: getFlashMovie(…).jStartRecording is not a function
    [Break On This Error]

    getFlashMovie(jRecorderSettings['recorder_name']).jStartRecording(max_time);

    Any Idea?

  34. Wiilis says:

    Can the recorded voice be saved as binary stream to a database?

  35. Eliot Lee says:

    Does not seem to work in WordPress environment. I am using WP 3.4.2 and have included the jRecorder.js file and also copied all the codes from the example file. The buttons do not work. I keep getting the following error:

    TypeError: getFlashMovie(jRecorderSettings.recorder_name).jStartRecording is not a function jRecorder.js Line 166

    I do have the following settings embedded in my script within the body.

    jQuery.jRecorder({
    ‘rec_width’: ’300′,
    ‘rec_height’: ’200′,
    ‘rec_top’: ’0px’,
    ‘rec_left’: ’0px’,
    ‘recorderlayout_id’ : ‘flashrecarea’,
    ‘recorder_id’ : ‘audiorecorder’,
    ‘recorder_name’: ‘audiorecorder’,
    ‘wmode’: ‘transparent’,
    ‘bgcolor’: ‘#ff0000′,
    ‘host’: ‘http:///wp-admin/admin.php?page=custom-reviews/custom-audio-file-manage.php&filename=hello.wav’ , //replace with your server path please
    ‘callback_started_recording’: function(){callback_started(); },
    ‘callback_stopped_recording’: function(){callback_stopped(); },
    ‘callback_activityLevel’: function(level){callback_activityLevel(level); },
    ‘callback_activityTime’: function(time){callback_activityTime(time); },
    ‘callback_finished_sending’: function(time){ callback_finished_sending() },
    ‘swf_path’: ‘/wp-content/themes/ppre/js/jRecorder.swf’

    });

    Using jQuery to replace the $. Still not working.

    Anyone had success using this plugin within WordPress (admin dashboard area as part of a plugin).

  36. vivekanand sharma says:

    is there any sucess function in ‘host’: —- to check whether the file is saved successfully on the server?

  37. olivier says:

    It is possible to get and store data locally (and then play back content) instead of sending them to a server?

  38. Chris says:

    Is anyone else having a problem passing more than one URL variable?

    Whenever I set the “host” parameter to have more than one URL variable (“http://www.myserver.com/upload.cfm?filename=test.wav&username=test”), only the first URL variable is passed. When I look at it in the Chrome browser’s developer tools under the Network section, the “Request URL” shows as “http://www.myserver.com/upload.cfm?filename=test.wav”

    Yes, I’m using Coldfusion, but that really shouldn’t matter… it’s just a different way to save the posted content.

    Any suggestions?!

  39. Saxo says:

    Hi,
    To see the time format mm:ss

    function callback_activityTime(time)
    {
    minutes = Math.floor(time/60);
    secondes = time%60;
    minutes_secondes = ((minutes <10) ? "0"+minutes : minutes) +":"+ ((secondes <10) ? "0"+secondes : secondes);

    $('#time').html(minutes_secondes);
    }

  40. Don says:

    I’m using IE, and I created this page with Serif.

  41. Don says:

    Hi
    I want to install jrecorder on my site, and let the user to email me their audio file. I’m not that sophisticated with this, but I have tried to embed your source code into my website and I’m not able to get your recorder to work. Is this the right code and do I have all of it?

    $.jRecorder ({
    ‘rec_width’: ’300′,
    ‘rec_height’: ’200′,
    ‘rec_top’: ’0px’,
    ‘rec_left’: ’0px’,
    ‘recorderlayout_id’ : ‘flashrecarea’,
    ‘recorder_id’ : ‘audiorecorder’,
    ‘recorder_name’: ‘audiorecorder’,
    ‘wmode’ : ‘transparent’,
    ‘bgcolor’: ‘#ff0000′,
    ‘swf_path’: ‘jRecorder.swf’,
    ‘host’: ‘acceptfile.php?filename=hello.wav’,
    ‘callback_started_recording’ : function(){},
    ‘callback_finished_recording’ : function(){},
    ‘callback_stopped_recording’: function(){},
    ‘callback_error_recording’ : function(){},
    ‘callback_activityTime’: function(time){},
    ‘callback_activityLevel’ : function(level){}
    });

    I paste the code into the body and I can see it just sitting there on the page after I refresh it not doing anyting. I would appreciate any help. Thanks.

  42. Dinh says:

    great code! thanks!

    For any problem in IE, go to end of line 52 and delete “,” to fix it.
    For the swf work, upload it to a host or localhost, because the address of .swf file must like “http://…/../”

    i hope in next version, it can convert file to mp3 then upload to server, it will save times to upload.

  43. umang says:

    hi i have used this tool in sharepoint everything is work fine but the audio recorded in jrecorder is not play in jwplayer and i want to use jwplayer to play an audio help me if you know anything regarding it.

    thanks

  44. Kalyan Polasi says:

    I have downloaded the package and tried to open example1 in borwser. but I am not able to get the recording worked in any of the browsers, I have give valid referce to swf as well.

    If I directly access the page over net, recording is working fine, but, if I downlaod the same page and open it with browser also not working
    Please suggest if I have missed any.

  45. PHP Friend says:

    Hi,

    After click on stop button I want to stop auto play the current recording. can you help me how I can stop this.

    Thanks in advance.

  46. Tanas Alexandru Florin says:

    Hi

    Thanks very much for this plugin.

    Its possible send the registration to folder ? More registration not only hello.wav

    Im triyng chage:

    $upload_path = dirname(__FILE__). ‘/’;

    $filename = $_REQUEST['filename'];

    $fp = fopen($upload_path.”/”.$filename.”.wav”, “wb”, “.mp3″);

    but not work

    Thanks again

  47. Rob says:

    This looks like a great plugin!!

    Is there a way to limit the recording time to say 20 seconds?

    Thanks,
    Rob

  48. serkan says:

    this software does not work

  49. John says:

    I tried to record continuous speech with approximately same level, it begins nicely. but after a short time (2 sec) the record level begins falling and nothing captured until I change my voice volume.
    How to solve such issue to allow me recording continuous – same level voice?

  50. David says:

    I’m using ColdFusion, not PHP. Do you have a CF snippet to write the file, or how can I set the recorded data value to a form field?

    Thanks

  51. Rajesh Gupta says:

    Can i use this plugin for jsp file ?

  52. Zach says:

    I’m using python/django. Is there a way to make the host post to an ajax call that points to a python view?

    I tried but got a 403 forbidden error.

    Thanks!

    • Stephen Wolff says:

      You could try the @csrf_exempt decorator?

      (use from django.views.decorators.csrf import csrf_exempt to import it)

  53. Gregory says:

    Hi Sajith, really great plugin!

    We are interested in using it for teachers making audio notes at our school.
    Could you help us out by letting us know which license applies to this plugin?

    Regards, Gregory

  54. Abdul Quader says:

    Asp.net code for aspx page to receive audio file

    string path = Server.MapPath(“filename.wav”);

    try
    {
    //save to web servers file system
    //using(Stream output = new FileStream(Server.MapPath(“~/Forms/Default/MyFirstPDF.pdf”), FileMode.Create))
    using (FileStream output = File.Create(path))
    using (Stream input = Request.InputStream)
    {
    byte[] buffer = new byte[input.Length];
    int bytesRead;
    while ((bytesRead = input.Read(buffer, 0, buffer.Length)) > 0)
    {
    output.Write(buffer, 0, bytesRead);
    }

    output.Close();
    }

    }
    catch (Exception ex)
    {

    }

    • Sreekanth says:

      Hi,

      Nice work.I am having small issue in saving the file using ASP.NET.after saving it is saying as file is not a valid WAV format file.
      Please help me on this.

      Regards,
      Sreekanth

  55. elga says:

    Hello,
    First of all – THANK you very much.
    Currently this module save the recorded voice to the same file-name (overwrite).
    Is there a way to send to the module the filename ?
    something like that:
    $.jRecorder.sendData(“myCurrentFile”);
    So we will have the ability to dynamically decide what is the filename [maybe per user-request]?

    Thanks!

  56. Manoj says:

    sir,, i want to pause button in this ,, can you plz give me code for this

    Thanks

  57. Hi,

    When I press Record button, I start recording the voice. When I press the stop button, I don’t want to play the audio. Is there a way where when we press the stop button, audio doesn’t play.

    Thanks

    Deepak Bhatia

  58. Ricardo says:

    would have some form of record on another track to mix?

  59. Hi,

    I am able to use the jRecorder on the Firefox with abobe flash player on windows. But on linux it is not working. When I press the record button, I don’t get the window, Allow Flash to access the Microphone and Speakers.

    Please help.

    Regards

    Deepak Bhatia

  60. tiennguyen says:

    how to recording voice on ios ? thanks

  61. Hi,

    I am getting a 44 byte file at the server. Why such a small file is coming to server ?

    Regards

    Deepak Bhatia

  62. tiennguyen says:

    thanks for good plugin. But how to adding button pause recording and resume recording?
    Thanks!

  63. Mark says:

    Found the solution to my issue. For anyone using Prototype and jQuery: The standard jQuery.noConflict() will not work — none of the callbacks work. To make this work with Prototype, simply insert all your code in the jQuery document.ready() function and it works fine. Anything outside of that, even when calling jQuery instead of $, won’t work.

  64. Mark says:

    I can’t get any of the callback functions to work in FireFox or Safari. Module correctly records and stops and playsback. But none of the callbacks are ever called. I copied the example page exactly. Any ideas or suggestions?

  65. Manoj Dhalla says:

    Can we call the webservice method from the host parameter. how to call the webservice method and passing the file name as paramweter in the host parameter in asp.net

    • Manoj Dhalla says:

      Eg :

      $.jRecorder(

      {
      host : ‘WebService.asmx?filename=hello.wav’ ,

      callback_started_recording: function(){callback_started(); },
      callback_stopped_recording: function(){callback_stopped(); },
      callback_activityLevel: function(){callback_activityLevel(); },
      callback_activityTime: function(time){callback_activityTime(time); },
      callback_finished_sending: function(time){ callback_finished_sending() },
      callback_error_recording : function(){callback_error(); },
      swf_path : ‘jRecorder.swf’
      }
      );

  66. Eric says:

    Thanks! This is awesome.

    If you are going to update this someday, maybe look at the callback for ‘finished saving’ and get it documented / working. Other than that, this is wonderful!

  67. Robbie says:

    Hi, got eveything to work fine. Nice job, quick question…
    Is there any way that this can support multiple recording files. i.e. when Someone recors something it is saved as “hello.wav”, if another recording is made can it be saved as “hello2.wav” or something similar? Because if I am not wrong everytime a recording is made the original wav file gets overwritten by the new one.

    Thanks in advance!

    • Sergio Samayoa says:

      Your server code should handle that.
      For example, I handle the POST with a Servlet. That servlet generates a random file name in which audio is stored then such file name is added to user’s session data so application can grab the audio file and do whatever is needed (store in database blob field for example).

      Regards.

  68. Nikunj says:

    Hello Sir,

    I have added your plugin my script. But in IE i am getting Object does not support property of method jStartRecording. I had given a proper path for jRecorder.swf. Then also error is coming. And this error is coming in IE only.

    And also When i click on send data, File is not going to save. I had also check the host path. It is coming properly. So can you please help me for the same.

    Thank

  69. Pir says:

    Sir your demo http://www.sajithmr.me/jrecorder/example1.html
    is not working in IE

    Do you have any modified version for IE???

    Thanks in advance!

  70. Pir says:

    http://172.16.0.137/jRecorder/html/example2.html

    The above works fine in Chrome, FireFox
    But IE gives below error

    — getFlashMovie(jRecorderSettings['recorder_name']).jStartRecording(max_time);

    Webpage error details
    ==================

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; EasyBits GO v1.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Thu, 12 Jul 2012 10:49:10 UTC

    Message: Expected identifier, string or number
    Line: 60
    Char: 6
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/example2.html

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 172
    Char: 3
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

    Message: ‘undefined’ is null or not an object
    Line: 163
    Char: 9
    Code: 0
    URI: http://172.16.0.137/jRecorder/html/jRecorder.js

· · · ◊ ◊ ◊ · · ·

Leave a Reply

Need your support
More in php source code (4 of 31 articles)


In PHP coding, we spend most of the time for debugging. Either we use echo, print_r or var_dump to ...