Java+flashwavrecorder implement web recording and upload

Objective

There must be a need for web recording, and to upload, this wonderful demand,

and found Flashwavrecorder,

Address: Https://github.com/cykod/FlashWavRecorder

"Original Version"

1. Download

After the above address download Zip decompression, the folder has a index.html, opened after this effect:

2. Recording Permissions

You have to make sure that your computer has a microphone, which means you have to have a headset, a laptop to ensure that the microphone is not broken,

With the microphone in case, click the button in the red box above, and then select Allow, as follows:

Maybe some people will say I ordered no response, or firebug error ah, God, plugged in a microphone.

3. Recording

Then you can try the recording, you study it, quite simple.

Upload

1. Upload

Flash recording is very good implementation, the more difficult is the recording directly after the recording file to the server,

Flashwavrecorder did it,

Looked down as the source code, is probably the JS call SwF method,

The SWF puts the recording into memory, encodes it, and then uploads it to the server,

The server can be saved.

2.php

This plugin is good, for Java programmers, as code, PHP code is a pit Ah,

Fortunately the as code is similar to Java, and can read points, and PHP has seen it before.

"Modified Version"

1. Introduction of JS

Introduce JS and CSS in the page head:

<script type= "Text/javascript" src= "${base}/js/_record/js/swfobject.js" ></script><script type= " Text/javascript "src=" ${base}/js/_record/js/recorder.js "></script><script type=" Text/javascript "src= "${base}/js/_record/js/main.js" ></script><link rel= "stylesheet" href= "${base}/js/_record/style.css" >

Of course, if there's jquery, there's no writing here.

2. Page:

Some things have been streamlined, re-layout, code:

<div class= "Qcontainer" ><div id= "Recorder-audio" class= "Control_panel idle" ><button class= "Record_ Button "onclick=" Fwrecorder.record (' audio ', ' audio.wav '); "title=" Record "></button><button class=" Stop_recording_button "onclick=" Fwrecorder.stoprecording (' audio '); "title=" Stop recording "></button><button class= "Play_button" onclick= "fwrecorder.playback (' audio ');" title= "Play" ></button><button class= "Pause_ Playing_button "onclick=" fwrecorder.pauseplayback (' Audio '), "title=" Pause playing "></button><button class=" Stop_playing_button "onclick=" Fwrecorder.stopplayback (); "title=" Stop Playing "></button><div class=" level "></div></div><div class=" Details ">< Button class= "Show_level" onclick= "Fwrecorder.observelevel ();" > Show Sonic </button><button class= "Hide_level" onclick= "Fwrecorder.stopobservinglevel ();" Style= "Display: none; " > Hide Sonic </button><button class= "Show_settings" onclick= "Microphonepermission ()" > Microphone Permissions </button> <span id= "Save_button" style= "Display:inline-block;" > <span id= "flashcontent" ><p> your browser must support JavaScript and have Flash Player installed! </p> </span> </span><div id= "status" > Recording status ... </div><div> recording Duration: <span id= "duration" ></span></div><div> upload status: <span id= " Upload_status "></span></div><input type=" hidden "id=" Qrecordid "/></div><form id=" Uploadform "Name=" Uploadform "action=" ${base}/record/upload "><input name=" Authenticity_token "value=" xxxxx " Type= "hidden" ><input name= "upload_file[parent_id]" value="1" type= "hidden" ><input name= "format" value= "JSON" type= "hidden" ></form></div> 

3. Effects

4. Background code

Using the SPRINGMVC (this doesn't matter), and Apache's FileUpload component, code:

Package Com.bfsuol.common.controller;import Java.io.file;import Java.util.iterator;import Org.apache.commons.fileupload.fileitem;import Org.apache.commons.fileupload.disk.diskfileitemfactory;import Org.apache.commons.fileupload.servlet.servletfileupload;import Org.springframework.beans.factory.annotation.autowired;import Org.springframework.stereotype.controller;import Org.springframework.web.bind.annotation.requestmapping;import Org.springframework.web.bind.annotation.responsebody;import Com.bfsuolcomponents.file.entity.filemanager;import Com.bfsuolcomponents.file.service.filemanagerservice;import Com.bfsuolframework.core.controller.springcontrollersupport;import com.bfsuolframework.core.utils.DateTimeUtils , Import com.bfsuolframework.core.utils.fileutils;/** * Recording and uploading controller * @author Qiaowenbin */@ Controller@requestmapping ("/record") public class Recordcontroller extends springcontrollersupport{@ Autowiredprivate Filemanagerservice Filemanagerservice, @RequestMapping ("/upload") public@ResponseBody String Upload () throws Exception{long id = null;iterator<fileitem> iter = new Servletfileupload (New Di    Skfileitemfactory ()). Parserequest (Getrequest ()). iterator (); while (Iter.hasnext ()) {Fileitem item = Iter.next ();    if (!item.isformfield ()) {id = processuploadedfile (item); }}return "{\" saved\ ": 1,\" id\ ":" +id+ "}";} Private Long Processuploadedfile (Fileitem item) throws exception{//Upload string uploadpath = Fileutils.getuploadrealpath (" Files/records ") + Fileutils.getdatepath () +"/";        Fileutils.createfolder (Uploadpath);     String Filefullpath = Getfilevalidname (Uploadpath, Item.getname (), True, true);        Item.write (New File (Filefullpath)); Save FileManager FileManager = new FileManager (); Filemanager.setfilepath (Filefullpath); Filemanager.seturl ( Fileutils.realpath2path (Filefullpath)); Filemanager.setfilerealname (Fileutils.getfilename (FileFullPath)); Filemanager.setfiletitle (Item.getname ()); return Filemanagerservice.save (FileManager);} Private String GetfilevAlidname (String filePath, String Filename,boolean format, Boolean overwrite) {string filevalidname;if (format) {string Fileext = Fileutils.getfileext (fileName); filevalidname = FilePath + datetimeutils.getcurrentdatetimestring (" Yyyymmddhhmmss ") + (Fileext==null?" ":". ")    +fileext);    }else{filevalidname = FilePath + fileName; }if (!overwrite) {filevalidname = Fileutils.getvalidfilename (filevalidname);} return filevalidname;}}

5. Explanation

The approximate meaning is to upload the file, save the file related information to the database, return the saved ID,

Some of the code is useless, you can modify it yourself.

"Page calls more than once"

1. Wonderful

How can there be this demand,

The solution, each time it is good to play out,

2. Encapsulation

You can wrap a method yourself, and then return the ID after the recording has been uploaded.

Code

The original file has modified some JS and page content, hit a zip package,

There is a need to download.

Zip only packaged the front-end, the background picked out too much trouble, look at the above code,

Index.html needs to be replaced with the above page.

Address: http://download.csdn.net/detail/uikoo9/7937419

Java+flashwavrecorder implement web recording and upload