阿Q吧 > html实现录音和播放功能

html实现录音和播放功能

2024-11-18 21:43:55

推荐回答（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

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做的,也不是录音,只是记录你的按键,然后播放录音的时候就按顺序再来一遍