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
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!
Remove the trailing ‘,’ in line 52, that does the trick.
I tested with IE 6 (yes, 6!)
Regards.
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
I am also facing the same issue, but with all the browsers. Please suggest if I have missed any to include.
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!
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.
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!
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
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’
}
);
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?
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.
Hey can you help me? I am using my own jquery code and jRecorder. cannot figure out a solution help me!!
thanks for good plugin. But how to adding button pause recording and resume recording?
Thanks!
Hi,
I am getting a 44 byte file at the server. Why such a small file is coming to server ?
Regards
Deepak Bhatia
how to recording voice on ios ? thanks
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
i am also same problem..
use this for flash on ubuntu
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager02.html
would have some form of record on another track to mix?
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
@Deepak Bhatia Did you get the answer? Dear I want the same.
sir,, i want to pause button in this ,, can you plz give me code for this
Thanks
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!
Yes, it is upto you to set what the file name is
Thanks for your response.
I can’t see the option to set the filename in the sendData function.. I can see it only in the initialization phase. Are you sure I can send the filename in the *sendData* function ?
Thanks in advance!!
How do you do this?
Sir can you please elaborate a bit how to specify the dynamic name to the file?
@elga, did you get the answer ? How to specify the dynamic name to the file each time?
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)
{
}
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
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
Its GPL
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!
You could try the @csrf_exempt decorator?
(use from django.views.decorators.csrf import csrf_exempt to import it)
Can i use this plugin for jsp file ?
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
David,
Here’s how I did it in CF:
Looks like the code didn’t show up…
Grrr… how do you post code?
I’ll try one more time here, with spaces in the cf tags:
Ok, I give up.
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?
this software does not work
This looks like a great plugin!!
Is there a way to limit the recording time to say 20 seconds?
Thanks,
Rob
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
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.
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.
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
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.
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.
I’m using IE, and I created this page with Serif.
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);
}
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?!
I am also having this issue. I am using PHP.
Yes, I am having this same issue with PHP.
It is possible to get and store data locally (and then play back content) instead of sending them to a server?
is there any sucess function in ‘host’: —- to check whether the file is saved successfully on the server?
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).
@Eliot Lee:I have the same issue did you get the answer?
Can the recorded voice be saved as binary stream to a database?
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?
Your jquery.min.js is not correctly added.
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.
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
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
Just awesome , thank you very much !!!
hi dear
Where is the top picture used, i need record ,play ,stop button flash object
Thanks
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.
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();
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.
in example code i removed jrecorder.zip is removed means is ask for allow dency window. can u please help me
Did you get the answer raman ?
in example code i removed jrecorder.zip is removed means is ask not for allow dency window. can u please help me
“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 ?
哥们，他的例子里多了一个分号，去掉这个分号就好了···
swf_path : ‘jRecorder.swf’, // ‘,’ this is the bug in example1.html
I am getting same in chrome also
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!?
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.
hi , can you please help to disable preview option in new version
*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?
SINE: Did you get the answer?
when i try play example in IE 0.8 don’t work
what can i do to play example in IE 0.8
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
how can i get more clear and reduced voice from jrecorder
After Record Audio when I am trying to listen it , there is to much noise and not clear.
Is there a way to get the response text from the host php file?
echo ‘File was saved as blah blah blah’;
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?
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
Sergio Did you get the answer for that ?
I’m having the same issue. It only takes the first parameter. It looks like the issue is in the swf file. Any fix for this?
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.
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.
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’ ,
how could do not to stop when I press play?
how to integrate it with java
i tried to chnage swf file to have 8000khz but still not working.any update how to chnage
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
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.
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.
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?
Nevermind, I just used PHP to down sample after dumping to the server.
How can I get an upload to the server confirmation back? I need to know when the upload is 100% complete! Thanks!