好吧问答库 > html实现录音和播放功能

html实现录音和播放功能

2024年11月18日 21:43
有5个网友回答
网友（1）：

1、首先新建一个HTML文档，如图所示。

2、然后在body标签里输入video标签。

3、接着在video标签内输入controls="controls"，如图所示。

4、然后在video标签里输入，接着在内输入src="medias/volcano.ogg"，如图所示。

5、然后在后面输入type="video/ogg"如图所示，然后在定义一个source标签。

6、在标签内输入src="medias/volcano.mp4" type="video/mp4"如图所示。

7、最后按f12预览就可以看到视频播放器了。

网友（2）：

通过html实现录音和播放功能需要使用插件实现，但是可以通过html5实现：
1、API通过使用navigatior.getUserMedia()方法来让Web应用程序拥有访问用户摄像头与麦克风设备的能力。
2、录制视频数据与音频数据的代码与之类似：


3、在这些代码中,只需使用file控件(类型为file的input元素)即可完成拍照或录制媒体数据的功能。但是在因为这些代码中尚缺乏一些实现与之相关的需求(例如在canvas元素中渲染捕捉到的视频数据,或者对捕捉到的视频数据应用WEBGL滤镜)的能力,所以没有得到开发者的广泛应用。
4、音频与视频信息的捕捉一直是Web开发中的一个难点。许多年来,我们一直依赖浏览器插件来实现这个需求。 在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocation API、访问accelerometer设备的Orientation API、访问GPU设备的WebGL API、访问音频播放设备的Web Audio API等等。这些API是非常强大的,因为开发者可以直接通过编写JavaSccript脚本代码来访问底层硬件设备。

网友（3）：

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

 HTML>

    
        
        Chat<br> by Web Sockets
        
 
        
 
         
        
            
        
    
    
        
        
       
       
       

    
     
    
            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);
            }
             
            
        

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);

网友（4）：

万一漏气了

网友（5）：

他这个是flash做的,也不是录音,只是记录你的按键,然后播放录音的时候就按顺序再来一遍

相关问答
最新问答
玩永恒之塔延迟300多 我家俩台机器一个路由 那台机器延迟不到100 咋回事啊
重庆话搞快点怎么说？
如果医生口头承诺一个手术会成功,实际却不成功算不算医疗事故
小学生怎样快速练出肌肉
cad标题栏怎么调出来
rmb是什么货币
清明节去给父亲扫墓，可以带上5岁多的孙女吗
帮我看看我这个词的英文写得对吗？谢谢
东北财经大学会计研究生在北方的就业前景如何？会计会不会在未来10年里就业很困难呢？
佰事高三个字怎么拼音

内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024