Wednesday 14th December 2011

by Mr Me

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 Responses to “jRecorder 1.1 with Preview option is released”

  1. sushil says:

    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

  2. emiliano says:

    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

  3. Jonathan says:

    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

  4. seb says:

    great! How about adding a play method?

  5. viniiius says:

    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!

  6. Allen says:

    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.

  7. shah khalid says:

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

  8. 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

  9. evris says:

    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

  10. Raghava says:

    Hi,

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

  11. Muhamad siddique says:

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

  12. shashank says:

    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

  13. chaitanya says:

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

  14. Rajesh Gupta says:

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

  15. pask says:

    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

  16. aliu says:

    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

  17. Shawn says:

    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.

  18. yug says:

    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,

  19. Fernando says:

    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.

  20. Bharpinder says:

    Hi,

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

  21. Mr. H says:

    Hello, Great Job!

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

    Please help…

    thanks

  22. Arslan says:

    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

    • Mr Me says:

      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.

    • Nikunj says:

      Hello Arslan,

      If you have implemented jrecorder with asp.net then can you please provide me the sample?

  23. Hari says:

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

  24. J.Hussain says:

    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!

  25. Kapil says:

    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

    • Mr Me says:

      You can pass any number of parameters with server url parameter using & [GET method]

      • Kapil says:

        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.

        • Mr Me says:

          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.

          • Kapil says:

            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.

            • Kapil says:

              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.

              • Mr Me says:

                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

                • Kapil says:

                  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

                  • Mr Me says:

                    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.

                  • nazz says:

                    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?

                    • Kris says:

                      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 says:

                    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.

      • Eliot Lee says:

        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.

  26. Kmitec says:

    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

    • Mr Me says:

      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

      • Roldan says:

        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.

  27. oluwaseun says:

    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

  28. Tarakanta says:

    Sir can I have your email Id please.

  29. nando says:

    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,,

  30. Joakim Calais says:

    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.

  31. Joakim Calais says:

    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?

· · · ◊ ◊ ◊ · · ·

Leave a Reply

Need your support
More in Downloads, Flash, general, html, php, php source code, webworld (12 of 195 articles)


Buzitweet is a blogging platform where anyone can register using a Facebook account and can post your articles. No matter ...