网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

搭建https的silk錄音文件語音識別服務的調用過程

發(fā)布時間：2018-01-02 08:59 所屬欄目：小程序開發(fā)教程
實現功能

實現一個智能生活信息查詢的小秘書功能，支持查天氣、新聞、日歷、匯率、笑話、故事、百科、詩詞、郵編、區(qū)號、菜譜、股票、節(jié)目預告，還支持閑聊、算24點、數學計算、單位換算、購物、搜索等功能。

使用方式：

新版上線支持語音識別，按下說話，松開發(fā)送。

老版本上支持搖一搖、點界面按鈕、手動輸入、下拉刷新這四種方式。

掃碼試用（左右皆可）

 

界面展示

 
 

開發(fā)資源

  • 免費開放語義接口平臺 olami.ai
  • 微信小程序平臺
  • js, css
  • 我自己搭建的https的語音識別API
接口
源碼分析

這里主要介紹新版本首頁相關的代碼，其它部分代碼在 微信小程序——智能小秘“遙知之”源碼分享（語義理解基于olami）(注：這個是原來不支持語音識別的版本) 的基礎上，變化不怎么大，具體可參考那篇文章。

asr.js源碼：
  1. /**
  2. * 作者：happycxz
  3. * 時間：2017.09.19
  4. * 源碼分享鏈接：http://blog.csdn.net/happycxz/article/details/78024986
  5. * 
  6. * https的silk語音識別API（專供微信小程序調用）：https://api.happycxz.com/test/silk2asr/olami/asr
  7. * 該API服務搭建全過程解析及源碼分享貼：http://blog.csdn.net/happycxz/article/details/78016299
  8. * 需要使用此API請聯(lián)系作者QQ：404499164
  9. * 
  10. * 遵循開放、分享、自由、免費的精神，把開源堅持到底
  11. */
  12.  
  13. //獲取應用實例 
  14. var app = getApp()
  15.  
  16. var UTIL = require('../../utils/util.js');
  17. var GUID = require('../../utils/GUID.js');
  18. var NLI = require('../../utils/NLI.js');
  19.  
  20. const appkey = require('../../config').appkey
  21. const appsecret = require('../../config').appsecret
  22.  
  23. //彈幕定時器
  24. var timer;
  25.  
  26. var pageSelf = undefined;
  27.  
  28. var doommList = [];
  29. class Doomm {
  30.   constructor() {
  31.     this.text = UTIL.getRandomItem(app.globalData.corpus);
  32.     this.top = Math.ceil(Math.random() * 40);
  33.     this.time = Math.ceil(Math.random() * 8 + 6);
  34.     this.color = getRandomColor();
  35.     this.display = true;
  36.     let that = this;
  37.     setTimeout(function () {
  38.       doommList.splice(doommList.indexOf(that), 1);
  39.       doommList.push(new Doomm());
  40.  
  41.       pageSelf.setData({
  42.         doommData: doommList
  43.       })
  44.     }, this.time * 1000)
  45.   }
  46. }
  47. function getRandomColor() {
  48.   let rgb = []
  49.   for (let i = 0; i < 3; ++i) {
  50.     let color = Math.floor(Math.random() * 256).toString(16)
  51.     color = color.length == 1 ? '0' + color : color
  52.     rgb.push(color)
  53.   }
  54.   return '#' + rgb.join('')
  55. }
  56.  
  57. Page({
  58.   data: {
  59.     j: 1,//幀動畫初始圖片 
  60.     isSpeaking: false,//是否正在說話
  61.     outputTxt : "", //輸出識別結果
  62.  
  63.     doommData: []
  64.   },
  65.  
  66.   initDoomm: function () {
  67.     doommList.push(new Doomm());
  68.     doommList.push(new Doomm());
  69.     doommList.push(new Doomm());
  70.     this.setData({
  71.       doommData: doommList
  72.     })
  73.   },
  74.  
  75.   onLoad: function () {
  76.     pageSelf = this;
  77.     this.initDoomm();
  78.   },
  79.  
  80.   //手指按下 
  81.   touchdown: function () {
  82.     UTIL.log("手指按下了... new date : " + new Date)
  83.     var _this = this;
  84.     speaking.call(this);
  85.     this.setData({
  86.       isSpeaking: true
  87.     })
  88.     //開始錄音 
  89.     wx.startRecord({
  90.       success: function (res) {
  91.         //臨時路徑,下次進入小程序時無法正常使用
  92.         var tempFilePath = res.tempFilePath;
  93.         UTIL.log('record SUCCESS file path:' + tempFilePath)
  94.         _this.setData({
  95.           recordPath: tempFilePath
  96.         });
  97.       },
  98.       fail: function (res) {
  99.         //錄音失敗 
  100.         wx.showModal({
  101.           title: '提示',
  102.           content: '錄音的姿勢不對!',
  103.           showCancel: false,
  104.           success: function (res) {
  105.             if (res.confirm) {
  106.               UTIL.log('用戶點擊確定')
  107.               return
  108.             }
  109.           }
  110.         })
  111.       }
  112.     })
  113.   },
  114.   //手指抬起 
  115.   touchup: function () {
  116.     UTIL.log("手指抬起了...")
  117.     this.setData({
  118.       isSpeaking: false,
  119.     })
  120.     clearInterval(this.timer)
  121.     wx.stopRecord()
  122.  
  123.     var _this = this
  124.     setTimeout(function () {
  125.       var urls = "https://api.happycxz.com/test/silk2asr/olami/asr";
  126.       UTIL.log(_this.data.recordPath);
  127.       wx.uploadFile({
  128.         url: urls,
  129.         filePath: _this.data.recordPath,
  130.         name: 'file',
  131.         formData: { "appKey": appkey, "appSecret": appsecret, "userId": UTIL.getUserUnique() },
  132.         header: { 'content-type': 'multipart/form-data' },
  133.         success: function (res) {
  134.           UTIL.log('res.data:' + res.data);
  135.  
  136.           var nliResult = getNliFromResult(res.data);
  137.           UTIL.log('nliResult:' + nliResult);
  138.           var stt = getSttFromResult(res.data);
  139.           UTIL.log('stt:' + stt);
  140.  
  141.           var sentenceResult;
  142.           try {
  143.             sentenceResult = NLI.getSentenceFromNliResult(nliResult);
  144.           } catch (e) {
  145.             UTIL.log('touchup() 錯誤' + e.message + '發(fā)生在' + e.lineNumber + '行');
  146.             sentenceResult = '沒明白你說的，換個話題？'
  147.           }
  148.  
  149.           var lastOutput = "==>語音識別結果：\n" + stt + "\n\n==>語義處理結果：\n" + sentenceResult;
  150.           _this.setData({
  151.             outputTxt: lastOutput,
  152.           });
  153.           wx.hideToast();
  154.         },
  155.         fail: function (res) {
  156.           UTIL.log(res);
  157.           wx.showModal({
  158.             title: '提示',
  159.             content: "網絡請求失敗，請確保網絡是否正常",
  160.             showCancel: false,
  161.             success: function (res) {
  162.             }
  163.           });
  164.           wx.hideToast();
  165.         }
  166.       });
  167.     }, 1000)
  168.   },
  169.  
  170.   //切換到老版本
  171.   turnToOld: function() {
  172.     wx.navigateTo({
  173.       url: '../index/index',
  174.     })
  175.   },
  176.  
  177. })
  178.  
  179. function getNliFromResult(res_data) {
  180.   var res_data_json = JSON.parse(res_data);
  181.   var res_data_result_json = JSON.parse(res_data_json.result);
  182.   return res_data_result_json.nli;
  183. }
  184.  
  185. function getSttFromResult(res_data) {
  186.   var res_data_json = JSON.parse(res_data);
  187.   var res_data_result_json = JSON.parse(res_data_json.result);
  188.   return res_data_result_json.asr.result;
  189. }
  190.  
  191. //麥克風幀動畫 
  192. function speaking() {
  193.   var _this = this;
  194.   //話筒幀動畫 
  195.   var i = 1;
  196.   this.timer = setInterval(function () {
  197.     i++;
  198.     i = i % 5;
  199.     _this.setData({
  200.       j: i
  201.     })
  202.   }, 200);
  203. }
復制代碼

這部分主要實現錄音按鈕被按下和松開觸發(fā)話筒錄音及結束錄音，當按鈕被按下后，觸發(fā)調用話筒動畫特效（其實是四五個圖片輪流顯示的效果），同時調用wx.startRecord開始錄音。

當按鈕松開時停止錄音，然后將錄音臨時文件往 https://api.happycxz.com/test/silk2asr/olami/asr 上發(fā)送，同時發(fā)olami上注冊申請的appKey和appSecret，以及用戶唯一識別號。

從語音識別接口返回的結果是原封不動的olami官方輸出結果，我們只需要取一下語音識別結果以及語義理解結果即可。 語義理解結果在原來 微信小程序——智能小秘“遙知之”源碼分享（語義理解基于olami）(注：這個是原來不支持語音識別的版本) 中已經有方法解析，為了代碼復用性強些，把解析nli結果的方法簡單改了下，即適用新版語音識別的，也適用以前老版本的手動輸入的。

代碼邏輯很簡單，看看就明白了，這里不再多述。

asr.json源碼：
  1. {
  2.   "window": {
  3.     "enablePullDownRefresh": false
  4.   }
  5. }
復制代碼

因為老版項目中我開啟了下拉刷新，新界面上不需要了，所以在asr頁面的.json這里特意關閉了此功能。

asr.wxml源碼：
  1. <view class="container">
  2.   <view class="page-section">
  3.     <view class="text-box" scroll-y="true">      
  4.       <text style="max-width:200px;overflow-y:auto;height:200px;" selectable="true">{{outputTxt}}</text>
  5.     </view>
  6.   </view>
  7.  
  8.   <view class="page-section">
  9.     <text selectable="true" class="text-head">語義理解基于olami.ai，作者QQ：404499164</text>
  10.   </view>
  11.  
  12.   <view class="little-gap-top button-selection2 button-show bottom-button">
  13.     <button size="mini" type="default" open-type="contact">聯(lián)系作者</button>
  14.     <button size="mini" type="default" bindtap="turnToOld">切老版本</button>
  15.     <button size="mini" type="default" open-type="share">幫忙分享</button>
  16.   </view>
  17.  
  18.   <view class="page-section">
  19.     <view class="doommview">
  20.       <block wx:for="{{doommData}}" wx:key="id">
  21.           <text wx:if="{{item.display}}" class="aon" style="animation: first {{item.time}}s linear infinite;top:{{item.top}}%;color:{{item.color}};">
  22.               {{item.text}}
  23.           </text>
  24.       </block>
  25.     </view>
  26.   </view>
  27.  
  28. <view  wx:if="{{isSpeaking}}"  class="speak-style">
  29.   <image class="sound-style" src="../../pics/voice_icon_speech_sound_1.png" ></image>
  30.   <image wx:if="{{j==2}}" class="sound-style" src="../../pics/voice_icon_speech_sound_2.png" ></image>
  31.   <image wx:if="{{j==3}}" class="sound-style" src="../../pics/voice_icon_speech_sound_3.png" ></image>
  32.   <image wx:if="{{j==4}}" class="sound-style" src="../../pics/voice_icon_speech_sound_4.png" ></image>
  33.   <image wx:if="{{j==5}}"class="sound-style" src="../../pics/voice_icon_speech_sound_5.png" ></image>
  34. </view>
  35.  
  36. </view>
  37.  
  38.  
  39. <view class="record-style">
  40.   <button type="primary" class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按下錄音，松開結束</button>
  41. </view>
復制代碼

布局調了半天，還是沒有達到我想要的效果，前端布局我沒系統(tǒng)學習過，基本就是湊湊拼拼，望有基本審美觀的各位看官理解……

asr.wxss源碼：
  1. /* pages/asr/asr.wxss */
  2.  
  3. page{
  4.   background-color:beige;
  5.   background-image: url(http://img.blog.csdn.net/20170720105808995?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFwcHljeHo=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast);
  6.   background-size: cover;
  7. }
  8.  
  9. .page-section{
  10.   display: flex;
  11.   flex-direction: column;
  12.   margin-bottom: 10rpx;
  13. }
  14.  
  15. .text-head{
  16.   color: #ff0000;
  17.   font-size: 28rpx;
  18.   align-items: center;
  19.   margin-top: 5rpx;
  20. }
  21.  
  22. .button-selection {
  23.   display: flex;
  24.   flex-direction: column;
  25.   justify-content: center;
  26.   align-items: center;
  27. }
  28.  
  29. .button-selection2 {
  30.   justify-content: space-between;
  31.   align-content: space-between;
  32.   flex-shrink:1;
  33. }
  34.  
  35. .little-gap-top {
  36.   margin-top: 10rpx; 
  37. }
  38.  
  39. .big-gap-top {
  40.   margin-top: 100rpx; 
  41. }
  42.  
  43. .button-show {
  44.   display: flex;
  45.   align-self: center;
  46.   justify-content: center;
  47. }
  48.  
  49. .bottom-button {
  50.   justify-content: space-around;
  51.   flex-shrink:0;
  52. }
  53.  
  54. .text-box{
  55.   margin-bottom: 0rpx;
  56.   margin-left: 50rpx;
  57.   margin-right: 50rpx;
  58.   padding: 40rpx 0;
  59.   display: flex;
  60.   min-height: 650rpx;
  61.   max-width: 600rpx;
  62.   width:600rpx;
  63.   background-color: #ffffff;
  64.   justify-content: center;
  65.   align-items: center;
  66.   text-align: left;
  67.   font-size: 30rpx;
  68.   color: #353535;
  69.   line-height: 2em;
  70.   
  71.   border: 1px solid cornflowerblue;
  72. }
  73.  
  74.  
  75. /* 錄音 */
  76. .speak-style{ 
  77.     position: relative; 
  78.     height: 240rpx; 
  79.     width: 240rpx; 
  80.     border-radius: 20rpx; 
  81.     margin: 0 auto; 
  82.     background: #26A5FF; 
  83. } 
  84. .record-style{ 
  85.     position: fixed; 
  86.     bottom: 0; 
  87.     left: 0; 
  88.     height: 120rpx; 
  89.     width: 100%; 
  90. } 
  91. .btn-style{ 
  92.   margin-left: 30rpx; 
  93.   margin-right: 30rpx; 
  94. } 
  95.    
  96. .sound-style{ 
  97.   position: absolute; 
  98.   width: 74rpx; 
  99.   height:150rpx; 
  100.   margin-top: 45rpx; 
  101.   margin-left: 83rpx; 
  102. } 
  103.  
  104.  
  105. /* 彈幕 */
  106. .button{
  107.   position: absolute;
  108.   bottom: 0;
  109.   width: 100%;
  110. }
  111. .aon{
  112. position: absolute;
  113. white-space:nowrap;
  114. animation-timing-function: linear;
  115. animation-fill-mode: none;
  116. }
  117. .doommview{
  118.   z-index: 3;
  119.   height: 80%;
  120.   width: 100%;
  121. /*  position: absolute;  */
  122. }
  123.  
  124. @keyframes first{
  125.   from{left: 100%; }
  126.   to{left: -100%;}
  127. }
復制代碼

彈幕部分原先是硬代碼實現的，后來在小程序聯(lián)盟里請教后才得知，css里有可以實現動畫特效的功能，就順便修改了一下。還是有點顯示方面BUG的，不折騰了。

其它代碼還是參照我原來的那個文章里介紹的吧：微信小程序——智能小秘“遙知之”源碼分享（語義理解基于olami）(注：這個是原來不支持語音識別的版本) ，基本變動比較少。

“遙知之”微信小程序完整源碼下載：

碼云：http://git.oschina.net/happycxz/ ... chat_littleapp_demo
github: https://github.com/happycxz/nlp_ ... chat_littleapp_demo

寫在最后

這次小程序的版本更新，還是上一次的延續(xù)，上次老版本未能支持上語音識別，用起來很不方便，網上也找不到相應的免費的接口，于是索性湊了點時間專門自己搭個HTTPS服務出來，方便同樣想在微信小程序上DEBUG語音識別功能的伙伴們和興趣開發(fā)者們調試和做些小玩意，好在，總算是一路走過來了，特別感謝kn007大神提供的silk decoder源碼以及ffmpeg轉碼腳本，關于此議題（解碼轉換QQ微信的SILK v3編碼音頻為MP3或其他格式）在他本人的博客中火熱地討論了一年多了，感興趣的也可以去膜拜一下這位大神。


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/18339.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×