HTML5实现DTMF（电话拨号按键信号）解码、编码，代码简单易于移植

目录

• 一、前言
  • 1.1 HTML5实现DTMF的一些动机
  • 1.2 一些有效场景
    • (1) 10086
    • (2) 软电话
    • (3) 小玩具
• 二、DTMF频率按键对照表
• 三、DTMF信号解码 得到按键值
  • 3.1 先学会手工解码
  • 3.2 了解一些原理
    • (1) 调整PCM采样率基本不会干扰到DTMF信号
    • (2) 降低采样率有利于识别DTMF信号
    • (3) 普通话音很难刚好凑成DTMF信号
  • 3.3 实现软件解码
    • (1) 降低PCM的采样率
    • (2) 如何找到那两条横线
    • (3) 用FFT将时域信号转成频率信号
    • (4) 粗暴的FFT扫荡模式：滑动窗口，不放过任何可能的信号
    • (5) 连续出现的相同信号即为有效按键
• 四、DTMF信号编码 生成按键PCM音频信号
  • 4.1 Mix：两个音频信号的混合
  • 4.2 生成单个按键信号
  • 4.3 连续多个按键信号混合到语音PCM流中

DTMF(Dual Tone Multi Frequency) 双音多频，由高频群和低频群组成，高低频群各包含4个频率；两个频率波形合成按键信号(0-9 * # A B C D)。

SIP中检测DTMF信号的方法：SIPINFO、RFC2833、INBAND；至于这些是什么我这个外行纯属热闹；拿两个手机互打电话，中途按下的按键嘟嘟的声音就是直接通过话音来传输DTMF信号，属于INBAND（带内检测）吧。

拿Adobe Audition打开手机上的电话录音文件，可以直观的肉眼看到整齐的DTMF信号，分析一下就能很快GET到此信号的解码、编码原理。

在线测试地址：在线测试

^{【图1】简单粗暴合成的PCM信号杂波较多，但和华为手机打出来的录音信号差不多（他们杂波少点）}

一、前言

1.1 HTML5实现DTMF的一些动机

我的GitHub开源库 Recorder 功能日渐丰富，最近又有项目可能会用到DTMF的解码功能，所以就用js实现了一下，本着易于移植的目的，相关代码都是简单的纯js代码，移植到别的语言非常方便。

涉及到三个源码，个个小巧：

1. FFT：lib.fft.js 111行（代码+空行+注释）
2. DTMF解码：dtmf.decode.js 192行（代码+空行+注释）
3. DTMF编码：dtmf.encode.js 191行（代码+空行+注释）

自评：高性能、准确度高、误识别率低；欢迎到 在线测试，下载别的一个软件 dtmf2num(命令行) 来对比伤害一下。

1.2 一些有效场景

(1) 10086

查话费请按1，嘟（你按了一个1），您的话费余额为9亿9千万……不能否认，这些能力的实现是建立在DTMF信号的编解码之上。

(2) 软电话

透过某些渠道，比如在你服务器上的程序拥有了自动拨打电话的能力，你希望通过用户按下某些按键后实现一些功能，比如输入密码，这样你的服务器端程序就需要带上DTMF解码功能。

(3) 小玩具

写一些小玩具把玩。嘿哈