HTML5 enables the phone to touch the recording and leave to stop recording and upload the function (code)

This article brings the content is about HTML5 realization of mobile phone touch recording and left to stop recording and upload the function (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

The following are examples of implementing features:
Html

<! DOCTYPE html>
 The following is JS: 
 

Compatible window. URL = window. URL | | window.webkiturl;//Get computer device: Camera or recording device Navigator.getusermedia = Navigator.getusermedia | | Navigator.webkitgetusermedia | | Navigator.mozgetusermedia | | Navigator.msgetusermedia;var Hzrecorder = function (Stream, config) {config = config | |    {}; Config.samplebits = Config.samplebits | |      8; Sampling digit 8, config.samplerate = Config.samplerate | |   (44100/6); Sample rate (1/6 44100)//Create an Audio environment object var audiocontext = window. Audiocontext | |        Window.webkitaudiocontext;        var context = new Audiocontext ();        var audioinput = Context.createmediastreamsource (stream);    The second and third parameters refer to the inputs and outputs are mono, and 2 are two channels.        var recorder = context.createscriptprocessor (4096, 1, 1); var audiodata = {size:0//audio file length, buffer: []//recording cache, InputSampleRate:context.sample        Rates//Input sample rate, INPUTSAMPLEBITS:16//Input sample digit 8, outputSampleRate:config.sampleRate//Output sample rate , OutputSampleBits:config.samPlebits//Output sample digit 8, input:function (data) {This.buffer.push (new Float32array (data));        This.size + = Data.length;                        }, Compress:function () {//merge compression//merge var data = new Float32array (this.size);                        var offset = 0;                for (var i = 0; i < this.buffer.length; i++) {Data.set (this.buffer[i], offset);            Offset + = This.buffer[i].length;                        }//Compression var compression = parseint (this.inputsamplerate/this.outputsamplerate);                        var length = data.length/compression;                        var result = new Float32array (length);                        var index = 0, j = 0;                while (Index < length) {Result[index] = data[j];                J + = compression;            index++;        } return result;       } , Encodewav:function () {var samplerate = math.min (this.inputsamplerate, this.outputsamplerate);                        , var samplebits = Math.min (this.inputsamplebits, this.outputsamplebits);                        var bytes = this.compress ();                        var datalength = bytes.length * (SAMPLEBITS/8);                        var buffer = new ArrayBuffer (+ datalength);                        var data = new DataView (buffer);                        var channelcount = 1;//Mono var offset = 0; var writestring = function (str) {for (var i = 0; i < str.length; i++) {Data.setuin                T8 (offset + i, str.charcodeat (i)); }}//resource Exchange File identifier WriteString (' RIFF ');                        Offset + = 4; The next address begins at the end of the file, which is the file size-8 Data.setuint32 (offset, + datalength, true);                        Offset + = 4; WAV File Flag WritestriNg (' WAVE ');                        Offset + = 4; Waveform format Flag writestring (' FMT ');                        Offset + = 4; Filter bytes, generally 0x10 = Data.setuint32 (offset, +, true);                        Offset + = 4; Format category (PCM form sampled data) data.setuint16 (offset, 1, true);                        Offset + = 2; Number of channels data.setuint16 (offset, channelcount, true);                        Offset + = 2; Sample rate, sample number per second, indicates the playback speed of each channel Data.setuint32 (offset, samplerate, true);                        Offset + = 4; Waveform data transfer rate (average bytes per second) Mono x data bits per second x per sample data bit/8 Data.setuint32 (offset, Channelcount * samplerate * (SAMPLEBITS/8), t Rue);                        Offset + = 4; Fast data adjustment sampling takes up bytes per single channel x number of data bits/8 data.setuint16 (offset, Channelcount * (SAMPLEBITS/8), true);                        Offset + = 2; Number of data bits per sample data.setuint16 (offset, samplebits, true);                        Offset + = 2; Data identifier writestring (' data '); Offset + = 4; Total number of sampled data, i.e. total data size -44 data.setuint32 (offset, datalength, true);                        Offset + = 4; Write sampled data if (samplebits = = 8) {for (var i = 0; i < bytes.length; i++, offset++                                ) {var s = Math.max ( -1, Math.min (1, bytes[i])); var val = s < 0?                    S * 0x8000:s * 0x7FFF;                    val = parseint (255/(65535/(val + 32768));                Data.setint8 (Offset, Val, true);                                }} else {for (var i = 0; i < bytes.length; i++, offset + = 2) {                                        var s = Math.max ( -1, Math.min (1, bytes[i]));                Data.setint16 (offset, s < 0? s * 0x8000:s * 0x7FFF, true);        }} return new Blob ([data], {type: ' Audio/mp3 '});        }    }; Start recording This.start = function () {audioinput.Connect (recorder);    Recorder.connect (context.destination);    }//Stop this.stop = function () {recorder.disconnect ();                }//Get audio file This.getblob = function () {this.stop ();    return Audiodata.encodewav ();        }//Upload this.upload = function (URL, callback) {var fd = new FormData ();                Fd.append ("Audiodata", This.getblob ());                var xhr = new XMLHttpRequest ();             if (callback) {Xhr.upload.addEventListener ("Progress", function (e) {callback (' uploading ', e);            }, False);            Xhr.addeventlistener ("Load", function (e) {callback (' OK ', e);            }, False);            Xhr.addeventlistener ("Error", function (e) {callback (' error ', e);            }, False);            Xhr.addeventlistener ("Abort", function (e) {callback (' Cancel ', e);        }, False);        } xhr.open ("POST", url); xhr.send (FD);                }//Audio capture recorder.onaudioprocess = function (e) {audiodata.input (e.inputbuffer.getchanneldata (0));    Record (E.inputbuffer.getchanneldata (0));  }};//throws an exception//Hzrecorder.throwerror = function (message) {//alert (message);//throw new function () {this.tostring = function () {return message;}} }//supports recording hzrecorder.canrecording = (Navigator.getusermedia! = null);//get Recorder Hzrecorder.get = function (callback, Config) {if (callback) {if (Navigator.getusermedia) {Navigator.getusermedia ({                    Audio:true}//enable audio only, function (stream) {var rec = new Hzrecorder (stream, config);                Callback (REC);                                            }, function (Error) {switch (Error.code | | error.name) {                 Case ' permission_denied ': Case ' permissiondeniederror ':           Hzrecorder.throwerror (' user refused to provide information.                                                        ');                                                    Break                            Case ' not_supported_error ': Case ' notsupportederror ': Hzrecorder.throwerror (' Browser does not support hardware devices.                                                        ');                                                    Break                            Case ' mandatory_unsatisfied_error ': Case ' mandatoryunsatisfiederror ': Hzrecorder.throwerror (' Unable to discover the specified hardware device.                                                        ');                        Break Default:HZRecorder.throwError (' cannot turn on the microphone.                                                        Exception information: ' + (Error.code | | error.name));                    Break        }                }); } else {Hzrecorder.throwerr (' The current browser does not support recording functions.             '); REturn; }    }};
 These are through the great God's interpretation of the integration after their own groping out, what questions can be commented, we solve together, thank you!!!