michalstocki / flashwavrecorder Goto Github PK

Refactor FWRecorder.init() and FWRecorder.connect() functions to allow an easy initialization.

Hi I set this up on my cakePHP project. I had loaded the files, swfobject.js recorder.js and basically just using the basic.js. But when I clicked my record button it gives me this error.

TypeError: Recorder.recorder is null
Recorder.recorder.record(name, filename);

Is there something that I missed?

can it be saved in mp3 format ? and all the transfroming jobs are finished in the front end, in other words, transfrom it into mp3 before upload it to the server.
thanks~~

hi friends,
try html form post FWRecorder.getBase64() string

PHP:

  $fileBase64 = str_replace('data:audio/wav;base64,', '',  $_POST['Base64']);
  $decoded = base64_decode($fileBase64 );
  file_put_contents('test.wav', $decoded);

but the test.wav can't play, help ~ thanks very much!

could someone make a function that would update constantly and set the activityLevel() of the mic to a javascript variable like var activity?

Hi, i have come across with a problem by the fllow case:
i want to user the interface named 'getBase64' and 'getBlob',
but when i use the return result,it can not be played;
fllowing is my main code
part of recorder.js:

var getWav = function(){
    var blobtemp = base64toBlob(base64Data, RECORDED_AUDIO_TYPE);
    $("#audioa").attr("src",window.URL.createObjectURL(blobtemp)); 
};

part of html:
getWav

after i click the button 'getWav' i cannot get my voice...
(i want to get the wav and deal with it to let it be smaller)
can you help me?
thank you!

After updating to Chrome 42, FlashWavRecorder stops responding. It cannot record nor show microphone permission dialog. That's a serious problem. To fix this, user has to go to chrome://plugins/ and re-enable flash plugin which became disabled by default.

Can we fix this? Maybe we should implement also HTML5-based recording? More info in the issue #54 .

Hello ! Thanks for the example to save wave-audio in flash and upload to server !

I have a question:
Is it possible to add the "kikko-Shine-MP3-Encoder-on-AS3-Alchemy " (https://github.com/kikko/Shine-MP3-Encoder-on-AS3-Alchemy) in your project to save the audio-data from wave to mp3 and then upload to the server ?

I have tried it - But my Flash-knowledge is not so good.

I was able to add the swc-file "shineMP3_alchemy.swc" from "kikko-Shine-MP3-Encoder-on-AS3-Alchemy " in your project, and I was able to compile it without errors. But then ... I did not go on.

Maybe - you can look at this ... It would be wonderful ! ;)

Greetings

Background

From version 42 of Google Chrome, flash plugin is disabled by default (issue #53). After problems which occurred with earlier Chrome versions, this is forcible suggestion to use modern web technologies. WebRTC API and Web Audio (and several other) works great. From my point of view, the most proper direction is to provide multi-technology support in FWR. I already have some experience with recording audio via HTML5. There is a lot of work which should be done to provide consistent API for both Flash-based and HTML5-based recording. The only problem is that I need a sponsor.

Do we need HTML5-based recording in FWR?

The answer is not obvious. Maybe a better solution will be just using HTML5-based recording library without any Flash fallback? The problem is Internet Explorer and Safari which still haven't getUserMedia and WebAudio APIs. Internet Explorer will probably have a support for audio recording, but will provide different API than Firefox, Chrome and Opera. Unfortunatelly we don't know when it will be released.
To be able to record audio using HTML5, we need a browser to support following APIs:

• getUserMedia (part of WebRTC API)
• Web Audio API
• Blob

furthermore to to convert recorded audio into WAV file and download it or upload to a server, we need:

• Typed Arrays
• Web Workers
• Blob URLs
• XMLHttpRequest v2

What needs to be done?

Most of the work for recording sound via HTML5 is done in other open source libraries such as JSSoundRecorder. Nevertheless we need to define and implement complete new API which will work in both HTML5-based and Flash-based scenarios. Unfortunately full compatibility is not possible because of the annoying Flash button which is required for uploading a recording.

Hi,
I have recorded sound using FlashWavRecorder and recorded using windows sound recorder with the same system settings,
But the sound quality recorded from flash is too bad it has lot of distortion noise and recording volume is too high.

Files:
https://www.dropbox.com/s/24io6awyuurxc6t/record_flash.wav
https://www.dropbox.com/s/jn0i0g3puwstrg1/Recording%20from%20Windows%20Sound%20Recorder.wma

I have tried the following configuration

RecorderFlash.recorder.configure(11,0,15,100);

But the configuration settings doesn't seems to be affected. i have applied it before the initialization

Code snapshot: https://gist.github.com/4681853

Hi there Michal,

First of all, thank you very much for this great tool.

I'm using it to capture audio to pass on to a voice recognizer to help English learners with their pronunciation:

http://www.apps4efl.com/apps/vocalyzer

However, for some reason the recorder is failing to initialize in IE. It's working fine in all other browsers that I've tried it on.

Any help or advice you could give would be very much appreciated.

Many thanks in advance,

Paul

I download the demo source , but it can not work normally. I think the recorder.swf is broken

In our particular use of FlashWavRecorder we could really need the a feature for pausing the recording and then continue it.

Use-case: Our users usually listen to another recording, pause that playback, record a bit, pause the recording, play back a bit more of the original recording, pause playback, record a bit more and so forth.

We've been using another recording component until now, and this is the last feature we could really need, to get rid of that recorder (which is based on a Java applet).

Hi can someone help show some snippets for displaying progress bar while uploading the recording. My recording takes up to 10mins long and it also takes time to upload in on the server. So it might help if I can have working progress bar to display while uploading is on progress. Thank you

Hi. Thank you so much for this, it is a great tool. I noticed the minimum sample rate is 22050. Is it possible to change it and make it as low as 8000?
If yes, can you guide toward how I can achieve this. Thank you very much!

I need to be able to use a custom button to submit the form. I was thinking the easiest way would be to submit the form via javascript. I see there is a way to get they bytes from the flash component, but i don't know if it is possible to send those to the web server.

Thanks,
Logan

First of all, great work! I've been looking for something like this. However, when I record audio with it, the sound always plays back really sped up, or in other words, it sounds like a chipmunk. Any idea why this is happening?

Michael Reinsch proposed in issue #31 validation of recording name parameter, passed to recorder action methods, to avoid stupid mistakes.

When i click upload data get uploaded but if i upload recording status should comeback to as it was in the start.

play button should not be there
upload button should not be there

yet maintain user permission setting

Is it possible to download and replay a file recorded earlier?

Hi Cykod,
After cloning your project, I want to use this application, I opened index.html page in my browser. I found that the status are not changing, even "microphone_recorder_events()" function is not calling. But when i used your application in github page(https://github.com/cykod/FlashWavRecorder/issues), it was working fine. Like "Microphone recorder event:" are changing into "ready" mode.
Can you please help me, what problem was done by me...

Hi there Michal,

First of all, thank you very much for this great tool.

I'm using it to capture audio on our web project:

However, for some reason the recorder is failing to record and the "fwr_event_handler" handler always give "microphone_not_connected" in IE 8. It's working fine chrome.
I've tested my micriphone by system audio manager and it work fine.

Any help or advice you could give would be very much appreciated.

Many thanks in advance,

Hi

The FlashWavRecorder is really useful. Can a voice level indicator function be added to the FlashWavRecorder?

I can press Show Level and Hide Level to start & stops the display. Good. But after that, the Show Level button is no longer displayed. I only see the Hide Level button.
I found this happens both on the working example at http://cykod.github.io/FlashWavRecorder/html/ and also on my own installation. Firefox and Google Chrome.

It appears that the "observing_level_stopped" message is not despatched.

BTW this is a fantastic piece of code and thanks Michal for creating it.

Hi Michal,
The plugin works great on this reference link http://michalstocki.github.io/FlashWavRecorder/html/basic/. But for some reason it gives below error on implementation of my local rails 3 application.

recorder.js:56
Uncaught TypeError: Cannot read property 'record' of null

I have included only assets provided by FlashWavRecorder basic demo url. All the assets are getting loaded in same order. But this doesn't seem to work for me on any browser. If you have any information on why this is happening, please let me know. Thanks for your great efforts

Test in mac,show this error
audio failed:Error #2032

Register a bower package

How to specify position of flash security pop up
i want to use my own button to upload click when we right click on upload button

upload button and flash security pop up position should be different.

please help me out or suggest any link.

I build it from the source but recorded wav appears as mono(only left of my earphone has sound when play back). The demo site(http://cykod.github.io/FlashWavRecorder/html/) works correctly. Is there something changed in the code?

Hi-
This is all working great for me, but when I raise the maximum recording length to above 80 seconds, and make recording over this length, it tries to upload but eventually fails, saying "audio was not saved".
I figure I am missing something simple here, but have not been able to figure it out. I believe my server doesn't have any restrictions on the size of an upload.
Any ideas on how to address this?
Thanks a lot.
-Halsey

Hello,

I am using recorder.js for recording voice in our application.
But when i tries to upload the file on my server(cherrypy2.2) it fails to do so.
Can any one explain how to support the upload method in cherrypy or can tell the location of file where it store the audio file temprory and how to access that.

Hi, I get this error in Safari 5, Windows 7:
'[object BlobConstructor]' is not a constructor (evaluating 'new Blob(byteArrays, {type: contentType})')

Any idea how I can fix this? I tried importing this https://github.com/eligrey/Blob.js/

Also looked into this: http://stackoverflow.com/questions/14347534/blob-constructor-not-working-in-safari-opera . But It doesn't work.

Please give an example how "setLoopBack" method will work. Because I want to use your application in my voice chat plugin. Instead of recording I will send the voice data to my server.So is there any methods which will be helpfull for sending voice.

1. go to http://cykod.github.io/FlashWavRecorder/html/ in a browser that does not have "allow" permissions for the microphone on "cykod.github.io".
2. Click "Show Level" - Flash security modal pops up, as expected.
3. Click "Allow" - at this point, I would expect "Show Level" to take effect, and for the audio levels to begin displaying, but they do not.

I'm sorry that I'm not more familiar with the Flash => Javascript interface - I wish I could add more. It looks like other similar projects are able to propagate the click event after the microphone is allowed, so it seems possible.

README should contain:

• simple example (html code for embedding recorder)
• features description
• Link to full documentation
• Links to demo
• Link to releases history & change log

Documentation should contain:

• Detailed embedding inscructions
• Javascript functions API with description of types and roles of the arguments
• Javascript events API with description of the occurrence and provided data
• Development environment setup instructions

Hi. I get this error when trying to start the recording. It used to work, but I guess something changed, and know I get this in Internet Explorer (haven't tried others): Object doesn't support property or method 'record'.
Any idea how I can fix this? The line to which the error points is: Recorder.recorder.record(name, filename);

Edit. Sorry, It was my mistake. Nevermind.

Somehow I can't get the recorder to work in a Wordpress environment.
Does anyone managed to get the recorder to work in Wordpress?

Marc

When reloading the page while "show level" is active, the following error is reported in the javascript console and the reloaded page does not function: "PepperFlashPlayer.plugin: 0x72F6 is not a valid resource ID. index.html:1 "

My workaround is to modify the script to invoke FWRecorder.stopObservingLevel in the "recording_stopped" event handler. This prevents the problem unless the user refreshes the page while in the act of recording.

@jsalsman wrote:

@michalstocki would you please help me integrate this on http://talknicer.com/d/index.cgi ? There are so many complex options, I just want a very simple recorder with [Record][Stop][Play][Submit] and a mono level meter to upload a 22,000/sec wav, about the size of the same default HTML buttons with the same text. But the options are so complex, it is very difficult for me to be certain I am choosing them correctly.

So, the issue is to create a minimal setup demo page of the Flash wav recorder. The page should display only four buttons (as mentioned above).

I find that I have got to click the upload icon,which is definitely a flash element. However , I use this recorder in my website, and want to upload the audio without clicking the upload icon when I finish recording, I searched the Internet for answer, and found that the flash has been updated, and it requires user interaction when we want to upload a file.
in my website, using javascript, it will start recording when the Space keydown, and stop as well as upload the audio when the Space keyup. How can I realize such a goal in actionscript? addEventListener to keyEvents?? can u help me out? thanks a lot!

I'm seeing an issue with flashplayer 14.0.0.145 (mac): the generated WAV files report a sample rate of 0. So I can't feed them into Zencoder for transcoding, it'll also complain that the audio input is invalid.

How can I upload the wav audio with JS code. For jQuery, something like $('#upload_form').upload()

Vulnerable Code:

public function ready(width:int, height:int):void {
      ExternalInterface.call(this.eventHandler, RecorderJSInterface.READY, width, height);
      if (!this.recorder.mic.isMuted()) {
        onMicrophoneStatus(new StatusEvent(StatusEvent.STATUS, false, false, "Microphone.Unmuted", "status"));
      }

}
Poc: recorder.swf?event_handler=alert(document.domain)

One of the main issues is that if you press the Allow radio box in the security dialog before you press the Remember checkbox, the security dialog automatically closes.

I've changed the code so that it will instead listen for MouseEvent.MOUSE_MOVE, which is disabled while the security panel is open, so the moment you close the panel (and you most likely move your mouse) the event will be triggered and permissions will be rechecked and callbacks triggered.

This patch is against version 0.5.0, so you might need to fudge it a bit to apply.

commit 0bf08eb53d744bf864aceff63b5a96c29f8ab1b6
Author: Robin Smidsrød <[email protected]>
Date:   Fri Aug 30 16:38:02 2013 +0200

    Fixed security dialog usability issue

diff --git a/recorder/flash/Recorder.as b/recorder/flash/Recorder.as
index 9c70294..8435c87 100755
--- a/recorder/flash/Recorder.as
+++ b/recorder/flash/Recorder.as
@@ -24,7 +24,7 @@ package {
     public function Recorder() {
       this.stage.align = StageAlign.TOP_LEFT;
       this.stage.scaleMode = StageScaleMode.NO_SCALE;
-      recorderInterface = new RecorderJSInterface();
+      recorderInterface = new RecorderJSInterface(this.stage);

diff --git a/recorder/flash/RecorderJSInterface.as b/recorder/flash/RecorderJSInterface.as
index 336b159..ffa9dec 100755
--- a/recorder/flash/RecorderJSInterface.as
+++ b/recorder/flash/RecorderJSInterface.as
@@ -10,6 +10,10 @@ package {
   import flash.net.URLRequest;
   import flash.net.URLLoader;
   import flash.utils.ByteArray;
+  import flash.system.Security;
+  import flash.system.SecurityPanel;
+  import flash.display.Stage;
+  import flash.events.MouseEvent;

   import MicrophoneRecorder;
   import MultiPartFormUtil;
@@ -50,7 +54,10 @@ package {
     public var mic_timeout:int = 1000;
     //***********************************************************

-    public function RecorderJSInterface() {
+    private var stage:Stage;
+
+    public function RecorderJSInterface(stage:Stage) {
+      this.stage = stage;
       this.recorder = new MicrophoneRecorder();
       if(ExternalInterface.available && ExternalInterface.objectID) {
         ExternalInterface.addCallback("record", record);
@@ -118,8 +125,6 @@ package {
     public function isMicrophoneAvailable():Boolean {
       if(! this.recorder.mic.muted) {
         return true;
-      } else if(Microphone.names.length == 0) {
-        ExternalInterface.call(this.eventHandler, RecorderJSInterface.NO_MICROPHONE_FOUND);
       } else {
         ExternalInterface.call(this.eventHandler, RecorderJSInterface.MICROPHONE_USER_REQUEST);
       }
@@ -127,19 +132,35 @@ package {
     }

     public function requestMicrophoneAccess():void {
-      this.recorder.mic.addEventListener(StatusEvent.STATUS, onMicrophoneStatus);
-      this.recorder.mic.setLoopBack();
+      if ( this.recorder.mic != null ) {
+        // A microphone is connected
         this.configureMicrophone(44, this.mic_gain, this.mic_silenceLevel, this.mic_timeout);
+        if ( this.recorder.mic.muted ) {
+          // Microphone access is unavailable, so open security panel
+          Security.showSettings(SecurityPanel.PRIVACY);
+          // When privacy panel is open mouse events are disabled
+          // Use this event to track when the privacy panel is closed and trigger
+          // recording start after, in case user doesn't click the other option.
+          this.stage.addEventListener(MouseEvent.MOUSE_MOVE, onPrivacyPanelClosed);
+        }
+        else {
+          ExternalInterface.call(this.eventHandler, RecorderJSInterface.MICROPHONE_CONNECTED, this.recorder.mic);
+        }
+        return;
+      }
+      // A microphone is not connected
+      ExternalInterface.call(this.eventHandler, RecorderJSInterface.NO_MICROPHONE_FOUND);
     }

-    private function onMicrophoneStatus(event:StatusEvent):void
-    {
-      this.recorder.mic.setLoopBack(false);
-      if(event.code == "Microphone.Unmuted") {
-        ExternalInterface.call(this.eventHandler, RecorderJSInterface.MICROPHONE_CONNECTED, this.recorder.mic);
-      } else {
-        ExternalInterface.call(this.eventHandler, RecorderJSInterface.MICROPHONE_NOT_CONNECTED);
-      }
+    private function onPrivacyPanelClosed(event:Event):void {
+        // Remove event listener when triggered
+        this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, onPrivacyPanelClosed);
+        if ( this.recorder.mic.muted ) {
+          ExternalInterface.call(this.eventHandler, RecorderJSInterface.MICROPHONE_NOT_CONNECTED);
+        }
+        else {
+          ExternalInterface.call(this.eventHandler, RecorderJSInterface.MICROPHONE_CONNECTED, this.recorder.mic);
+        }
     }

     public function configureMicrophone(rate:int=22, gain:int=100, silenceLevel:Number=0, silenceTimeout:int=4000):void {

It would be nice to rebuild event's interface. We would like to replace one callback with different parameters to JavaScript-specific

FWRecorder.addEventListener("eventName", function(){
    // ...
});

interface. This will allow avoid using large case statement.

Another option is to use JS signals: https://github.com/millermedeiros/js-signals

Yet another option is to use a "jQuery style" events lisening:

FWRecorder.on("eventName", ["sessionName"], function() {
    // ...
});

The recorder setup is quite complicated (especially two-sides event bindings), so it could be large improvement, when we could use pre configured FlashWavRecorder as jQuery plugin.

Features

• predefined class name for each recorder state e.g. fwr-state-recording, fwr-state-playing.
• including <button> element for each action
• two different CSS styles: single-button mode and basic mode (with three buttons).

Usage example
If we call:

$('.recorder-1').flashWavRecorder();

on element

<div class="recorder-1"></div>

we will get (state: recording):

<div class="recorder-1 fwr-recorder fwr-state-recording">
    <button class="fwr-start-recording" disabled="disabled"><button>
    <button class="fwr-stop-recording"></button>
    <button class="fwr-start-playing"><button>
    <button class="fwr-pause-playing" disabled="disabled"></button>
    <button class="fwr-send-recording"></button>
</div>

Hey, I've got a problem with the microphone_level event. It is being fired something like once a second, which is really slow, and doesn't allow for a smooth levels animation.
Am I missing a setting somewhere? Can I increase the event call frequency? Thanks.

I've have implemented voice recording using FlashWavRecorder every thing works fine but when i play the saved recorded file it's getting too much disturbance in the audio

Please help me to resolve this issue.

Thanks
Kishore