重磅重构开源-让H5标签代替C实时解码播放speex压缩协议的音频文件-IM的福音

这么牛逼的轮子，肯定要美图镇楼

Speex 是一套主要针对语音的开源免费，无专利保护的音频压缩格式。

本轮子，适用超大型项目，因为库本身很大，当然本身 IM 项目就没有小项目吧

• Speex（音标 [spi:ks]） 是一套开源免费的、无专利保护的、针对语音设计的音频压缩格式。Speex项目通过以提供昂贵的专用语音编解码器的免费替代方案为目标，来降低语音应用程序的进入门槛。此外，Speex非常适用于互联网应用程序，并提供了其他大多数编解码器中不存在的有用特性。最后，Speex 是 GNU项目的一部分，可以在修订后的 BSD 许可证下使用。

编码流程

• 使用 Speex 的API函数对音频数据进行压缩编码要经过如下步骤：
• 定义一个 SpeexBits 类型变量 bits 和一个 Speex 编码器的内存指针变量enc。
• 调用 speex_bits_init(&bits) 函数初始化bits。
• 调用 enc = speex_encoder_init(&speex_nb_mode) 函数初始化 enc。其中speex_nb_mode 是SpeexMode类型的变量，表示的是窄带模式。还有 speex_wb_mode 表示宽带模式、speex_uwb_mode表示超宽带模式。
• 调用函数 int speex_encoder_ctl(void * state, int request, void * ptr) 来设定编码器的参数，其中参数 state 表示编码器的内存指针；参数 request 表示要定义的参数类型，如 SPEEX_GET_FRAME_SIZE 表示设置帧大小，SPEEX_SET_QUALITY表示编码的质量等级；参数 ptr 表示要设定的值。
• 初始化完毕后，对每一帧声音作如下处理：调用函数 speex_bits_reset(&bits) 重置 bits，然后调用函数speex_encode(enc_state,input_frame, &bits) 进行编码，参数 bits 中保存编码后的 Speex 格式数据帧。

编码结束后，调用函数 speex_bits_destroy(&bits)，speex_encoder_destroy(enc_state) 来销毁 SpeexBits 和编码器。

解码流程

• 对已经编码过的 Speex 格式音频数据帧进行解码要经过以下步骤：
• 定义一个 SpeexBits 类型变量 bits 和一个 Speex 解码器的内存指针变量dec。
• 调用 speex_bits_init(&bits) 函数初始化bits。
• 调用 dec = speex_decoder_init(&speex_nb_mode) 函数初始化dec。
• 调用函数 speex_decoder_ctl(void * state, int request, void * ptr) 来设定解码器的参数。
• 调用函数 speex_decode(void * state, SpeexBits * bits, float * out)对参数 bits 中的 Speex 格式音频数据帧进行解码，参数 out 中存放解码后的音频数据帧。
• 调用函数 speex_bits_destroy(&bits), speex_decoder_destroy(void * state) 来销毁 SpeexBits 和解码器

说重点

当做即时通信产品，像微信这种的手机端，它们接受到很有可能就是 speex 协议压缩后的音频文件。当然，文件后缀是 wav 或者 ogg 都无关紧要

• H5的 audio 标签可以播放

  • 音频格式及浏览器支持
  • 目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
  • 浏览器 MP3 Wav Ogg
  • Internet Explorer 9+ YES NO NO
  • Chrome 6+ YES YES YES
  • Firefox 3.6+ NO YES YES
  • Safari 5+ YES YES NO
  • Opera 10+ NO YES YES
  • 音频格式的 MIME 类型
  • Format MIME-type
  • MP3 audio/mpeg
  • Ogg audio/ogg
  • Wav audio/wav

本开源库基于 speex 封装，抽取了必须要的文件后进一步封装，修改了在复杂环境下的兼容

• 本源码支持环境

  • 原生 javaScript 的HTML环境
  • MVVM框架
  • Electron React dva webpack的跨平台复杂环境

特别警告：本源码不支持 AMD CMD commonJS ES6 以及任何模块化方案，只能通过 script 标签引入后调用函数使用

主要解决了即时通讯中的 speex 音频格式文件直接在 H5 中播放的问题

• 本项目必须运行在服务器环境下 不能是本地打开 index.html 文件方式使用（因为用到了 websocket 通讯）
• 可以直接让 Speex 格式的音频文件在 H5 页面中通过 audio 标签播放
• 可以在复杂的环境中, 如 Electron + webpack +dva + React 的跨平台中完美使用
• 对于频率小于 22khz 的数据，我们需要复制一份，模拟成 22khz，因为 H5 只支持大于 22khz 的数据，但是这种情况我们一般不会遇到
• 使用 <script> 标签引入源码
• 如果你的使用方式是直接在页面中 <audio src=”./test.ogg”>，那么请你在引入源码后，立即在全局 JS 代码顶部调用函数 initAudio()
• 如果你的使用方式是动态添加 audio 标签，或者动态修改 audio 标签的 src 属性，那么请你每次修改 src 属性后调用函数 initAudio()，否则是不可以播放 speex 格式的音频文件的
• speex 格式音频文件，后缀可能是 ogg 的，但是任然可以播放（speex 只是一个开源免费压缩协议）
• 本项目不支持任何模块化 禁止在框架中通过 import 或者 require 导入，因为源码中涉及 8 进制的代码，严格模式下是不可以使用八进制的
• MVVM 框架和原生的 JS 使用方法都是通过 script 引入，全局调用 initAudio 函数

欢迎 github 提交issue，这个轮子是经过整合别人代码后优化，后期会继续优化。github 仓库地址

npm i speex-in-h5也可以下载，但是本项目不支持任何模块化方案，请手动引入 index 文件, 仓库中有Demo！

路过点赞， 6 天 6 次要 9 ———996的福报，马老师