AI小程序之語音聽寫來了，十分鐘掌握百度大腦語音聽寫全攻略！！

語音識別極速版能將60秒之內的完整音頻文件識別爲文字。用於近場短語音交互，如手機語音搜索、聊天輸入等場景。 支持上傳完整的錄音文件，錄音文件時長不超過60秒。實時返回識別結果。本文主要介紹採用百度語音識別，實現小程序的聽寫功能。

想了解微信小程序的開發過程，請參看我以前的帖子：《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022

想了解語音識別極速版的調用過程，請參看我以前的帖子：《語音問答機器人小程序》

https://ai.baidu.com/forum/topic/show/953177

1 系統框架

用到的技術主要有：百度語音識別和微信小程序。採用微信提供的錄音管理器 recorderManager實現錄音，錄音格式aac。小程序將用戶上傳的語音提交給百度語音證識別服務，返回文本信息並顯示出來。所有功能都在小程序客戶端完成，不須要服務器，適合我的開發者學習調試使用，同時也爲商業應用提供相應解決方案。

2建立小程序項目

在根目錄的全局配置文件app.json中增長："pages/asr/asr" ，會自動建立相關頁面文件，結構以下：

asr.js：功能邏輯模塊

asr.wxss：頁面樣式文件

asr.wxml：頁面佈局文件

asr.json：頁面配置文件

3 調用語音識別極速版API

3.1 首先要在控制檯建立應用，調用語音識別極速版API，「獲取API Key/Secret Key」。

接口文檔地址：https://ai.baidu.com/docs#/ASR-API-PRO/top

請求URL: https://vop.baidu.com/pro_api

Body中放置請求參數，參數詳情以下：

返回參數：

3.2 語音識別極速版功能實現

（1）發送URL請求核心代碼

//在baiduai.js中發送URL請求，並進行封裝。

let asrRequest = (tempFilePath, len, arg) =>{ // corpus是要發送的對話；arg是回調方法

  var that = this;

  var voice = fs.readFileSync(tempFilePath, "base64");

  var asr_token = app.globalData.access_token;

  console.log("[Console log]:asr_token" + asr_token);

  var rqJson = {

    'dev_pid': 80001,

    'format': 'm4a',

    'rate': 16000,

    'token': asr_token,

    'cuid': 'qwertyuguilgfds678iutfydthrgfe',

    'channel': 1,

    'len': len,

    'speech': voice

  };

  var rq = JSON.stringify(rqJson);

  console.log(rq);

  var ASRUrl = app.globalData.ASRUrl;

  // cusid是用來實現上下文的，能夠本身隨意定義內容，要夠長夠隨機

  var cusid = app.globalData.NLPCusid;

  //console.log("[Console log]:ASRRequest(),URL:" + ASRUrl);

  wx.request({

    url: ASRUrl,

    data: rq,

    header: { 'content-type': 'application/json' },

    method: 'POST',

    success: function (res) {

      var resData = res.data;

      //  var text = resData.result;

      console.log("[Console log]:resData" + resData);

    

      var nli = JSON.stringify(resData);

      console.log("[Console log]:Result:" + nli);

      // 回調函數，解析數據

      typeof arg.success == "function" && arg.success(nli);

    },

    fail: function (res) {

      // console.log("[Console log]:ASRRequest() failed...");

      // console.error("[Console log]:Error Message:" + res.errMsg);

      typeof arg.fail == "function" && arg.fail();

    },

    complete: function () {

      //  console.log("[Console log]:ASRRequest() complete...");

      typeof arg.complete == "function" && arg.complete();

    }

  })

}

//接口

module.exports = {

asrRequest:asrRequest,

 }

(2)定義按鈕點擊事件

//在asr.js中定義按鈕點擊事件


  sendAsrRequest(tempFilePath, fileSize) {

    var that = this;

    api.asrRequest(tempFilePath, fileSize, {

      'success': function (res) {

        var resData = JSON.parse(res);

        // console.log(res.result);

        // var resData = res.data;

        //提取json數據的'result'

        var asr_out = resData.result;

        that.setData({asr_output: asr_out});

        console.log("有返回語音:"+asr_out);

        if (res.status == "error") {

          wx.showToast({

            title: '返回asr數據有誤！',

          })

          return;

        }

      },

      'fail': function (res) {

        wx.showToast({

          title: '請求asr失敗！',

        })

        return;

      }

    });

  },

(3)定義按鈕點擊事件

//在asr.js中定義定義按鈕點擊事件

// 按鈕按下

  touchdown: function () {

    var that = this;

    // 開始錄音

    recorderManager.start(voiceOptions);

    this.setData({

      isSpeaking: true,

    })

    that.speaking.call();

    // console.log("[Console log]:Touch down!Start recording!");

  },

  // 中止錄音，會觸發onStop事件

  touchup: function () {

    var that = this;

    recorderManager.stop(voiceOptions)

    // console.log("[Console log]:Touch up!Stop recording!");

    this.setData({

      isSpeaking: false,

      speakerUrl: '/res/image/speaker.png',

    })

    clearInterval(that.speakerInterval);//定時器中止

  },




    // 添加錄音中止觸發事件，這段代碼能夠放到onLoad()裏，頁面加載的時候就添加上

    recorderManager.onStop((res) => {

      const { tempFilePath, fileSize } = res

      //  console.log("ok!!res:", res);

      this.sendAsrRequest(res.tempFilePath, res.fileSize);

      //  console.log("ok!! res.fileSize:", res.fileSize);

      //  console.log("ok!! res.tempFilePath:", res.tempFilePath);

    });

    recorderManager.onError((res) => {

      //  console.log("error", res);

    });

 (4)修改頁面樣式文件

/* pages/asr/asr.wxss */

.atbottom {

  width: 100%;

  height: 50px;

  display: flex;

  flex-direction: row;

  justify-content: center;

  position: fixed;

  background: #3366FF;

  bottom: 0;

}


.result{

  font-size: 32rpx;

  color: #fa4627;

  border-top: 1rpx solid #eeeeee;

  margin:30rpx 20rpx 0rpx 20rpx;

  padding: 10rpx;

}


.card {

    border: 2px solid #807474e5;

    border-radius: 5px;

    height: 450px;

    background-color: #f7f33b94;

    box-shadow: 4px 1px 1px #cccccc;

    margin: 8px;

    position: relative;

}


.image {

    width: 10%;

    height: 20px;

    background-color: #eeeeee;

 4 實現效果

 

做者：wangwei8638