pc端调用设备音频实现录音功能

项目中要pc端录音的功能，花了两天时间折腾了一下，目前可以兼容大多数主流浏览器，总体思路是：支持navigator.getUserMedia的浏览器采用H5 API 实现，不支持的基于flash实现。

基础知识

navigator对象
getUserMedia函数
SWFObject如何使用
.swf文件由来
audio/video 标签
封装了getUserMedia的库函数：recorder.js

代码示例

使用navigator.getUserMedia实现

navigator.getUserMedia({
       audio:true,
       video:true
},function(stream){
       document.getElementById('audio').src = createObjectURL(stream);
},function(err){
       console.log(err);
})

在页面中插入静态flash代码

    <object id="webcamXobjectX" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" >
        <param name="movie" value="sound _record.swf"></param>
        <object id="XwebcamXobjectX" type="application/x-shockwave-flash" data="sound_record.swf" width="200" height="200">
            <param name="FlashVars"  value="mode=callback;quality=85"
            <param name="allowScriptAccess" value="always" />
        </object>
    </object>

在页面中借助SWFObject动态生成flash代码

/**
      @ swfUrl    String   required    swf文件地址
      @ id        String   required    替换元素id
      @ width     String   required    指定swf的宽度
      @ height    String   required    指定swf的高度
      @ version   String   required   swf文件所需的adobe flash player的版本
      @ expressInstallSwfurl    String   optional    swf快速安装路径
      @ flashvars Object    Optional    传递给swf文件的参数
      @ params    Object    Optional    指定嵌入对象的参数
      @ attributes Object   Optional    指定对象的属性
      @ callbackFn Object   Optional    flash文件插入成功或者失败的回调函数  
    */
    swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)

pc端调用设备音频实现录音功能

基础知识

代码示例

推荐阅读更多精彩内容