html5 record 录音实例使用websocket

迈不过友情╰ 2022-06-01 13:18 472阅读 0赞

[http://www.jsjtt.com/webkaifa/html5/2013-08-28/34.html][http_www.jsjtt.com_webkaifa_html5_2013-08-28_34.html]

chrome 支持语言聊天 下面介绍一个chrome 的录音实例：

<!DOCTYPE HTML>
    <html lang="en">
        <head>
            <meta charset = "utf-8"/>
            <title>Chat by Web Sockets</title>
            <script type="text/javascript" src="js/recorder.js"> </script>
            <script type="text/javascript" src="js/jquery-1.10.1.min.js"> </script>
            
            <style type='text/css'>
               
            </style>
        </head>
        <body>
        	<audio controls autoplay></audio>
           
           <input type="button" id="record" value="Record">
           <input type="button" id="export" value="Export">
           <div id="message"></div>
        </body>
        
        <script type='text/javascript'>
    		    var onFail = function(e) {
    				console.log('Rejected!', e);
    			};
    		
    			var onSuccess = function(s) {
    				var context = new webkitAudioContext();
    				var mediaStreamSource = context.createMediaStreamSource(s);
    				rec = new Recorder(mediaStreamSource);
    				//rec.record();
    		
    				// audio loopback
    				// mediaStreamSource.connect(context.destination);
    			}
    		
    			//window.URL = URL || window.URL || window.webkitURL;
    			navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    		
    			var rec;
    			var audio = document.querySelector('#audio');
    		
    			function startRecording() {
    				if (navigator.getUserMedia) {
    					navigator.getUserMedia({audio: true}, onSuccess, onFail);
    				} else {
    					console.log('navigator.getUserMedia not present');
    				}
    			}
    			startRecording();
    			//--------------------    	
    	        $('#record').click(function() {
    	            rec.record();
    	           var dd = ws.send("start");
    	            $("#message").text("Click export to stop recording");
    	
    	            // export a wav every second, so we can send it using websockets
    	            intervalKey = setInterval(function() {
    	                rec.exportWAV(function(blob) {
    	                	
    	                    rec.clear();
    	                    ws.send(blob);
    	                  	//audio.src = URL.createObjectURL(blob);
    	                });
    	            }, 3000);
    	        });
    	        
    	        $('#export').click(function() {
                    // first send the stop command
                    rec.stop();
                    ws.send("stop");
                    clearInterval(intervalKey);
                    
                    ws.send("analyze");
                    $("#message").text("");
                });
    	        
    	        var ws = new WebSocket("ws://127.0.0.1:8088/websocket/servlet/record");
                ws.onopen = function () {
                    console.log("Openened connection to websocket");
                };
                ws.onclose = function (){
                	 console.log("Close connection to websocket");
                }
                ws.onmessage = function(e) {
                	audio.src = URL.createObjectURL(e.data);
                }
                
               
            </script>
    </html>

recorder.js内容：

recorderWorker.js的内容：

后台websocket代码：

package com.test;
    
    
    import java.io.ByteArrayInputStream;
    import java.io.ByteArrayOutputStream;
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.SequenceInputStream;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.sound.sampled.AudioFileFormat;
    import javax.sound.sampled.AudioInputStream;
    import javax.sound.sampled.AudioSystem;
    
    
    import org.apache.commons.logging.Log;
    import org.apache.commons.logging.LogFactory;
    import org.eclipse.jetty.io.Connection;
    import org.eclipse.jetty.server.Server;
    import org.eclipse.jetty.server.nio.SelectChannelConnector;
    import org.eclipse.jetty.websocket.WebSocket;
    import org.eclipse.jetty.websocket.WebSocketHandler;
    
    
    
    public class TestRecordServlet extends Server {
    	
    	
    	private final static Log LOG =  LogFactory.getLog( TestRecordServlet.class );
    	 
    	public TestRecordServlet(int port) {
    		SelectChannelConnector connector = new SelectChannelConnector();
    		connector.setPort(port);
    		addConnector(connector);
     
    		WebSocketHandler wsHandler = new WebSocketHandler() {
    			public WebSocket doWebSocketConnect(HttpServletRequest request,	String protocol) {
    				return new FaceDetectWebSocket();
    			}
    		};
    		setHandler(wsHandler);
    	}
     
    	/**
    	 * Simple innerclass that is used to handle websocket connections.
    	 * 
    	 * @author jos
    	 */
    	private static class FaceDetectWebSocket implements WebSocket,
    			WebSocket.OnBinaryMessage, WebSocket.OnTextMessage {
    		private String currentCommand ="";
    		
    		private Connection connection;
    		//private FaceDetection faceDetection = new FaceDetection();
     
    		public FaceDetectWebSocket() {
    			super();
    		}
     
    		/**
    		 * On open we set the connection locally, and enable
    		 * binary support
    		 */
    		public void onOpen(Connection connection) {
    			this.connection = connection;
    			this.connection.setMaxBinaryMessageSize(1024 * 512);
    		}
     
    		/**
    		 * Cleanup if needed. Not used for this example
    		 */
    		public void onClose(int code, String message) {}
     
    		/**
    		 * When we receive a binary message we assume it is an image. We then run this
    		 * image through our face detection algorithm and send back the response.
    		 */
    		public void onMessage(byte[] data, int offset, int length) {
     
    			if (currentCommand.equals("start")) {
    				try {
    					// The temporary file that contains our captured audio stream
    					File f = new File("out.wav");
     
    					// if the file already exists we append it.
    					if (f.exists()) {
    						LOG.info("Adding received block to existing file.");
     
    						// two clips are used to concat the data
    						 AudioInputStream clip1 = AudioSystem.getAudioInputStream(f);
    						 AudioInputStream clip2 = AudioSystem.getAudioInputStream(new ByteArrayInputStream(data));
     
    						 // use a sequenceinput to cat them together
    						 AudioInputStream appendedFiles = 
    		                            new AudioInputStream(
    		                                new SequenceInputStream(clip1, clip2),     
    		                                clip1.getFormat(), 
    		                                clip1.getFrameLength() + clip2.getFrameLength());
     
    						 // write out the output to a temporary file
    		                    AudioSystem.write(appendedFiles, 
    		                            AudioFileFormat.Type.WAVE,
    		                            new File("out2.wav"));
     
    		                    // rename the files and delete the old one
    		                    File f1 = new File("out.wav");
    		                    File f2 = new File("out2.wav");
    		                    f1.delete();
    		                    f2.renameTo(new File("out.wav"));
    					} else {
    						LOG.info("Starting new recording.");
    						FileOutputStream fOut = new FileOutputStream("out.wav",true);
    						fOut.write(data);
    						fOut.close();
    					}			
    				} catch (Exception e) {
    					LOG.error("sss:" + e );
    				}
    			}
    		}
     
    		public void onMessage(String data) {
    			if (data.startsWith("start")) {
    				// before we start we cleanup anything left over
    				//cleanup();
    				currentCommand = "start";
    			} else if (data.startsWith("stop")) {
    				currentCommand = "stop";
    			} else if (data.startsWith("clear")) {
    				// just remove the current recording
    				//cleanup();
    			} else if (data.startsWith("analyze")) {
    				
    			}
    		}
    	}
     
    	/**
    	 * Start the server on port 999
    	 */
    	public static void main(String[] args) throws Exception {
    		TestRecordServlet server = new TestRecordServlet(8080);
    		server.start();
    		server.join();
    	}
    }

[http_www.jsjtt.com_webkaifa_html5_2013-08-28_34.html]: http://www.jsjtt.com/webkaifa/html5/2013-08-28/34.html