websocket探索其与语音、图片的能力

我不是女神ヾ 2022-06-06 05:55 43阅读 0赞

原文出处： [AlloyTeam][]

说到websocket想比大家不会陌生，如果陌生的话也没关系，一句话概括

**“WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信”**

WebSocket相比较传统那些服务器推技术简直好了太多，我们可以挥手向comet和长轮询这些技术说拜拜啦，庆幸我们生活在拥有HTML5的时代~

这篇文章我们将分三部分探索websocket

首先是websocket的常见使用，其次是完全自己打造服务器端websocket，最终是重点介绍利用websocket制作的两个demo，传输图片和在线语音聊天室，let's go

**一、websocket常见用法**

这里介绍三种我认为常见的websocket实现……（**注意：本文建立在node上下文环境**）

**1、socket.io**

先给demo

相信知道websocket的同学不可能不知道socket.io，因为socket.io太出名了，也很棒，它本身对超时、握手等都做了处理。我猜测这也是实现websocket使用最多的方式。socket.io最最最优秀的一点就是优雅降级，当浏览器不支持websocket时，它会在内部优雅降级为长轮询等，用户和开发者是不需要关心具体实现的，很方便。

不过事情是有两面性的，socket.io因为它的全面也带来了坑的地方，最重要的就是臃肿，它的封装也给数据带来了较多的通讯冗余，而且优雅降级这一优点，也伴随浏览器标准化的进行慢慢失去了光辉

<table> 
 <tbody> 
  <tr> 
   <td> <p>Chrome</p> </td> 
   <td> <p>Supported in version 4+</p> </td> 
  </tr> 
  <tr> 
   <td> <p>Firefox</p> </td> 
   <td> <p>Supported in version 4+</p> </td> 
  </tr> 
  <tr> 
   <td> <p>Internet Explorer</p> </td> 
   <td> <p>Supported in version 10+</p> </td> 
  </tr> 
  <tr> 
   <td> <p>Opera</p> </td> 
   <td> <p>Supported in version 10+</p> </td> 
  </tr> 
  <tr> 
   <td> <p>Safari</p> </td> 
   <td> <p>Supported in version 5+</p> </td> 
  </tr> 
 </tbody> 
</table>

在这里不是指责说socket.io不好，已经被淘汰了，而是有时候我们也可以考虑一些其他的实现~

**2、http模块**

刚刚说了socket.io臃肿，那现在就来说说便捷的，首先demo

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:14px!important; line-height:15px!important"> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
    </div> </td> 
   <td> 
    <div style=""> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>http</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>require</span> 
      <span>(</span>‘ 
      <span>http</span>’ 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>server</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>http</span> 
      <span>.</span> 
      <span>createServer</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>server</span> 
      <span>.</span> 
      <span>on</span> 
      <span>(</span>‘ 
      <span>upgrade</span>’ 
      <span>,</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>req</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span></span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>req</span> 
      <span>.</span> 
      <span>headers</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>}</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>server</span> 
      <span>.</span> 
      <span>listen</span> 
      <span>(</span> 
      <span>8888</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

很简单的实现，其实socket.io内部对websocket也是这样实现的，不过后面帮我们封装了一些handle处理，这里我们也可以自己去加上，给出两张socket.io中的源码图

[![1.png][]][1.png]

[![2.png][]][2.png]

**3、ws模块**

后面有个例子会用到，这里就提一下，后面具体看~

**二、自己实现一套server端websocket**

刚刚说了三种常见的websocket实现方式，现在我们想想，对于开发者来说

**websocket相对于传统http数据交互模式来说，增加了服务器推送的事件，客户端接收到事件再进行相应处理，开发起来区别并不是太大啊**

那是因为那些模块已经帮我们将**数据帧解析**这里的坑都填好了，第二部分我们将尝试自己打造一套简便的服务器端websocket模块

感谢次碳酸钴的研究帮助，**我在这里这部分只是简单说下，如果对此有兴趣好奇的请百度【web技术研究所】**

自己完成服务器端websocket主要有两点，一个是使用net模块接受数据流，还有一个是对照官方的帧结构图解析数据，完成这两部分就已经完成了全部的底层工作

首先给一个客户端发送websocket握手报文的抓包内容

客户端代码很简单

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:14px!important; line-height:15px!important"> 
     <div>
       1 
     </div> 
    </div> </td> 
   <td> 
    <div style=""> 
     <div> 
      <span>ws</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>WebSocket</span> 
      <span>(</span> 
      <span>"ws://127.0.0.1:8888"</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[![3.png][]][3.png]

服务器端要针对这个key验证，就是讲key加上一个特定的字符串后做一次sha1运算，将其结果转换为base64送回去

这样握手部分就已经完成了，后面就是数据帧解析与生成的活了

先看下官方提供的帧结构示意图

[![4.png][]][4.png]

简单介绍下

FIN为是否结束的标示

RSV为预留空间，0

opcode标识数据类型，是否分片，是否二进制解析，心跳包等等

给出一张opcode对应图

[![41.png][]][41.png]

MASK是否使用掩码

Payload len和后面extend payload length表示数据长度，这个是最麻烦的

PayloadLen只有7位，换成无符号整型的话只有0到127的取值，这么小的数值当然无法描述较大的数据，因此规定当数据长度小于或等于125时候它才作为数据长度的描述，如果这个值为126，则时候后面的两个字节来储存数据长度，如果为127则用后面八个字节来储存数据长度

Masking-key掩码

下面贴出解析数据帧的代码

然后是生成数据帧的

都是按照帧结构示意图上的去处理，在这里不细讲，文章重点在下一部分，如果对这块感兴趣的话可以移步web技术研究所~

**三、websocket传输图片和websocket语音聊天室**

正片环节到了，这篇文章最重要的还是展示一下websocket的一些使用场景

1、传输图片

我们先想想传输图片的步骤是什么，首先服务器接收到客户端请求，然后读取图片文件，将二进制数据转发给客户端，客户端如何处理？当然是使用FileReader对象了

先给客户端代码

接收到消息，然后readAsDataURL，直接将图片base64添加到页面中

转到服务器端代码

注意**s.push((1 << 7) + 2)**这一句，这里等于直接把opcode写死了为2，对于Binary Frame，这样客户端接收到数据是不会尝试进行toString的，否则会报错~

代码很简单，在这里向大家分享一下websocket传输图片的速度如何

测试很多张图片，总共8.24M

普通静态资源服务器需要20s左右（服务器较远）

cdn需要2.8s左右

那我们的websocket方式呢？？！

答案是同样需要20s左右，是不是很失望……速度就是慢在传输上，并不是服务器读取图片，本机上同样的图片资源，1s左右可以完成……这样看来数据流也无法冲破距离的限制提高传输速度

下面我们来看看websocket的另一个用法~

用websocket搭建语音聊天室

先来整理一下语音聊天室的功能

**用户进入频道之后从麦克风输入音频，然后发送给后台转发给频道里面的其他人，其他人接收到消息进行播放**

看起来难点在两个地方，第一个是音频的输入，第二是接收到数据流进行播放

先说音频的输入，这里利用了HTML5的getUserMedia方法，不过注意了，**这个方法上线是有大坑的**，最后说，先贴代码

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:14px!important; line-height:15px!important"> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
    </div> </td> 
   <td> 
    <div style=""> 
     <div> 
      <span>if</span> 
      <span> </span> 
      <span>(</span> 
      <span>navigator</span> 
      <span>.</span> 
      <span>getUserMedia</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>navigator</span> 
      <span>.</span> 
      <span>getUserMedia</span> 
      <span>(</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>{ </span> 
      <span> </span> 
      <span>audio</span> 
      <span>:</span> 
      <span> </span> 
      <span>true</span> 
      <span> </span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>rec</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>SRecorder</span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>recorder</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>rec</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>)</span> 
     </div> 
     <div> 
      <span>}</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

第一个参数是\{audio: true\}，只启用音频，然后创建了一个SRecorder对象，后续的操作基本上都在这个对象上进行。此时如果**代码运行在本地的话**浏览器应该提示你是否启用麦克风输入，确定之后就启动了

接下来我们看下SRecorder构造函数是啥，给出重要的部分

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:14px!important; line-height:15px!important"> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
    </div> </td> 
   <td> 
    <div style=""> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>SRecorder</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>…… 
     </div> 
     <div>
       &nbsp; 
      <span>&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>context</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>AudioContext</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>audioInput</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>context</span> 
      <span>.</span> 
      <span>createMediaStreamSource</span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>recorder</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>context</span> 
      <span>.</span> 
      <span>createScriptProcessor</span> 
      <span>(</span> 
      <span>4096</span> 
      <span>,</span> 
      <span> </span> 
      <span>1</span> 
      <span>,</span> 
      <span> </span> 
      <span>1</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>…… 
     </div> 
     <div> 
      <span>}</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

AudioContext是一个音频上下文对象，有做过声音过滤处理的同学应该知道“一段音频到达扬声器进行播放之前，半路对其进行拦截，于是我们就得到了音频数据了，这个拦截工作是由window.AudioContext来做的，我们所有对音频的操作都基于这个对象”，我们可以通过AudioContext创建不同的AudioNode节点，然后添加滤镜播放特别的声音

录音原理一样，我们也需要走AudioContext，不过多了一步对麦克风音频输入的接收上，而不是像往常处理音频一下用ajax请求音频的ArrayBuffer对象再decode，麦克风的接受需要用到createMediaStreamSource方法，注意这个参数就是getUserMedia方法第二个参数的参数

再说createScriptProcessor方法，它官方的解释是：

Creates a ScriptProcessorNode, which can be used for direct audio processing via JavaScript.

——————

概括下就是这个方法是使用JavaScript去处理音频采集操作

终于到音频采集了！胜利就在眼前！

接下来让我们把麦克风的输入和音频采集相连起来

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:14px!important; line-height:15px!important"> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
    </div> </td> 
   <td> 
    <div style=""> 
     <div> 
      <span>audioInput</span> 
      <span>.</span> 
      <span>connect</span> 
      <span>(</span> 
      <span>recorder</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>recorder</span> 
      <span>.</span> 
      <span>connect</span> 
      <span>(</span> 
      <span>context</span> 
      <span>.</span> 
      <span>destination</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

context.destination官方解释如下

The destination property of the [AudioContext][] interface returns an [AudioDestinationNode][]representing the final destination of all audio in the context.

——————

context.destination返回代表在环境中的音频的最终目的地。

好，到了此时，我们还需要一个监听音频采集的事件

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:14px!important; line-height:15px!important"> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
    </div> </td> 
   <td> 
    <div style=""> 
     <div> 
      <span>recorder</span> 
      <span>.</span> 
      <span>onaudioprocess</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>e</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>audioData</span> 
      <span>.</span> 
      <span>input</span> 
      <span>(</span> 
      <span>e</span> 
      <span>.</span> 
      <span>inputBuffer</span> 
      <span>.</span> 
      <span>getChannelData</span> 
      <span>(</span> 
      <span>0</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>}</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

audioData是一个对象，这个是在网上找的，我就加了一个clear方法因为后面会用到，主要有那个encodeWAV方法很赞，别人进行了多次的音频压缩和优化，这个最后会伴随完整的代码一起贴出来

此时整个**用户进入频道之后从麦克风输入音频**环节就已经完成啦，下面就该是向服务器端发送音频流，稍微有点蛋疼的来了，刚才我们说了，websocket通过opcode不同可以表示返回的数据是文本还是二进制数据，而我们onaudioprocess中input进去的是数组，最终播放声音需要的是Blob，\{type: 'audio/wav'\}的对象，这样我们就必须要在发送之前将数组转换成WAV的Blob，此时就用到了上面说的encodeWAV方法

服务器似乎很简单，只要转发就行了

*本地测试确实可以，**然而天坑来了！**将程序跑在服务器上时候调用getUserMedia方法提示我必须在一个安全的环境，也就是需要https，这意味着ws也必须换成wss……*所以服务器代码就没有采用我们自己封装的握手、解析和编码了，代码如下

代码还是很简单的，使用https模块，然后用了开头说的ws模块，userMap是模拟的频道，只实现转发的核心功能

使用ws模块是因为它配合https实现wss实在是太方便了，和逻辑代码0冲突

https的搭建在这里就不提了，主要是需要私钥、CSR证书签名和证书文件，感兴趣的同学可以了解下（不过不了解的话在现网环境也用不了getUserMedia……）

下面是完整的前端代码

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:14px!important; line-height:15px!important"> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
     <div>
       9 
     </div> 
     <div>
       10 
     </div> 
     <div>
       11 
     </div> 
     <div>
       12 
     </div> 
     <div>
       13 
     </div> 
     <div>
       14 
     </div> 
     <div>
       15 
     </div> 
     <div>
       16 
     </div> 
     <div>
       17 
     </div> 
     <div>
       18 
     </div> 
     <div>
       19 
     </div> 
     <div>
       20 
     </div> 
     <div>
       21 
     </div> 
     <div>
       22 
     </div> 
     <div>
       23 
     </div> 
     <div>
       24 
     </div> 
     <div>
       25 
     </div> 
     <div>
       26 
     </div> 
     <div>
       27 
     </div> 
     <div>
       28 
     </div> 
     <div>
       29 
     </div> 
     <div>
       30 
     </div> 
     <div>
       31 
     </div> 
     <div>
       32 
     </div> 
     <div>
       33 
     </div> 
     <div>
       34 
     </div> 
     <div>
       35 
     </div> 
     <div>
       36 
     </div> 
     <div>
       37 
     </div> 
     <div>
       38 
     </div> 
     <div>
       39 
     </div> 
     <div>
       40 
     </div> 
     <div>
       41 
     </div> 
     <div>
       42 
     </div> 
     <div>
       43 
     </div> 
     <div>
       44 
     </div> 
     <div>
       45 
     </div> 
     <div>
       46 
     </div> 
     <div>
       47 
     </div> 
     <div>
       48 
     </div> 
     <div>
       49 
     </div> 
     <div>
       50 
     </div> 
     <div>
       51 
     </div> 
     <div>
       52 
     </div> 
     <div>
       53 
     </div> 
     <div>
       54 
     </div> 
     <div>
       55 
     </div> 
     <div>
       56 
     </div> 
     <div>
       57 
     </div> 
     <div>
       58 
     </div> 
     <div>
       59 
     </div> 
     <div>
       60 
     </div> 
     <div>
       61 
     </div> 
     <div>
       62 
     </div> 
     <div>
       63 
     </div> 
     <div>
       64 
     </div> 
     <div>
       65 
     </div> 
     <div>
       66 
     </div> 
     <div>
       67 
     </div> 
     <div>
       68 
     </div> 
     <div>
       69 
     </div> 
     <div>
       70 
     </div> 
     <div>
       71 
     </div> 
     <div>
       72 
     </div> 
     <div>
       73 
     </div> 
     <div>
       74 
     </div> 
     <div>
       75 
     </div> 
     <div>
       76 
     </div> 
     <div>
       77 
     </div> 
     <div>
       78 
     </div> 
     <div>
       79 
     </div> 
     <div>
       80 
     </div> 
     <div>
       81 
     </div> 
     <div>
       82 
     </div> 
     <div>
       83 
     </div> 
     <div>
       84 
     </div> 
     <div>
       85 
     </div> 
     <div>
       86 
     </div> 
     <div>
       87 
     </div> 
     <div>
       88 
     </div> 
     <div>
       89 
     </div> 
     <div>
       90 
     </div> 
     <div>
       91 
     </div> 
     <div>
       92 
     </div> 
     <div>
       93 
     </div> 
     <div>
       94 
     </div> 
     <div>
       95 
     </div> 
     <div>
       96 
     </div> 
     <div>
       97 
     </div> 
     <div>
       98 
     </div> 
     <div>
       99 
     </div> 
     <div>
       100 
     </div> 
     <div>
       101 
     </div> 
     <div>
       102 
     </div> 
     <div>
       103 
     </div> 
     <div>
       104 
     </div> 
     <div>
       105 
     </div> 
     <div>
       106 
     </div> 
     <div>
       107 
     </div> 
     <div>
       108 
     </div> 
     <div>
       109 
     </div> 
     <div>
       110 
     </div> 
     <div>
       111 
     </div> 
     <div>
       112 
     </div> 
     <div>
       113 
     </div> 
     <div>
       114 
     </div> 
     <div>
       115 
     </div> 
     <div>
       116 
     </div> 
     <div>
       117 
     </div> 
     <div>
       118 
     </div> 
     <div>
       119 
     </div> 
     <div>
       120 
     </div> 
     <div>
       121 
     </div> 
     <div>
       122 
     </div> 
     <div>
       123 
     </div> 
     <div>
       124 
     </div> 
     <div>
       125 
     </div> 
     <div>
       126 
     </div> 
     <div>
       127 
     </div> 
     <div>
       128 
     </div> 
     <div>
       129 
     </div> 
     <div>
       130 
     </div> 
     <div>
       131 
     </div> 
     <div>
       132 
     </div> 
     <div>
       133 
     </div> 
     <div>
       134 
     </div> 
     <div>
       135 
     </div> 
     <div>
       136 
     </div> 
     <div>
       137 
     </div> 
     <div>
       138 
     </div> 
     <div>
       139 
     </div> 
     <div>
       140 
     </div> 
     <div>
       141 
     </div> 
     <div>
       142 
     </div> 
     <div>
       143 
     </div> 
     <div>
       144 
     </div> 
     <div>
       145 
     </div> 
     <div>
       146 
     </div> 
     <div>
       147 
     </div> 
     <div>
       148 
     </div> 
     <div>
       149 
     </div> 
     <div>
       150 
     </div> 
     <div>
       151 
     </div> 
     <div>
       152 
     </div> 
     <div>
       153 
     </div> 
     <div>
       154 
     </div> 
     <div>
       155 
     </div> 
     <div>
       156 
     </div> 
     <div>
       157 
     </div> 
     <div>
       158 
     </div> 
     <div>
       159 
     </div> 
     <div>
       160 
     </div> 
     <div>
       161 
     </div> 
     <div>
       162 
     </div> 
     <div>
       163 
     </div> 
     <div>
       164 
     </div> 
     <div>
       165 
     </div> 
     <div>
       166 
     </div> 
     <div>
       167 
     </div> 
     <div>
       168 
     </div> 
     <div>
       169 
     </div> 
     <div>
       170 
     </div> 
     <div>
       171 
     </div> 
     <div>
       172 
     </div> 
     <div>
       173 
     </div> 
     <div>
       174 
     </div> 
     <div>
       175 
     </div> 
     <div>
       176 
     </div> 
     <div>
       177 
     </div> 
     <div>
       178 
     </div> 
     <div>
       179 
     </div> 
     <div>
       180 
     </div> 
     <div>
       181 
     </div> 
     <div>
       182 
     </div> 
     <div>
       183 
     </div> 
     <div>
       184 
     </div> 
     <div>
       185 
     </div> 
     <div>
       186 
     </div> 
     <div>
       187 
     </div> 
     <div>
       188 
     </div> 
     <div>
       189 
     </div> 
     <div>
       190 
     </div> 
     <div>
       191 
     </div> 
     <div>
       192 
     </div> 
     <div>
       193 
     </div> 
     <div>
       194 
     </div> 
     <div>
       195 
     </div> 
     <div>
       196 
     </div> 
     <div>
       197 
     </div> 
     <div>
       198 
     </div> 
     <div>
       199 
     </div> 
     <div>
       200 
     </div> 
     <div>
       201 
     </div> 
     <div>
       202 
     </div> 
     <div>
       203 
     </div> 
     <div>
       204 
     </div> 
     <div>
       205 
     </div> 
     <div>
       206 
     </div> 
     <div>
       207 
     </div> 
     <div>
       208 
     </div> 
    </div> </td> 
   <td> 
    <div style=""> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>a</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>document</span> 
      <span>.</span> 
      <span>getElementById</span> 
      <span>(</span> 
      <span>'a'</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>b</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>document</span> 
      <span>.</span> 
      <span>getElementById</span> 
      <span>(</span> 
      <span>'b'</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>c</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>document</span> 
      <span>.</span> 
      <span>getElementById</span> 
      <span>(</span> 
      <span>'c'</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>navigator</span> 
      <span>.</span> 
      <span>getUserMedia</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>navigator</span> 
      <span>.</span> 
      <span>getUserMedia</span> 
      <span> </span> 
      <span>||</span> 
      <span> </span> 
      <span>navigator</span> 
      <span>.</span> 
      <span>webkitGetUserMedia</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>gRecorder</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>null</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>audio</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>document</span> 
      <span>.</span> 
      <span>querySelector</span> 
      <span>(</span> 
      <span>'audio'</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>door</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>false</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>ws</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>null</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>b</span> 
      <span>.</span> 
      <span>onclick</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span>(</span> 
      <span>a</span> 
      <span>.</span> 
      <span>value</span> 
      <span> </span> 
      <span>===</span> 
      <span> </span> 
      <span>''</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>alert</span> 
      <span>(</span> 
      <span>'请输入用户名'</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>return</span> 
      <span> </span> 
      <span>false</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span>(</span> 
      <span>!</span> 
      <span>navigator</span> 
      <span>.</span> 
      <span>getUserMedia</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>alert</span> 
      <span>(</span> 
      <span>'抱歉您的设备无法语音聊天'</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>return</span> 
      <span> </span> 
      <span>false</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>SRecorder</span> 
      <span>.</span> 
      <span>get</span> 
      <span>(</span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>rec</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>gRecorder</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>rec</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>ws</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>WebSocket</span> 
      <span>(</span> 
      <span>"wss://x.x.x.x:8888"</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>ws</span> 
      <span>.</span> 
      <span>onopen</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>'握手成功'</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>ws</span> 
      <span>.</span> 
      <span>send</span> 
      <span>(</span> 
      <span>'user:'</span> 
      <span> </span> 
      <span>+</span> 
      <span> </span> 
      <span>a</span> 
      <span>.</span> 
      <span>value</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>ws</span> 
      <span>.</span> 
      <span>onmessage</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>e</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>receive</span> 
      <span>(</span> 
      <span>e</span> 
      <span>.</span> 
      <span>data</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>document</span> 
      <span>.</span> 
      <span>onkeydown</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>e</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span>(</span> 
      <span>e</span> 
      <span>.</span> 
      <span>keyCode</span> 
      <span> </span> 
      <span>===</span> 
      <span> </span> 
      <span>65</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span>(</span> 
      <span>!</span> 
      <span>door</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>gRecorder</span> 
      <span>.</span> 
      <span>start</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>door</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>true</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>document</span> 
      <span>.</span> 
      <span>onkeyup</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>e</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span>(</span> 
      <span>e</span> 
      <span>.</span> 
      <span>keyCode</span> 
      <span> </span> 
      <span>===</span> 
      <span> </span> 
      <span>65</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span>(</span> 
      <span>door</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>ws</span> 
      <span>.</span> 
      <span>send</span> 
      <span>(</span> 
      <span>gRecorder</span> 
      <span>.</span> 
      <span>getBlob</span> 
      <span>(</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>gRecorder</span> 
      <span>.</span> 
      <span>clear</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>gRecorder</span> 
      <span>.</span> 
      <span>stop</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>door</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>false</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>c</span> 
      <span>.</span> 
      <span>onclick</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span>(</span> 
      <span>ws</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>ws</span> 
      <span>.</span> 
      <span>close</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>var</span> 
      <span> </span> 
      <span>SRecorder</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>config</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>{ </span> 
      <span>}</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>config</span> 
      <span>.</span> 
      <span>sampleBits</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>config</span> 
      <span>.</span> 
      <span>smapleBits</span> 
      <span> </span> 
      <span>||</span> 
      <span> </span> 
      <span>8</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>config</span> 
      <span>.</span> 
      <span>sampleRate</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>config</span> 
      <span>.</span> 
      <span>sampleRate</span> 
      <span> </span> 
      <span>||</span> 
      <span> </span> 
      <span>(</span> 
      <span>44100</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>6</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>context</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>AudioContext</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>audioInput</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>context</span> 
      <span>.</span> 
      <span>createMediaStreamSource</span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>recorder</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>context</span> 
      <span>.</span> 
      <span>createScriptProcessor</span> 
      <span>(</span> 
      <span>4096</span> 
      <span>,</span> 
      <span> </span> 
      <span>1</span> 
      <span>,</span> 
      <span> </span> 
      <span>1</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>audioData</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>size</span> 
      <span>:</span> 
      <span> </span> 
      <span>0</span> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>//录音文件长度</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>buffer</span> 
      <span>:</span> 
      <span> </span> 
      <span>[</span> 
      <span>]</span> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp; </span> 
      <span>//录音缓存</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>inputSampleRate</span> 
      <span>:</span> 
      <span> </span> 
      <span>context</span> 
      <span>.</span> 
      <span>sampleRate</span> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>//输入采样率</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>inputSampleBits</span> 
      <span>:</span> 
      <span> </span> 
      <span>16</span> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> 
      <span>//输入采样数位 8, 16</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>outputSampleRate</span> 
      <span>:</span> 
      <span> </span> 
      <span>config</span> 
      <span>.</span> 
      <span>sampleRate</span> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>//输出采样率</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>oututSampleBits</span> 
      <span>:</span> 
      <span> </span> 
      <span>config</span> 
      <span>.</span> 
      <span>sampleBits</span> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> 
      <span>//输出采样数位 8, 16</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>clear</span> 
      <span>:</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>buffer</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>[</span> 
      <span>]</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>size</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>input</span> 
      <span>:</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>data</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>buffer</span> 
      <span>.</span> 
      <span>push</span> 
      <span>(</span> 
      <span>new</span> 
      <span> </span> 
      <span>Float32Array</span> 
      <span>(</span> 
      <span>data</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>size</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>data</span> 
      <span>.</span> 
      <span>length</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>compress</span> 
      <span>:</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
      <span> </span> 
      <span>//合并压缩</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>//合并</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>data</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>Float32Array</span> 
      <span>(</span> 
      <span>this</span> 
      <span>.</span> 
      <span>size</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>for</span> 
      <span> </span> 
      <span>(</span> 
      <span>var</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>&lt;</span> 
      <span> </span> 
      <span>this</span> 
      <span>.</span> 
      <span>buffer</span> 
      <span>.</span> 
      <span>length</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span>++</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>set</span> 
      <span>(</span> 
      <span>this</span> 
      <span>.</span> 
      <span>buffer</span> 
      <span>[</span> 
      <span>i</span> 
      <span>]</span> 
      <span>,</span> 
      <span> </span> 
      <span>offset</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>this</span> 
      <span>.</span> 
      <span>buffer</span> 
      <span>[</span> 
      <span>i</span> 
      <span>]</span> 
      <span>.</span> 
      <span>length</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>//压缩</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>compression</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>parseInt</span> 
      <span>(</span> 
      <span>this</span> 
      <span>.</span> 
      <span>inputSampleRate</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>this</span> 
      <span>.</span> 
      <span>outputSampleRate</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>length</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>data</span> 
      <span>.</span> 
      <span>length</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>compression</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>result</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>Float32Array</span> 
      <span>(</span> 
      <span>length</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>index</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>,</span> 
      <span> </span> 
      <span>j</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>while</span> 
      <span> </span> 
      <span>(</span> 
      <span>index</span> 
      <span> </span> 
      <span>&lt;</span> 
      <span> </span> 
      <span>length</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>result</span> 
      <span>[</span> 
      <span>index</span> 
      <span>]</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>data</span> 
      <span>[</span> 
      <span>j</span> 
      <span>]</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>j</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>compression</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>index</span> 
      <span>++</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>return</span> 
      <span> </span> 
      <span>result</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>,</span> 
      <span> </span> 
      <span>encodeWAV</span> 
      <span>:</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>sampleRate</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>Math</span> 
      <span>.</span> 
      <span>min</span> 
      <span>(</span> 
      <span>this</span> 
      <span>.</span> 
      <span>inputSampleRate</span> 
      <span>,</span> 
      <span> </span> 
      <span>this</span> 
      <span>.</span> 
      <span>outputSampleRate</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>sampleBits</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>Math</span> 
      <span>.</span> 
      <span>min</span> 
      <span>(</span> 
      <span>this</span> 
      <span>.</span> 
      <span>inputSampleBits</span> 
      <span>,</span> 
      <span> </span> 
      <span>this</span> 
      <span>.</span> 
      <span>oututSampleBits</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>bytes</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>this</span> 
      <span>.</span> 
      <span>compress</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>dataLength</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>bytes</span> 
      <span>.</span> 
      <span>length</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>(</span> 
      <span>sampleBits</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>8</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>buffer</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>ArrayBuffer</span> 
      <span>(</span> 
      <span>44</span> 
      <span> </span> 
      <span>+</span> 
      <span> </span> 
      <span>dataLength</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>data</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>DataView</span> 
      <span>(</span> 
      <span>buffer</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>channelCount</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>1</span> 
      <span>;</span> 
      <span>//单声道</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>writeString</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>str</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>for</span> 
      <span> </span> 
      <span>(</span> 
      <span>var</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>&lt;</span> 
      <span> </span> 
      <span>str</span> 
      <span>.</span> 
      <span>length</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span>++</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint8</span> 
      <span>(</span> 
      <span>offset</span> 
      <span> </span> 
      <span>+</span> 
      <span> </span> 
      <span>i</span> 
      <span>,</span> 
      <span> </span> 
      <span>str</span> 
      <span>.</span> 
      <span>charCodeAt</span> 
      <span>(</span> 
      <span>i</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 资源交换文件标识符 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>writeString</span> 
      <span>(</span> 
      <span>'RIFF'</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 下个地址开始到文件尾总字节数,即文件大小-8 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint32</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>36</span> 
      <span> </span> 
      <span>+</span> 
      <span> </span> 
      <span>dataLength</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// WAV文件标志</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>writeString</span> 
      <span>(</span> 
      <span>'WAVE'</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 波形格式标志 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>writeString</span> 
      <span>(</span> 
      <span>'fmt '</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 过滤字节,一般为 0x10 = 16 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint32</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>16</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 格式类别 (PCM形式采样数据) </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint16</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>1</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>2</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 通道数 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint16</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>channelCount</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>2</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 采样率,每秒样本数,表示每个通道的播放速度 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint32</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>sampleRate</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint32</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>channelCount</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>sampleRate</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>(</span> 
      <span>sampleBits</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>8</span> 
      <span>)</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint16</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>channelCount</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>(</span> 
      <span>sampleBits</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>8</span> 
      <span>)</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>2</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 每样本数据位数 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint16</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>sampleBits</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>2</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 数据标识符 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>writeString</span> 
      <span>(</span> 
      <span>'data'</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 采样数据总数,即数据总大小-44 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setUint32</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>dataLength</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>4</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>// 写入采样数据 </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span> </span> 
      <span>(</span> 
      <span>sampleBits</span> 
      <span> </span> 
      <span>===</span> 
      <span> </span> 
      <span>8</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>for</span> 
      <span> </span> 
      <span>(</span> 
      <span>var</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>&lt;</span> 
      <span> </span> 
      <span>bytes</span> 
      <span>.</span> 
      <span>length</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span>++</span> 
      <span>,</span> 
      <span> </span> 
      <span>offset</span> 
      <span>++</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>Math</span> 
      <span>.</span> 
      <span>max</span> 
      <span>(</span> 
      <span>-</span> 
      <span>1</span> 
      <span>,</span> 
      <span> </span> 
      <span>Math</span> 
      <span>.</span> 
      <span>min</span> 
      <span>(</span> 
      <span>1</span> 
      <span>,</span> 
      <span> </span> 
      <span>bytes</span> 
      <span>[</span> 
      <span>i</span> 
      <span>]</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>val</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>&lt;</span> 
      <span> </span> 
      <span>0</span> 
      <span> </span> 
      <span>?</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>0x8000</span> 
      <span> </span> 
      <span>:</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>0x7FFF</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>val</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>parseInt</span> 
      <span>(</span> 
      <span>255</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>(</span> 
      <span>65535</span> 
      <span> </span> 
      <span>/</span> 
      <span> </span> 
      <span>(</span> 
      <span>val</span> 
      <span> </span> 
      <span>+</span> 
      <span> </span> 
      <span>32768</span> 
      <span>)</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setInt8</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>val</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span> </span> 
      <span>else</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>for</span> 
      <span> </span> 
      <span>(</span> 
      <span>var</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span> </span> 
      <span>&lt;</span> 
      <span> </span> 
      <span>bytes</span> 
      <span>.</span> 
      <span>length</span> 
      <span>;</span> 
      <span> </span> 
      <span>i</span> 
      <span>++</span> 
      <span>,</span> 
      <span> </span> 
      <span>offset</span> 
      <span> </span> 
      <span>+=</span> 
      <span> </span> 
      <span>2</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>Math</span> 
      <span>.</span> 
      <span>max</span> 
      <span>(</span> 
      <span>-</span> 
      <span>1</span> 
      <span>,</span> 
      <span> </span> 
      <span>Math</span> 
      <span>.</span> 
      <span>min</span> 
      <span>(</span> 
      <span>1</span> 
      <span>,</span> 
      <span> </span> 
      <span>bytes</span> 
      <span>[</span> 
      <span>i</span> 
      <span>]</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>.</span> 
      <span>setInt16</span> 
      <span>(</span> 
      <span>offset</span> 
      <span>,</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>&lt;</span> 
      <span> </span> 
      <span>0</span> 
      <span> </span> 
      <span>?</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>0x8000</span> 
      <span> </span> 
      <span>:</span> 
      <span> </span> 
      <span>s</span> 
      <span> </span> 
      <span>*</span> 
      <span> </span> 
      <span>0x7FFF</span> 
      <span>,</span> 
      <span> </span> 
      <span>true</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>return</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>Blob</span> 
      <span>(</span> 
      <span>[</span> 
      <span>data</span> 
      <span>]</span> 
      <span>,</span> 
      <span> </span> 
      <span>{ </span> 
      <span> </span> 
      <span>type</span> 
      <span>:</span> 
      <span> </span> 
      <span>'audio/wav'</span> 
      <span> </span> 
      <span>}</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>start</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>audioInput</span> 
      <span>.</span> 
      <span>connect</span> 
      <span>(</span> 
      <span>recorder</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>recorder</span> 
      <span>.</span> 
      <span>connect</span> 
      <span>(</span> 
      <span>context</span> 
      <span>.</span> 
      <span>destination</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>stop</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>recorder</span> 
      <span>.</span> 
      <span>disconnect</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>getBlob</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>return</span> 
      <span> </span> 
      <span>audioData</span> 
      <span>.</span> 
      <span>encodeWAV</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>clear</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>audioData</span> 
      <span>.</span> 
      <span>clear</span> 
      <span>(</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>recorder</span> 
      <span>.</span> 
      <span>onaudioprocess</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>e</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>audioData</span> 
      <span>.</span> 
      <span>input</span> 
      <span>(</span> 
      <span>e</span> 
      <span>.</span> 
      <span>inputBuffer</span> 
      <span>.</span> 
      <span>getChannelData</span> 
      <span>(</span> 
      <span>0</span> 
      <span>)</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>}</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>SRecorder</span> 
      <span>.</span> 
      <span>get</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>callback</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span> </span> 
      <span>(</span> 
      <span>callback</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>if</span> 
      <span> </span> 
      <span>(</span> 
      <span>navigator</span> 
      <span>.</span> 
      <span>getUserMedia</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>navigator</span> 
      <span>.</span> 
      <span>getUserMedia</span> 
      <span>(</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>{ </span> 
      <span> </span> 
      <span>audio</span> 
      <span>:</span> 
      <span> </span> 
      <span>true</span> 
      <span> </span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>function</span> 
      <span> </span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>rec</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>SRecorder</span> 
      <span>(</span> 
      <span>stream</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>callback</span> 
      <span>(</span> 
      <span>rec</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>)</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>function</span> 
      <span> </span> 
      <span>receive</span> 
      <span>(</span> 
      <span>e</span> 
      <span>)</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>audio</span> 
      <span>.</span> 
      <span>src</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>window</span> 
      <span>.</span> 
      <span>URL</span> 
      <span>.</span> 
      <span>createObjectURL</span> 
      <span>(</span> 
      <span>e</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>}</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注意：按住a键说话，放开a键发送

自己有尝试不按键实时对讲，通过setInterval发送，但发现杂音有点重，效果不好，这个需要encodeWAV再一层的封装，多去除环境杂音的功能，自己选择了更加简便的按键说话的模式

这篇文章里首先展望了websocket的未来，然后按照规范我们自己尝试解析和生成数据帧，对websocket有了更深一步的了解

最后通过两个demo看到了websocket的潜力，关于语音聊天室的demo涉及的较广，没有接触过AudioContext对象的同学最好先了解下AudioContext

文章到这里就结束啦~有什么想法和问题欢迎大家提出来一起讨论探索~

转自:[http://web.jobbole.com/84706/][http_web.jobbole.com_84706]

[AlloyTeam]: http://www.alloyteam.com/2015/12/websockets-ability-to-explore-it-with-voice-pictures/
[1.png]: /images/20220606/d29cc77d9885476786bbc518ed77d061.png
[2.png]: /images/20220606/2e88f36034384d88bf8da2f25270588d.png
[3.png]: /images/20220606/b419fdae5a7643c799e790379bb2442c.png
[4.png]: /images/20220606/2d631f3301d64f4c9ff6c191c3297737.png
[41.png]: /images/20220606/d0c44ca366b9469389cc4d5694a3cdf2.png
[AudioContext]: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext
[AudioDestinationNode]: https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode
[http_web.jobbole.com_84706]: http://web.jobbole.com/84706/