Code Monkey home page Code Monkey logo

voicerecorder.js's Introduction

VoiceRecorder.js

A simple javascript, that allows you to record the user's microphone. I made this because I found no javascript that did it quite as good and easy as this one and it was hard for me to even find documentations, so I hope I made your job a bit easier.

Usage

Note that there is an example that you can even try live if you don't like reading documentations.

Creating An Instance

You can create a new instance of the voice recorder using this line:

recorder = new VoiceRecorder();

Starting The Recording

Starting to record will request permissions, if we don't already have them. You may want to know if the user gave you the permission, so you can just define a callback-function:

recorder.start(function(status)
{
    if(status == "OK")
    {
        // Everything is awesome
    } else
    {
        // No permission for us :(
    }
});

If you got OK the VoiceRecorder has already started to record the user's audio.

Getting The Recording

At some point of time you probably want to get a nice Blob of the recorded audio, so you can do that using the get-function:

recorder.get(function(blob)
{
    // Object URL
    console.log(window.URL.createObjectURL(blob));
    // Data URL
    reader = new FileReader();
	reader.onload = function()
	{
		window.open(this.result.replace("data:;", "data:audio/wav;"));
	}
	reader.readAsDataURL(blob);
});

Here are two ways to use the blob. The first method (Object URL) looks simpler but is virtually useless since you can only use it as src of an audio-elemement. The second method (Data URL) however, gets a data URL and opens it in a new tab.

Clearing The Recording

If you used get, you probably don't want to get the same data again when using get again, so by simply using clear, you will clear the current recording, but the recording will continue on as normal, so when you use get again, you will not get any repeating data.

recorder.get(function(blob)
{
    // ...
}).clear();

Stopping the recoring

But if you are done recording you can just call the stop-function:

recorder.stop();

This will not

  • eat up user's RAM when not needed
  • show the red recording circle on the tab

which are both crucial things if you want to be trusted by the user, in my opinion.

You're done.

These are all the functions you need to know when using the VoiceRecorder.js.

Pro-Tip: All functions return this, which allows for jQuery-like return-based coding.

voicerecorder.js's People

Stargazers

 avatar John Doherty avatar  avatar edwin avatar Jin Kuwata avatar

Watchers

James Cloos avatar edwin avatar  avatar

Forkers

hwedwin

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.