Giter VIP home page Giter VIP logo

recorder.js's Introduction

Recorder.js

Introduction

Recorder.js is a JavaScript library to simply record audio in the browser. Currently the recording functionality is backed by Adobe Flash but will extended to open standards as soon as they are being adopted.

Getting started

  • Copy these 2 files somewhere into your website directory:
    • recorder.js
    • recorder.swf
  • Add the script to your HTML: <script type="text/javascript" src="path/to/recorder.swf"></script>
  • Use the Recorder object to initialize and record (see usage... :)

Examples

Usage

Recorder.initialize()

The Recorder needs to be initialized. Usage:

  Recorder.initialize({
    swfSrc: "./recorder.swf"                                  // URL to recorder.swf
    // optional:
    flashContainer: document.getElementById("somecontainer"), // (optional) element where recorder.swf will be placed (needs to be 230x140 px)
    onFlashSecurity: function(){                              // (optional) callback when the flash swf needs to be visible
                                                              // this allows you to hide/show the flashContainer element on demand.
    },
  });

If flashContainer and onFlashSecurity is not passed as options an invisible DIV element including the Recorder.swf will be inserted at the end of the BODY and will be displayed centered in the screen when necessary.

Recorder.record(options)

Will start recording audio until Recorder.stop() is called. Adobe Flash will ask the user for permission to access the microphone unless it was already given before. If thats the case the onFlashSecurity callback from the initialization will be called. Once the actual recording starts an onRecording callback that you can pass to as an option will be called.

Usage:

  Recorder.record({
    start: function(){                 // will be called when the recording started 
                                       // which could be delayed because Adobe Flash asks the user for microphone access permission
    }
    progress: function(milliseconds){  // will be called in a <1s frequency with the current position in milliseconds
      
    },
  });

Recorder.play(options)

Will play the recorded audio. Usage:

  Recorder.play({
    finished: function(){               // will be called when playback is finished
      
    },
    progress: function(milliseconds){  // will be called in a <1s frequency with the current position in milliseconds
      
    }
  })

Recorder.stop()

Will stop the current recording or playing.

Recorder.upload()

Will initiate a multipart POST (or PUT) to upload the recorded audio. Usage:

  Recorder.upload({
    method: "POST"                             // (not implemented) (optional, defaults to POST) HTTP Method can be either POST or PUT 
    url: "http://api.soundcloud.com/tracks",   // URL to upload to (needs to have a suitable crossdomain.xml for Adobe Flash)
    audioParam: "track[asset_data]",           // Name for the audio data parameter
    params: {                                  // Additional parameters (needs to be a flat object)
      "track[title]": "some track",
      "oauth_token":  "VALID_TOKEN"
    },
    success: function(responseText){           // will be called after successful upload
    
    },
    error: function(){                  // (not implemented) will be called if an error occurrs
    
    },
    progress: NULL                      // (not yet implemented)
  });

recorder.js's People

Contributors

brianchirls avatar jwagener avatar lylepratt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

recorder.js's Issues

Request permission in advance of recording

If possible, it would be great to be able to request microphone access permission separately from recording.

In my use case, timing is important so we need to make it very clear to the user when recording starts. We want to have a countdown, similar to how Mac Photobooth has a 3-2-1 before taking a picture. This won't really work if it counts down to a permission request, after which the recording starts immediately and without further warning. Ideally, we can request mic access without recording when the edit module is first loaded up so there's no further interruption.

Thanks.

the recorder.swf somehow can't work anymore

When I press "stop", the browser console shows the following:
Uncaught Error: Error calling method on NPObject. recorder.js:57
Recorder.stop recorder.js:57
stop jadyenlin.tw:117
e.Subscriber._notify combo:4
e.Subscriber.notify combo:5
e.CustomEvent._notify combo:4
e.CustomEvent._procSubs combo:4
e.CustomEvent.fireSimple combo:4
e.CustomEvent.fire combo:4
a.fn

Is there any idea?
Thank you~

Flash Error: Error calling method on NPObject. - {}

Noticed this recently on Windows 8

Testing on:
http://recorderjs.ponyho.st/test/test.html

Chrome Results are:
Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11

Audio start, stop, progress (1, 0, 1)Rerun
Died on test #1: Error calling method on NPObject. - {}

IE 10 Results are:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; .NET4.0E; .NET4.0C)

Audio start, stop, progress (1, 0, 1)Rerun1.Died on test #1: - {
"description": "",
"number": -2147467259,
"stack": "Error
at Anonymous function (Unknown script code:49:5)
at record (http://recorderjs.ponyho.st/recorder.js:46:5)
at recordForSeconds (http://recorderjs.ponyho.st/test/test.js:23:5)
at Anonymous function (http://recorderjs.ponyho.st/test/test.js:37:5)
at run (http://recorderjs.ponyho.st/test/qunit/qunit.js:106:4)
at Anonymous function (http://recorderjs.ponyho.st/test/qunit/qunit.js:239:5)
at process (http://recorderjs.ponyho.st/test/qunit/qunit.js:931:4)
at synchronize (http://recorderjs.ponyho.st/test/qunit/qunit.js:921:3)
at run (http://recorderjs.ponyho.st/test/qunit/qunit.js:238:4)
at process (http://recorderjs.ponyho.st/test/qunit/qunit.js:931:4)"
}

Thanks in advance.

Flash security box is not hiding if user deny

Hi,

If user deny the access to mic, flash "div" still there. how to trigger hide option if user click deny button.

and other thing there are two flash security windows are opening, while asking for permission? is both required?

Is possible to focus on privacy tab instead of focusing on Microphone volume tab?

Thanks
Peter

IE 8.0 flash issue

Have noticed on IE 8.0, the record samples here fail, but work on IE 9, Firefox, Chrome and Safari.
Flash version: 11.1.102.55
IE 8.0 (32-bit) on Vista (probably others)

/jwagener-recorder.js/examples/example-1.html

Also I see that the record examples at:
https://github.com/soundcloud/sc-connect/tree/master/examples
Fail as well in IE 8.0

Flash does seem to load however in:
sandbox/jwagener-recorder.js/flash/test.html

(Am using w/ Drupal)

Appreciate the work here - happy to provide more info it it can help.

Not working for web browsers on Android

Is anyone else having issues? I'm testing on the Firefox and Android Web Browsers with Flash 11.1. I know what you might be thinking, Flash is dead for Android, but until WebRTC features drop on the mobile versions of FireFox and Chrome then there isn't any other option :P.

Recorder.js not maintained at the moment.

Hey,

unfortunately I don't have the time at the moment to really take care of the issues here,
sorry!

In any way I'd recommend to use some newer WebRTC audio recording library that brings a flash fallback instead of using this library. (If anyone can recommend a good one please let me know and I'll link it from the project page.)

Cheers
johannes

Does the recorder work in Wordpress?

I tried to get the recorder to work in Wordpress but it doesn't work for me.

One time after having pressed "record" the cancelRecording event was raised.
Everytime the Flash dialog shows but it's empty, only the box is there but no text, buttons or anything else is visible.
Anybody any ideas?

Does anybody have this recorder working in Wordpress?

Thanks, Marc

Add limit to recording

i would like to add time limit (for example 10 seconds) to audio recording.

is that possible? thank you.

How to show allow/deny popup on Windows 8 IE10

Hi,

I am using recorder.js in my application to record sound...But on windows 8 IE10, most of the times allow/deny popup not appears, because of that code block which I written in start function not executed..

Recorder.record({
start: function () {
// This code block is not executed
});

and I am calling Recorder.record function automatically from my code and did not get allow/deny popup...Its working fine in IE9 and IE11 but this issue generates in IE10 only..

My Sample URL : http://flashsample.s3.amazonaws.com/index.html

while debugging recorder.js I found that when recorder.record() method call this._FlashContainer getting undefined. Although I initialized recorder object.

It seems like that the prompt is not show in the front of page but it getting hide behind it, because I can see flashobject code in view source.

When we manually allows the site for microphone/audio setting default then this works fine.

Can you please suggest what should I do to run correctly on IE10 also..

Thanking You..

trying to use sampling rate 8khz instead of 44khz

Hi,

Because of big file sizes - we are trying to record 8khz audios using recorder.js
We changed the sample rate on recorder.as to 8khz and compiled the code.

The problem we are experiencing is, the recorded file is 8khz but the audio content is ~4x faster.

Is there a way to use recorder.js with 8khz sample rate?

Flash/JavaScript interface not working

The example doesn't appear to work (at least in Firefox 13). When I run it, the web console gives out this.flashInterface().* is not a recording, and when I try to get the functions without calling them (put in Recorder.flashInterface().* without parentheses), they're undefined. It seems like your ExternalInterface calls aren't working, but I have no idea why.

Throws : Uncaught Error: Error: An invalid exception was thrown.

If user deny's from flash, and then click on any of Record, Play or Stop button it throws error of:

Uncaught Error: Error: An invalid exception was thrown.
Recorder.stop @ recorder.js:57
stop @ example-2.html:55

I think there need to check for weather user have deny or agree on flash, before implementing actions to proceed further with record, play or stop.

Multiple Instances

Can you give any advice on modifying the source to allow multiple recording instances at once? I would like to record separate snippets of audio without conflict.

Problems in Safari on Win7

Hi,
I am using Recorder.js and it works fine on Firefox, Chrome and IE, but not in Safari.

The recording doesn't start, even if I get the Flash auth, and the "started" event is fired. No "progress" event and no recording.

What is weird is that if I record/stop, play/stop multiple times, then at some point it starts to work, but only one time (if I stop and record again it still doesn't work)

Anything I could try to make this work?

Limit to recording Issue

When i used SetTimeout to control the Limit to recording the the milliseconds are not calculated as per the Settimeout given

For Eg if i give Settimeout to 15000 ms so the Record button Progress event sometime calculate only 13 seconds it shud be 14 seconds starting from 0 EG 0:00 to 0:14 but it shows sometime 0.00 to 0:13 when i analyzed i found that recording milliseconds are calculated wrongly as per the Settimeout functionality,please look into the issue as soon as possible and also provide me with the Solution with a Good example.

Can you please tell me how milliseconds are calculated on what basis.
Can you please explain me this line as also mentioned below in the example

progress: function(milliseconds){ // will be called in a <1s frequency with the current position in milliseconds

please give me solution as soon as possible..

Thanks.

flash privacy setting box pops up & immediately disappears

Mac OS X 10.8.2, Chrome 23, Flash 11.5.31.5

A problem I ran into is that: when I click the "start recording" button, the "recorderFlashContainer" div appears, and disappears almost immediately (left and top reset to -9999px each). The flash privacy setting never showed up (box is empty inside).

This problem happens on both Chrome and Firefox. It works for our site hosted on AWS server. It doesn't work when I run it on my localhost using django python server.

Security window on Linux

Hello.
On Ubuntu I have a problem with security window. It just won't show up.
All I can see is two gray bars (lower and upper), but now buttons at all. So I'm not able to proceed to recording.
I've tested in Firefox and Chromium.

Is there any way to customize security window?

audio format

Hi,
is it possibile to set the audio format?
if the answer is yes, which are the possible audio format ?

thank you

Flash issues?

Not sure how to describe this issue, it seems something related to the Flash. Sometimes and on multiple browsers (FF, Chrome) the recording gets recorder but like in a very slow mode. When played you will hear noice which sounds like fast forwarding. Also when that happens I noticed that timer is counting very slow so each second seems like 2-3sec. Timer is implemented in progress record callback (same as in your examples). Let me know if you have ever encountered similar problems?

Save Blob File to Server (as wav)

Perhaps its from my lack of skill. as I am really only a jr dv.

But I can get it to record, cash, and make a button to dl. but i cant seem to take that and use send it out as a byte array or something asp.net net would understand, so i can save it on the server.

Any thoughts?

allow/deny message not showing on ie 10

Hi,

I am using jwagener/recorder.js for recording that is working fine on ie 9 and ie 11 but for ie ver. 10 its not working. when my recording section start it does not prompt for microphone setting allow/deny message.
Sometime when we clear browser history number of times then it prompt once for that massage.

Initialization...
Recorder.initialize({
swfSrc: BASE_URL + "/Scripts/flashrecorder.swf"
});

Recording...
Recorder.record({
start: function () {
// here our code is put. this part of section does not execute
}
});

Please suggest any solution to run this code on ie 10

privacy settings

How can you show the more detailed privacy box that allows the user to remember the settings for the site?

Default noise arising in Windows 8 on Firefox & Chrome

Hi,

We have implemented the same script in our application, and detecting audio record with Windows XP & Windows 7.

When we run the same application on Windows 8, it is making unnecessary noise on Firefox & Chrome browser in my laptop.

Please let us know what we done the mistake.

How to resolve this issue - users saying us the sound is stopping them to proceeds the work.

Please help us.

Thanks
saravanan

Custom callback when flash is not installed

I changed _loadFlash function to call custom function when flash is not installed:
_loadFlash: function(){
this._clearFlash();
var flashElement = document.createElement("div");
flashElement.setAttribute("id", "recorderFlashObject");
this.options.flashContainer.appendChild(flashElement);
var cb=this.options.noFlashCallBack;
swfobject.embedSWF(this.options.swfSrc, "recorderFlashObject", "231", "141", "10.1.0", undefined, undefined, {allowscriptaccess: "always"}, undefined, function(e){
if(e.success){
Recorder.swfObject = e.ref;
Recorder._checkForFlashBlock();
} else {
if (cb != null) {
cb();
} else {
Recorder._showFlashRequiredDialog();
}

  }
});

},

Array loop breaks when loaded with Ember.js

When Ember.js has the setting "EXTEND_PROTOTYPES", it will modify the global Array prototype, adding properties and methods. Recorder.triggerEvent uses a "for..in" loop on the _event arrays without checking against hasOwnProperty or on the type of every property. So when it tries to call a function that is not really a function, it crashes.

Looping with array indices would solve this problem. It's faster anyway.

Upload

Hi,

Can I upload the recorded audio to a filesystem. I'm thinking of passing my "Controller" URL. Is that possible? I'm using MVC C#..

Download feature in place of upload

Hiiii,

I need to download the recorded audio in place of upload to save in my database. So can you provide me some solution for this.

Any suggestion would be helpful. Thanks in advance.

this.swfObject.children[3].record is not a function

Hello, jwagener.
Thank you for such a nice recorder you've made.

I spent a couple of hours to set it to work, but with no luck.
Every time I can't get access Flash functions.

Console thows "TypeError: this.swfObject.children[3].record is not a function".
But swf object is in the DOM and fully accesseble.

How can I fix this?

it throw errors while i try to Compile Recorder.as

i try to compile Recorder.as with 'mxmlc -debug=false -static-link-runtime-shared-libraries=true -optimize=true -o recorder.swf -file-specs flash/FlashRecorder.as' , but it throw error like this:


/Library/WebServer/Documents/recorder.js/flash/Recorder.as(252): col: 52 Error: ????????????????: SampleDataEvent?

            protected function recordSampleDataHandler(event:SampleDataEvent):void
                                                             ^

/Library/WebServer/Documents/recorder.js/flash/Recorder.as(265): col: 50 Error: ????????????????: SampleDataEvent?

            protected function playSampleDataHandler(event:SampleDataEvent):void
                                                           ^

/Library/WebServer/Documents/recorder.js/flash/com/adobe/audio/format/WAVWriter.as(179): col: 14 Error: ?????????? clear (?? static ?? flash.utils:ByteArray ??)?

                            tempData.clear();
                                     ^

how to edit as files and compile it to .swf??

Uncaught Error: Error calling method on NPObject.

Hi!

I have a problem ... all works fine until now! I dont think that i changed any code... but now this error "Uncaught Error: Error calling method on NPObject." comes when i try to start the record.

My code (is in jQuery(document).ready):

Recorder.initialize({
swfSrc: '/template/js/recorder/recorder.swf'
});

jQuery('#start').click(function(){

Recorder.record({
start: function(){
console.log('Recording started.');
}

});

});

Tested in Chrome & Firefox. Same problem.

The console log "Recording started" is still not viewable.

The error says that this line is wrong:
this.flashInterface().record(); // in recorder.js / line 53

recorder.swf as cdn file.

Hi, i think it will be great to use recorder.swf as cdn file. Quick search told me to look in the direction crossdomain.xml and Security.allowDomain. Can you make some change for these amazing capabilities?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.