html实现录音和播放功能

录音播放实例：(附.JS)

<!DOCTYPE
 HTML>
<htmllang="en">
    <head>
        <metacharset = "utf-8"/>
        <title>Chat
 by Web Sockets</title>
        <scripttype="text/javascript"src="js/recorder.js">
 </script>
        <scripttype="text/javascript"src="js/jquery-1.10.1.min.js">
 </script>
         
        <styletype='text/css'>
            
        </style>
    </head>
    <body>
        <audiocontrols autoplay></audio>
        
       <inputtype="button"id="record"value="Record">
       <inputtype="button"id="export"value="Export">
       <divid="message"></div>
    </body>
     
    <scripttype='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内容：

(function(window){
 
  varWORKER_PATH = 'js/recorderWorker.js';
 
  varRecorder = function(source,
 cfg){
    varconfig = cfg || {};
    varbufferLen = config.bufferLen || 4096;
    this.context
 = source.context;
    this.node
 = this.context.createJavaScriptNode(bufferLen,
 2, 2);
    varworker = newWorker(config.workerPath || WORKER_PATH);
    worker.postMessage({
      command:'init',
      config:
 {
        sampleRate:this.context.sampleRate
      }
    });
    varrecording = false,
      currCallback;
 
    this.node.onaudioprocess
 = function(e){
      if(!recording) return;
      worker.postMessage({
        command:'record',
        buffer:
 [
          e.inputBuffer.getChannelData(0),
          e.inputBuffer.getChannelData(1)
        ]
      });
    }
 
    this.configure
 = function(cfg){
      for(varprop incfg){
        if(cfg.hasOwnProperty(prop)){
          config[prop]
 = cfg[prop];
        }
      }
    }
 
    this.record
 = function(){
      recording
 = true;
    }
 
    this.stop
 = function(){
      recording
 = false;
    }
 
    this.clear
 = function(){
      worker.postMessage({
 command: 'clear'});
    }
 
    this.getBuffer
 = function(cb)
 {
      currCallback
 = cb || config.callback;
      worker.postMessage({
 command: 'getBuffer'})
    }
 
    this.exportWAV
 = function(cb,
 type){
      currCallback
 = cb || config.callback;
      type
 = type || config.type || 'audio/wav';
      if(!currCallback) thrownew Error('Callback
 not set');
      worker.postMessage({
        command:'exportWAV',
        type:
 type
      });
    }
 
    worker.onmessage
 = function(e){
      varblob = e.data;
      currCallback(blob);
    }
 
    source.connect(this.node);
    this.node.connect(this.context.destination);   //this
 should not be necessary
  };
 
  Recorder.forceDownload
 = function(blob,
 filename){
    varurl = (window.URL || window.webkitURL).createObjectURL(blob);
    varlink = window.document.createElement('a');
    link.href
 = url;
    link.download
 = filename || 'output.wav';
    varclick = document.createEvent("Event");
    click.initEvent("click",true,true);
    link.dispatchEvent(click);
  }
 
  window.Recorder
 = Recorder;
 
})(window);

您可能感兴趣问答

Collapsible

热门标签

热点问答