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.
|
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
Hi,
That is the most useful plugin we’ve ever seen. But there is a problem with it. We think the problem is in the swf file (because we cannot find the crossdomain.xml string anywhere in html or js files.) It tries to find “http://yourhost.com or localhost/crossdomain.xml” and cannot find it anywhere (normally). Can you fix it?
Thanks.
Why do you need the crossdomain.xml file, it is not needed to implement this recorder. Did you see the example I provided ?
hi, your plugin is great, just what i’m looking for…
I have tried it and there’s a problem im the saved wave file. When you listen the wave file she’s running too faster…
How can i chenge this? thanks
Hi! Is it possible to add “Replay” option to it? I would like hear it before I upload it.
I will update the plugin with re-play option soon.
looks cool. would it be possible to record in higher resolution? 16bit/44khz but only for 10 seconds.
Error: getFlashMovie(jRecorderSettings.recorder_name).jStartRecording is not a function
Source File: file:///C:/xampp/htdocs/jRecorder/jRecorder.js
Line: 166
why is that i got this error please help….
You’re not correctly set the path to jRecorder.swf file.
where can i find this function???
jStartRecording(max_time);
please help me please i really need this one…. this is not working anymore.. i don’t know why..
even this example is not working..
http://www.sajithmr.me/jrecorder/example1.html
This is because
jRecorder.swf
is not in the path.
In the whole settings
var settings = {
‘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){}
};
You can place your related path for jRecorder.swf. Make sure this is on the right place.
Also try updating your flash plugin in your browser
how can we create higher quality audio?
looks cool. would it be possible to record in higher resolution? 16bit/44khz but only for 10 seconds
Hi! Nice work!
But it doesn’t work on any browsers, in fact only chrome for me… The flash pop up doesn’t work. I can’t clic on its buttons. What’s the matter?
Regards,
Bastien
hey, i have noticed that sometimes the plugin is not working.. do you have idea why its like that?
sometimes its working but sometimes its not working..
have you tried the plugins? this is not working.. what is the problem?
Awesome tool!
As a previous user mentioned, a replay option would be great.
Thank you very much, great work.
It will be available very soon, I am on it
Thanks again! Making this public is very kind.
Nice plugin, mr me!
any ideas on when you’ll be able to add playback/re-play functionality?
IF anybody wish to continue the development on this, GIT version is made public at https://github.com/sythoos/jRecorder/
jRecorder with Preview option is implemented:
http://www.sajithmr.me/jrecorder/
Thank you!
Hi Sajith,
Really a great job.
Thanks too for make this plugin as public..
Is it possible to turn off the automatic playback? also any thought on how to get this to work IE
anyone knows how to work in IE?
Hi Sajith,
I really want to thank you for this plugin, I was just about to start developing something like that, you saved my time
I want to know, what is the license of this plugin? can I use the plugin in my commercial projects?
Thanks in advance.
you can use this for any commercial projects.
HI Mr me:
I download the zip, and run example1.html, but recording does not work.
I am sure my chrome browser is ok, because I run example in your website quite well
Does ‘swf_path’: ‘jRecorder.swf’ mean example1.html and jRecorder.swf in the save directory?
Eiether place in same directory, else give the full path with ../../ mode or with http://domain.com/jRecorder.swf
Thanks for the awesome plugin ! My only question is whether it’s possible to disable the ‘stop’ command from previewing the recorded audio automatically ? For some reason – as soon as I hit the stop button, it starts playing the audio that was recorded. I looked at the actionscript Main.as code and it looks like you have it in there. I’m guessing I’d have to recompile the SWF if I wanted to make that fix myself ?
Yes, you want to edit AS file to disable automatic audio playback.
How to get Jrecorder to work for other browsers other than chrome…
Do you have instructions on how to compile the actionscript?
Hoping that this can be done using the open source flex sdk mxmlc…
it is working well in chrome but is not working in opera and ie browsers. could you please help me out??
Hello, great script, however as others state – It does not work in IE, or firefox. Here is the error –
[11:06:35.242] getFlashMovie(jRecorderSettings.recorder_name).jStartRecording is not a function @
jRecorder.js:163 is there a fix??
Hi,
my friend i can`t run your script in my website.
please go to this url and check it.
http://gemgroup.ir/jRecorder/jRecorder/example1.html
it can`t record any voice, level: -1.
please help me.
Thanks
Mr Me please help me
it didnt work on ie.
Error : ‘undefined’ or null object at line 164 in js file…
getFlashMovie(jRecorderSettings['recorder_name']).jStartRecording(max_time);
error at this line.
Remove the trailing comma in the jQuery initialization. In IE, it is causing that error.
there is a problem on internet explorer 8.
http://www.arifceylan.com/error.jpg
There is an error please check this one.. this is from your example…
http://s286.photobucket.com/albums/ll110/ljlerit/?action=view¤t=Error.png
It works fine in m Firefox, will have a look.
i am using firefox 10.0.1.. please view the link.. its the screenshot of the error.. why is that there is an error?
Did you get those error from this page: http://www.sajithmr.me/jrecorder/example1.html ?
Or any page you developed ?
yes i got that error from that page.. you can see it on the image that i have uploaded its from http://www.sajithmr.me/jrecorder/example1.html
Not working.. don’t know why… In your example its working perfectly but on client side ask to execute flash and then nothing is happening on clicking Record button..!! Help..!!
Use Firebug in Firefox and check for any script error, either the path of swf file or javascript may be missing. Paste your site link here, i can have a look.
Thanks for response.. !! Will try to check error… recently it is on the link http:// visjaipur . org/jRecorder/example1.html
Your problem is jQuery is missing. You need to place jquery.min.js in your server path, that file seems empty now : visjaipur.org/jRecorder/jquery.min.js
to use replay simply repeat this code
$(‘#replay’).click(function(){
$.jRecorder.stop();
})
Replay
Thanks… a lot.. Actually there was a problem in uploading the files… now working perfectly..!! on another link : http: //services.creativemukul. com/example1.html
i get this error in your example1
NetworkError: 404 Not Found – http://yourdomain.com/crossdomain.xml”
this error returned by firebug
Hello Sir, Is it possible to use this in asp.net.. if it is then what to do with server path… it’s not actually receiving any audio file.. at the given path…