jquery版 语音识别

161 阅读2分钟

image.png

image.png 语音执行前 需要引入WebSocket文件js

  const recoder = function (window) {
  // 兼容
  window.URL = window.URL || window.webkitURL
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
  var HZRecorder = function (stream, config) {
    config = config || {}
    config.sampleBits = config.sampleBits || 16 // 采样数位 8, 16
    config.sampleRate = config.sampleRate || (16000 / 1) // 采样率(1/6
    // 44100)

    var context = new (window.webkitAudioContext || window.AudioContext)()
    // console.log(stream)
    var audioInput = context.createMediaStreamSource(stream)
    var createScript = context.createScriptProcessor || context.createJavaScriptNode
    var recorder = createScript.apply(context, [4096, 1, 1])

    var audioData = {
      size: 0, // 录音文件长度
      buffer: [], // 录音缓存
      inputSampleRate: context.sampleRate, // 输入采样率
      inputSampleBits: 16, // 输入采样数位 8, 16
      outputSampleRate: config.sampleRate, // 输出采样率
      oututSampleBits: config.sampleBits, // 输出采样数位 8, 16
      input: function (data) {
        this.buffer.push(new Float32Array(data))
        this.size += data.length
      },
      compress: function () { // 合并压缩
        // 合并
        var data = new Float32Array(this.size)
        var offset = 0
        for (var i = 0; i < this.buffer.length; i++) {
          data.set(this.buffer[i], offset)
          offset += this.buffer[i].length
        }
        // 压缩
        var compression = parseInt(this.inputSampleRate / this.outputSampleRate)
        var length = data.length / compression
        var result = new Float32Array(length)
        var index = 0; var j = 0
        while (index < length) {
          result[index] = data[j]
          j += compression
          index++
        }
        return result
      },
      clear: function () {
        this.size = 0
        this.buffer = []
      },
      encodeWAV: function () {
        var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate)

        // console.log(sampleRate);

        var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits)
        // console.log(sampleBits);

        var bytes = this.compress()
        var dataLength = bytes.length * (sampleBits / 8)
        var buffer = new ArrayBuffer(44 + dataLength)
        var data = new DataView(buffer)

        var channelCount = 1// 单声道
        var offset = 0

        var writeString = function (str) {
          for (var i = 0; i < str.length; i++) {
            data.setUint8(offset + i, str.charCodeAt(i))
          }
        }

        // 资源交换文件标识符
        writeString('RIFF'); offset += 4
        // 下个地址开始到文件尾总字节数,即文件大小-8
        data.setUint32(offset, 36 + dataLength, true); offset += 4
        // WAV文件标志
        writeString('WAVE'); offset += 4
        // 波形格式标志
        writeString('fmt '); offset += 4
        // 过滤字节,一般为 0x10 = 16
        data.setUint32(offset, 16, true); offset += 4
        // 格式类别 (PCM形式采样数据)
        data.setUint16(offset, 1, true); offset += 2
        // 通道数
        data.setUint16(offset, channelCount, true); offset += 2
        // 采样率,每秒样本数,表示每个通道的播放速度
        data.setUint32(offset, sampleRate, true); offset += 4
        // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
        data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4
        // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
        data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2
        // 每样本数据位数
        data.setUint16(offset, sampleBits, true); offset += 2
        // 数据标识符
        writeString('data'); offset += 4
        // 采样数据总数,即数据总大小-44
        data.setUint32(offset, dataLength * 100, true); offset += 4
        // 写入采样数据
        if (sampleBits === 8) {
          for (var i = 0; i < bytes.length; i++, offset++) {
            var s = Math.max(-1, Math.min(1, bytes[i]))
            var val = s < 0 ? s * 0x8000 : s * 0x7FFF
            val = parseInt(255 / (65535 / (val + 32768)))
            data.setInt8(offset, val, true)
          }
        } else {
          for (var i = 0; i < bytes.length; i++, offset += 2) {
            var s = Math.max(-1, Math.min(1, bytes[i]))
            data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true)
          }
        }

        return new Blob([data], { type: 'audio/wav' })
      }
    }

    // 开始录音
    this.start = function () {
      audioInput.connect(recorder)
      recorder.connect(context.destination)
    }

    // 停止
    this.stop = function () {
      recorder.disconnect()
    }

    // 获取音频文件
    this.getBlob = function () {
      this.stop()
      return audioData.encodeWAV()
    }

    // 回放
    this.play = function (audio) {
      audio.src = window.URL.createObjectURL(this.getBlob())
    }

    this.exportWAV = function (callback) {
      if (callback) {
        var blob = audioData.encodeWAV()
        audioData.clear()
        callback(blob)
      }
    }

    // 音频采集
    recorder.onaudioprocess = function (e) {
      audioData.input(e.inputBuffer.getChannelData(0))
      // record(e.inputBuffer.getChannelData(0));
    }
  }
  // 抛出异常
  HZRecorder.throwError = function (message) {
    alert(message)
    throw new function () { this.toString = function () { return message } }()
  }
  // 是否支持录音
  HZRecorder.canRecording = (navigator.getUserMedia != null)
  // 获取录音机
  HZRecorder.get = function (callback, config) {
    if (callback) {
      if (navigator.getUserMedia) {
        navigator.getUserMedia(
          { audio: true } // 只启用音频
          , function (stream) {
            var rec = new HZRecorder(stream, config)
            callback(rec)
          }
          , function (error) {
            switch (error.code || error.name) {
              case 'PERMISSION_DENIED':
              case 'PermissionDeniedError':
                HZRecorder.throwError('用户拒绝提供信息。')
                break
              case 'NOT_SUPPORTED_ERROR':
              case 'NotSupportedError':
                HZRecorder.throwError('浏览器不支持硬件设备。')
                break
              case 'MANDATORY_UNSATISFIED_ERROR':
              case 'MandatoryUnsatisfiedError':
                HZRecorder.throwError('无法发现指定的硬件设备。')
                break
              default:
                HZRecorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name))
                break
            }
          })
      } else {
        HZRecorder.throwErr('当前浏览器不支持录音功能。')
      }
    }
  }

  window.HZRecorder = HZRecorder
}
recoder(window)
var recorder
var intervalKey
var ws
 function startRecord(callback) {
  try {
    window.HZRecorder.get(rec => {
      if (rec.error)
        return callback.error(rec.error);
      recorder = rec;
      recorder.start();
      callback.success("Recording...");
      // console.log('Recording...')

    })
  } catch (error) {
    callback.error("Recordingfail" + error);
  }

}
 function stopRecord(callback) {
  try {
    let blobData = recorder.getBlob();
    callback.success(blobData);
  } catch (error) {
    callback.error("StopRecordingfail" + error);
  }
  // recorder.stop()
  // console.log('.........stoped...........')

}

 function startRecording(callback) {
  // console.log(2222)

  // console.log(callback)
  initWs(e => {
    window.HZRecorder.get(function (rec) {
      recorder = rec
      recorder.start()
      console.log('Recording...')
      intervalKey = setInterval(function () {
        recorder.exportWAV(function (blob) {
          ws.send(blob)
        })
      }, 50)
    })
    console.log('.........正在录音......')
  },
    callback
  )
}

 function stopRecording() {
  recorder.stop()
  console.log('.........stoped...........')
  clearInterval(intervalKey)
  // document.getElementById('ptime').innerHTML = "";
  ws.close()
}

window.start = startRecording
window.stop = stopRecording

let sessionId
function initWs(call, callback) {
  sessionId = 'ASTDEMO_' + _getRandomString(8)
  // var wsuri = "wss://124.114.129.219:2256/" + document.location.host + "/tuling/demo/ast/"+sessionId;  // 可以通
  var wsuri = 'ws://10.1.25.49:4567/tuling/ast/v2/' + sessionId + '?appId=10101&bizId=123&bizName=WebSocket&lan=chin&sr=16000&bps=16&fs=4096'

  // var wsuri = "ws://124.114.129.219:4567/tuling/ast/v2/" + sessionId; // 不能通
  console.log(wsuri)
  ws = new WebSocket(wsuri)
  ws.onopen = function () {
    console.log('Openened connection to websocket')
    call()
  }
  ws.onmessage = function (e) {
    console.log(`收到消息`)
    callback(e.data)
  }
  // console.log(callback)
};

// 获取长度为len的随机字符串
function _getRandomString(len) {
  len = len || 32
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
  var maxPos = $chars.length
  var pwd = ''
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
}

语音开始识别 执行事件

// 语音识别
        $('.begin').click(function () {
            if (!text.message) text.message = " "
            message = $('.voice-content').html()
            $('.over').show()
            $('.begin').hide()
            let getUserMedia =
                navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia;
            if (!getUserMedia) {
                // this.$message.error("当前浏览器不支持语音");
                console.log("当前浏览器不支持语音");
                return;
            }
            if (voiceVisible) return
            this.config = config
            initWs(() => {
                voiceVisible = true; //启动通话框
                voiceVisible = false;
                isRecord = true; // 开启识别中
                sessionStorage.removeItem("msgBox");
                //开始采集音频 (这里的意思 开始 录音)
                let config = this.config;
                HZRecorder.get(function (rec) {
                    console.log(rec, "rec开始采集音频");
                    recorder = rec;
                    recorder.start();
                    if (typeof recorder === "object") {
                        intervalKey = setInterval(function () {
                            recorder.exportWAV(function (blob) {
                                ws = this.ws
                                if (this.ws.readyState === this.ws.OPEN) {
                                    // 若是ws开启状态
                                    this.ws.send(blob);
                                }
                            });
                        }, 10);
                    }
                }, config);
            });
        })

initWs语音配置

    // 初始化ws
        function initWs(callback) {
            console.log(defaultMsg);
            Loading({ type: 2, tipLabel: "连接服务器中..." })
            let sessionId = "ASTDEMO_" + getRandomString(8); // 随机数
            let wsuri = CONFIGURL['XUF'] + sessionId + "?appId=10101&bizId=123&bizName=WebSocket&lan=chin&sr=16000&bps=16&fs=4096";
            this.ws = new WebSocket(wsuri); // 开启websocket
            this.ws.onopen = function () {
                //开启
                callback();
            };
            // 接受的文字
            this.ws.onmessage = function (e) {
                let data = JSON.parse(e.data).body;
                console.log(data, "语音结果");
                handleMsg(data, data.result)
                // handleMsgNew(e.data) // 老版本处理方式
            };
            this.ws.onerror = function (err) {
                messageTitle({ name: '链接服务器失败', err: 'err' })
                console.log(err, "链接服务器失败...");
            };
        }

语音暂停继续

        // 结束
        $('.over').click(function () {
            $('.begin').show()
            $('.over').hide()
            isRecord = false  //暂停识别中
            unStart = false
            msgBox = []
            recorder.stop();
            ws.close();
            clearInterval(intervalKey);
            intervalKey = null;
        })
        // 暂停
        $('.suspend').click(function () {
            if (!isRecord) return
            $('.onStart').show()
            $('.suspend').hide()
            unStart = false
            console.log(ws, "关闭");
            ws.close();
            recorder.stop();
            clearInterval(intervalKey);
            intervalKey = null;
        })
        // 继续
        $('.onStart').click(function () {
            $('.suspend').show()
            $('.onStart').hide()
            initWs(() => {
                console.log(this.config);
                // console.log(config);
                unStart = true;
                HZRecorder.get(function (rec) {
                    console.log(rec);
                    recorder = rec;
                    recorder.start();
                    if (typeof recorder === "object") {
                        intervalKey = setInterval(function () {
                            recorder.exportWAV(function (blob) {
                                // console.log(blob); // 类型大小
                                if (this.ws.readyState === this.ws.OPEN) {
                                    // 若是ws开启状态
                                    this.ws.send(blob);
                                }
                            });
                        }, 500);
                    }
                }, config);
            });
        })