jRecorder 1.1 with Preview option is released

by Mr Me on December 14, 2011 in Downloads, Flash, general, html, php, php source code, webworld

Two months ago, I published a jQuery plugin to record audio from browser (without any Media server) called jRecorder

I got many responses and requests to maintain the code with new enhancements and some bug fixes.

Based on that, a new version (1.1) is released which has the capability to preview the recorded audio before sending to the server.

See the example implementation and documentation here.

Also I made this source open and available for anybody to develop at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

60 Comments

60 Responses to “jRecorder 1.1 with Preview option is released”

Joakim Calais December 15, 2011 at 4:47 pm #

Hi, amazing plugin. Would there be a way to send different variable parameter each time you save the audio? In your example you call the file “acceptfile.php”. Could I call a different url each time, without re-initialising the flash in between? So acceptfile.php?eventId=13, eventId=14 etc?

Reply
Joakim Calais December 15, 2011 at 5:09 pm #

How exactly do you tell it NOT to preview the sound or play it back? I just want to send it to the server, but now the recording machine starts playing it no matter what I do. It would be great, if we could control the setting.

Reply
- Mr Me December 15, 2011 at 5:37 pm #
  
  I added the old version in GitHub, please use that
  
  Reply
nando February 5, 2012 at 2:59 am #

is it possible to ask for the microphone permission (the adobe popup)
when the script is initialized instead of after the record button is pushed?

the reason is i want to start recording on mousedown and send and post on mouseup
but the permission alert gets in the way..

thank you for your time,,

Reply
Tarakanta February 8, 2012 at 1:51 am #

Sir can I have your email Id please.

Reply
- Mr Me April 5, 2012 at 4:26 pm #
  
  admin.sajithmr@googlemail.com
  
  Reply
oluwaseun February 11, 2012 at 5:40 pm #

hello Mr Me..i tried using this script for my php project..i can record and play back i cant send the recorded file to the directly i specified…

it will only say the file has been sent to the server and i confirmed the local directory on my system..

how can you be of help?

thanks

Reply
- Mr Me February 12, 2012 at 2:28 am #
  
  There may be a mistake in your file path configuration. Please check
  
  Reply
  - Arif Ceylan February 13, 2012 at 1:54 am #
    
    sorry. which comma?
    
    Reply
    - Arif Ceylan February 13, 2012 at 2:10 am #
      
      wrong reply. please delete it…
      
      Reply
      - critic November 14, 2012 at 7:59 pm #
        
        testing critic
        
        Reply
Kmitec March 6, 2012 at 8:26 am #

Hi MrMe

In your example1.html under Chrome I am using:
$.jRecorder(
{
host : ‘http://myhost:8100/Recorder/acceptfile.php?filename=hello.wav’
}
)

It records and plays back OK, but SendData just doing nothing.
Is there any way around or a place on client where to pick-up the recorded file?

Thanks

Reply
- Mr Me March 10, 2012 at 10:58 pm #
  
  It may be a mistake in send data url configuration, you need to pass the absolute path (not relative as it is uploaded from flash) to your server upload php script file. Try giving path like http://domain.com/upload.php
  
  Reply
  - Roldan March 16, 2012 at 5:20 pm #
    
    Mr Me, I am developing a website (a collaborative dictionary) that is suppose to record the pronunciation of the word. Can I edit the source code so that it will only record for at most 10 seconds? Thanks. I haven’t tried you plug-in yet but I commend you for having it available to public.
    
    Reply
    - Mr Me March 19, 2012 at 9:25 pm #
      
      Feel free to edit this code for your usage, it is public.
      
      Reply
Kapil March 22, 2012 at 12:20 pm #

Hi there,

I was trying to use the plugin and found it very good for my requirements. There is one issue that I can’t add post parameters on runtime. is there any way to send parameters to server in runtime? Something like addPostparams method ?

Cheers,
Kapil

Reply
- Mr Me March 22, 2012 at 7:32 pm #
  
  You can pass any number of parameters with server url parameter using & [GET method]
  
  Reply
  - Kapil March 28, 2012 at 12:47 pm #
    
    Thx for the reply.
    
    Well, I meant passing the additional parameters to the server using javascript after the flash object is created e.g. I wanted to send values from two additional fields along with the recorded file in the server url. These values should be enter by user in a form where user is trying to record the voice.
    
    lemme know if you require anymore information.
    
    Reply
    - Mr Me March 30, 2012 at 2:21 pm #
      
      Can’t you pass these user information separately, via normal form submission or using Ajax. Why would you need to use same flash url to pass user info. You can use an unique id for both request. It is simple.
      
      Reply
      - Kapil March 31, 2012 at 7:40 pm #
        
        Yes, I have to take the reference for the unique identifier now & making two calls but was wondering if there could be any other functions to make single request.
        
        Also I am trying to integrate with a platform which is based on prototype javascript. I was able to make start/stop/send but somehow callback are not working (I used Jquery’s noConflict function to make it work). Any tips to make it work…
        
        FYI, Standalone demo works fine but not with prototype.
        
        Reply
        
        Kapil April 2, 2012 at 1:19 pm #
        
        hi there,
        
        I have looked at your code for Main.cs and found that you are using $ for javascript callback. Is it possible for you to change it to ‘jQuery’.
        
        Btw I am not flash expert and haven’t done programming in the flash too but if you or anyone can compile it with above changes that would be gr8 help to me.
        
        Reply
        
        Mr Me April 2, 2012 at 10:06 pm #
        
        Good point. I shall do that in next version, on the same time you can edit the source and compile if you have flash installed
        
        Reply
        
        Kapil April 6, 2012 at 4:20 pm #
        
        Hi there,
        
        I was able to fix the Main.cs for all of my current issues. I have fixed following issues:
        
        1. It should be running fine with any javascript framework like prototype. You just need to initialize jquery’s noConflict.
        2. Fixed the server upload callback bug which returned the callback without waiting for full upload.
        3. Added functions to add/remove parameter on the fly to the server url.
        
        I think these features might be useful for other developers as well. Can you guide me how can I contribute to your wonderful project ?
        
        Cheers,
        Kapil
        
        Reply
        
        Mr Me April 13, 2012 at 9:23 pm #
        
        Good job Kapil, go to github (create an account if you don’t have one and it’s free) and checkout my code, make your changes and commit.
        
        Reply
        
        Kapil April 16, 2012 at 9:40 am #
        
        Hi there,
        
        I have created the account in github and requested you to merge the changes.
        
        Please take a look at the changes and allow the merge.
        
        Cheers,
        Kapil
        
        Mr Me April 18, 2012 at 10:00 pm #
        
        Thank you, i will do that
        
        nazz May 15, 2012 at 9:51 am #
        
        Hello there,
        Is there any way I can get this change? I want to get this thing fixed :
        
        2. Fixed the server upload callback bug which returned the callback without waiting for full upload.
        
        and it is very urgent. Can you please get me the updated swf file?
        
        Reply
        
        Kris May 18, 2012 at 1:16 pm #
        
        Hello, Im interested in this updated code as well.
        2. Fixed the server upload callback bug which returned the callback without waiting for full upload.
        3. Added functions to add/remove parameter on the fly to the server url.
        
        Without them I cant access or save the input recording properly.
        
        Please help me out.
        Thanks.
        
        Kris May 18, 2012 at 1:17 pm #
        
        Hello, Im interested in this updated code as well.
        Without them I cant access or save the input recording properly.
        
        Please help me out.
        Thanks.
        
        Reply
        
        Nazz May 29, 2012 at 8:55 am #
        
        I have the modified swf file. Please contact me @ nazz007online@gmail.com if you need it.
  - Eliot Lee November 21, 2012 at 6:14 pm #
    
    Doesn’t work for me. And by default, your PHP upload script doesn’t get the $_REQUEST['filename'] passed correctly, It just saves as test.wav.
    
    Reply
J.Hussain March 28, 2012 at 4:37 pm #

Hi Sajith,

Thanks for your wonderful article. I got what i was expecting…But still i need your help, Actually i wanted to mix another audio file with recorded the voice. Is dat possible by php?

Thanks in Adv!

Reply
- Mr Me March 30, 2012 at 2:17 pm #
  
  You can use ffmpeg from server side to mix any audio with this recorded voice.
  
  Reply
Hari April 4, 2012 at 11:51 pm #

Can we add a pause, fast forward, rewind functionality in the plugin??

Reply
Arslan April 5, 2012 at 3:44 pm #

hi
i am making this jrecorder in asp.net.but this is not working in asp.net.can it be possible to use this in asp.net and how can i save the recorded??waiting for your reply

Reply
- Mr Me April 5, 2012 at 4:25 pm #
  
  Basically jrecoder works in client side (Flash + javascript). The server dependency is only when we save the file. You can use native methods to accept a POST file in server side, not matter which server script you are using.
  
  Reply
- Nikunj July 13, 2012 at 8:11 am #
  
  Hello Arslan,
  
  If you have implemented jrecorder with asp.net then can you please provide me the sample?
  
  Reply
Mr. H April 21, 2012 at 2:06 pm #

Hello, Great Job!

BUT COULD U PLEASE PROVIDE A SOLUTION FOR IE
It is not working on IE

Please help…

thanks

Reply
- nazz May 10, 2012 at 3:44 pm #
  
  Hello, It is working well if mic is there. But doesn’t return an error if no mic is detected. How to fix this?
  
  Reply
Bharpinder May 27, 2012 at 3:17 pm #

Hi,

its not working in linux.
i am using firefox
any suggestion..?

Reply
Fernando May 31, 2012 at 7:53 pm #

Hello,
where I can find the older version of the jRecorder.SWF (with no auto preview). In github only the .FLA file is there.

Thanks a LOT.

Reply
yug July 5, 2012 at 3:04 pm #

Hi Mr.Sajith,

This is very useful plug-in for us. But we are looking for minor changes in it.
1. Is there any way to disable auto preview. Instead auto preview we need separate preview button
2. At the same time puase/stop/replay options
3. Recorded file’s bitrate is 705kbps so the file size is increasing 100kb per 1sec record. Can we reduce bitrate so the file size will be decreased and uploading will be easy.

Thanks,

Reply
Shawn July 7, 2012 at 7:19 pm #

Hi,

Can we please have the features like FastForward, Short Rewind and so on, just like any audio players; and Pause, Append, Insert and Over Write to Recording?

Regards,
Shawn.

Reply
aliu July 31, 2012 at 8:41 am #

Hi Mr. Sajith,

Question: Is there a way to retrieve the response text in javascript (like callback function) returned by the acceptfile.php? (In your example php, the text: “No file” or “done”)

Regards,
aliu

Reply
pask August 21, 2012 at 2:09 pm #

I’ve used the old version in order to avoid preview, but it seems senddata function does not exist un jrecorder-1.0 file.

How can I upload the recorded audio to the server using the old version?

thanks

Reply
Rajesh Gupta September 12, 2012 at 1:52 pm #

I want to save recorded file to my server i am using jsp. Please Help me…

Reply
chaitanya September 27, 2012 at 10:59 am #

hello,
any one can please tell me how to integrate in website

Reply
shashank October 3, 2012 at 6:50 pm #

Dear Sir ,

I am unable to save the recorded voice to the specified path as mentioned.So please suggest me the method to save the file

Reply
Muhamad siddique October 13, 2012 at 10:45 pm #

Any one please help me how to receive file in asp.net c#

Reply
Raghava October 25, 2012 at 7:08 pm #

Hi,

Everything is fine But i want the accept file in asp code can anyone send it .I would be thankful

Reply
evris October 30, 2012 at 4:24 pm #

Hello,
Great Job. I am wandering if you plan to add a few things.

1) A Pause Recording option would be useful
2) An MP3 encoding before submission to the server
3) A way to avoid preview when you stop the recording

Thank you in advance

Reply
Francisco Molinero November 9, 2012 at 5:55 pm #

Please,
Where I can find a web with jrcorder imlpemented?

I want to introduce on my website http://www.dialgo.com but I can test the results before

Reply
shah khalid November 27, 2012 at 3:43 pm #

i want to change time limit how can i change in it.

Reply
Allen November 29, 2012 at 10:08 pm #

Hi,

great little plugin – trying to get it to work locally after downloading and get this error in all browsers:

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

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

What I did for test was:

(1) Download files to local machine
(2) Open browser to local file file:///C:/Data/JQueryVoiceRecorder/jRecorder/example1.html
(3) Click “Record” button – then error message appears in console window.

Any ideas? … I assume this is something small as it works when loading from your website.
I will be integrating with asp.net

thanks.

Reply
viniiius January 26, 2013 at 1:51 am #

Hello!

How do I upload to my server? I’m using for path:

$.jRecorder(

{
host : ‘http://localhost/rec/recordings/’ , // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

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 : 'jRecorder.swf',

}

and didn't worked.

Thanks!

Reply
- Mr Me January 28, 2013 at 11:32 am #
  
  Read it from your local host rec/recordings end point from the POST body as binary
  
  Reply
seb January 30, 2013 at 2:37 pm #

great! How about adding a play method?

Reply
Jonathan February 10, 2013 at 4:03 am #

Excellent code thanks, but I have no problem achieving hello.wav save the file, I need to change the code to work? thanks

host : ‘http://localhost:/myfolder/acceptfile.php?filename=hello.wav’ , //replace with your server path please

Reply
emiliano February 12, 2013 at 9:13 pm #

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

Reply
sushil February 22, 2013 at 5:07 pm #

Hi Sajith,

This code is working independently as soon as I integrate it in another file, the code
$.jRecorder(

{
host : ‘http://localhost/jRecorder/acceptfile.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 : ‘jRecorder.swf’,

}
does not work. Also the default value of “leve;” i.e. -1 is not shown. When I click on Record button, I m getting error “Uncaught TypeError: Cannot call method ‘record’ of undefined”.

What I am doing wrong with integration. Although there are much more js files on the same page, but no conflict is there.

Sushil

Reply