最近接受了一個新的需求，希望制作一個基于微信的英語語音評價頁面。即點擊錄音按鈕，用戶錄音說出預設的英文，根據用戶的發音給出對應的評價。
功能列表
- ? 錄音
- ? 錄音動畫
- ? 錄音播放
- ? 英語語音評價（部分實現）
- ? 只允許微信客戶端打開
零 技術選型
錄音方面
可供選擇的方案有兩個：
使用HTML5接口 -getUserMedia()；- 微信開放平臺-
微信JS-SDK；.
通過http://caniuse.com查詢 getUserMedia()的兼容性。
getUserMedia() API兼容性
由于主要應用場景是在移動端，此API只能在iOS 11+ 與Android 5-6.X及以上可用，兼容性感人，故舍棄此方案。所以此次錄音實現基于微信開放平臺提供的微信JS-SDK。
英語語音識別
因為主要是基于微信平臺，所以要求語音識別平臺需要提供Web Api。
語音識別方面功能，主要有兩種技術路線。
- 專門著力于語音識別及相關產業的技術平臺，例如
訊飛以及調研中發現的馳聲。
優勢：專業并且提供語音評測相關功能；
劣勢：花費昂貴； - AI開放平臺，因為各大廠商布局AI，免費提供語音識別相關的接口。
優勢：免費，API清晰；
劣勢：并非為專門為教育定制，無語音評測功能；
結合項目的實際情況，決定使用第二種方案。（主要是因為經費有限……）
大廠提供的免費方案主要有：
-
百度AI
限制：50000次/天免費
格式支持：pcm（不壓縮）、wav（不壓縮，pcm編碼）、amr（壓縮格式）；固定16k 采樣率； -
騰訊AI開發平臺
語音參數：必須符合16k或8K采樣率、16bit采樣位數、單聲道
語音格式：PCM、WAV、AMR、 SILK
其他：目前只支持漢語 -
騰訊云智能語音服務
語音參數：必須符合16k或8K采樣率、16bit采樣位數、單聲道
語音格式：通用標準格式，例如 mp3，wma，wav 等 -
微信公眾平臺AI開放接口
語音參數：16k，單聲道，最大1M
語音格式：mp3 -
微信公眾平臺JS-SDK智能接口
其他：目前只支持漢語
大廠競爭果然系列，大鵝廠光語音服務肉眼可見的就折騰了這么多。（大霧）
經過一番折騰，最終可以形成兩種方案：
微信JS-SDK音頻接口錄音->上傳到微信臨時素材->下載到服務器->轉換錄音文件格式->百度AI語音識別返回結果->與預置的文件比對->返回比對結果
優勢：識別結果準
劣勢：慢（因為無法直接獲取用戶的錄音，需要從微信公眾平臺的臨時素材中轉，且錄音文件格式與百度AI可識別格式不一致，所以整個流程下來太慢）；微信公眾號需要企業認證
其他：至于為什么不選用騰訊系列，因為騰訊系列語音服務沒有調通。。。微信JS-SDK音頻接口錄音->調用JS-SDK智能接口返回識別結果->結果轉為拼音->與預置的文件比對->返回比對結果
優勢：返回結果迅速、方法簡單
劣勢：識別結果不太準確（因為JS-SDK智能接口不只是單單根據語音直接轉換，還會在結果的基礎上進行一定程度的聯想，話說為啥不能增加個語言選擇參數。）
本次整個方案使用方案2。
一 微信JS-SDK環境準備
寫在前邊：此處的開發環境不是指本地的開發環境，單指使用微信JS-SDK所需完成的一系列的獲取AccessToken、jsapi_ticket等前置條件。
開發環境
云服務器：騰訊云 · 小程序（特價，買了個折騰）
后臺語音：PHP · CodeIgniter（小程序PHP樣例使用CI框架）
1）公眾號配置
前置的公眾號申請等就不再贅述，如果要正常使用微信JS-SDK的功能，需要在公眾號配置一些內容。
配置IP白名單
通過微信公眾平臺 開發 -> 基本配置 -> IP白名單 進行設置，將開發環境的IP配置到IP白名單。
注1. 如果不配置白名單將無法獲取access_token，并在返回結果中返回40164錯誤；
注2. 因為是在騰訊云 · 小程序主機開發環境下折騰的，該環境如果一周不更新新的代碼會暫時關閉，IP也會發生變化，所以建議每周更新一下代碼；
配置JS接口安全域名
通過微信公眾平臺 設置 -> 公眾號設置 -> 功能設置 -> JS接口安全域名 進行設置，將JS接口安全域名寫入。
注1. 一個公眾號最多可以配置3個安全域名，需使用字母、數字及“-”的組合，不支持IP地址、端口號及短鏈域名，且域名必須經過備案；
注2. 需要將MP_verify_qEwAJiPuWerKftkO.txt（可在配置JS接口安全域名處自行下載）放到配置域名的根目錄,并確保可以訪問到。騰訊云 · 小程序默認樣例使用的CI框架，需要放到\server下；
注3. 如不配置JS接口安全域名，則無法成功調用JS-SDK；
2）獲取access_token
access_token是公眾號的全局唯一接口調用憑據，調用公眾號的各個接口時都需要使用。獲取access_token需要appid與appsecret。微信公眾平臺的access_token有效期為7200s (2小時)，每天最高可調用上限為2000次。因此獲取access_token需要做到：
- 定時刷新（刷新間隔大于1分鐘，小于120分）；
- 全局緩存
access_token；
Show me the code
class className extends CI_Controller {
var $appId = "appId";
var $appSecret = "appSecret";
var $accessTokenFile = "wxtoken.txt";
// var $jsapiTicketFile = "wxjsapiTicket.txt";
public function index() {
$this - > build_access_token(); //獲取access_token
// $this - > get_jsapi_ticket(); //獲取jsapic_ticket
}
public function build_access_token() {
$ch = curl_init(); //初始化一個CURL對象
curl_setopt($ch, CURLOPT_URL, "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$this->appId}&secret={$this->appSecret}");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = json_decode(curl_exec($ch));
if ($data - > access_token) {
$token_file = fopen($this - > accessTokenFile, "w") or die("Unable to open file!"); //打開wxtoken.txt文件，沒有會新建
fwrite($token_file, $data - > access_token); //重寫wxtken.txt全部內容
fclose($token_file); //關閉文件流
} else {
echo $data - > errmsg;
}
curl_close($ch);
}
public function read_token() {
$token_file = fopen($this - > accessTokenFile, "r") or die("Unable to open file!");
$rs = fgets($token_file);
fclose($token_file);
return $rs;
}
}
Talk is cheap
- 因為使用的是CI框架，將文件寫到
server\application\controllers\下可直接通過域名+文件名訪問到該接口，默認執行文件中的index中的方法； - 代碼中的基本邏輯通過
build_access_token()方法獲取access_token，并存儲到wxtken.txt，通過read_token()方法讀取access_token；
獲取access_token的詳細情況見官方API。
3）獲取jsapi_ticket
jsapi_ticket是公眾號用于調用微信JS接口的臨時票據，通過access_token來獲取。微信公眾平臺的jsapi_ticket有效期為7200s (2小時)，每天最高可調用上限為1000000次。因此同樣在全局緩存。
Show me the code
public function get_jsapi_ticket() {
$access_token = $this - > read_token();
$ch = curl_init(); //初始化一個CURL對象
curl_setopt($ch, CURLOPT_URL, "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = json_decode(curl_exec($ch));
if ($data - > ticket) {
$token_file = fopen($this - > jsapiTicketFile, "w") or die("Unable to open file!");
fwrite($token_file, $data - > ticket);
fclose($token_file); //關閉文件流
} else {
echo $data - > errmsg;
}
curl_close($ch);
}
public function read_jsapi_ticket() {
$jsapi_ticket_file = fopen($this - > jsapiTicketFile, "r") or die("Unable to open file!");
$rs = fgets($jsapi_ticket_file);
fclose($jsapi_ticket_file);
return $rs;
}
Talk is cheap
- 寫到跟獲取
access_token同一文件中，以便同時刷新； - 同之前的代碼中邏輯類似，通過
get_jsapi_ticket()方法獲取jsapi_ticket，并存儲到wxjsapiTicket.txt，通過read_jsapi_ticket()方法讀取jsapi_ticket；
獲取access_token的詳細情況見官方API。
4）刷新access_token及jsapi_ticket
由于微信公眾平臺的access_token與jsapi_ticket有兩個小時有效期，故需要定期刷新。基本思路有如下三個：
PHP定時執行任務；服務器定時任務；- 定時訪問URL；
1.PHP定時執行任務
主要使用死循環，執行一次時間，使用sleep()函數休眠一段時間，如下代碼：
ignore_user_abort();//即使Client斷開(如關掉瀏覽器)，PHP腳本也可以繼續執行.
set_time_limit(0);//執行時間為無限制，php默認的執行時間是30秒，通過set_time_limit(0)可以讓程序無限制的執行下去
$interval=60*100;//每隔100分鐘運行
do{
//do sth
sleep($interval);//按設置的時間等待100分鐘循環執行
}while(true);
缺點：缺點嚴重，啟動之后，無法控制。而且一直消耗服務器資源，容易被殺死；
2.服務器定時任務
windows平臺的計劃任務或者是Unix平臺的Crontab都有定時執行php腳本或者訪問URL的方法，但是由于使用的騰訊云 · 小程序使用的是Wafer一體化解決方案，無法直接訪問遠端服務器，故此方法放棄。
3. 定時訪問URL
我們這次定時刷新access_token及jsapi_ticket采用的就是此方法，騰訊云平臺，有個免費的功能云撥測可定時訪問某個URL，并且在無法訪問時，將預警信息發送給某個設定好的用戶組。
將我們之前寫好的獲取access_token及jsapi_ticket方法，寫到index()方法下，將URL填到撥測地址中，定時刷新，搞定。
注1. 云撥測最長的周期為半個小時，而且每次撥測可能訪問地址5-6次，其實更穩妥的方法是在數據庫中設置標志位，防治過度刷新，但是每天2000次的限額完全夠用，就暫時未做此功能。
5）生成JS-SDK配置信息
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用，配置信息需要的參數如下：
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
其中的appId、jsApiList已知，timestamp、nonceStr動態生成，signature由算法生產。其中關于signature的算法官方API描述如下：
簽名算法
簽名生成規則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其后面部分） 。對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉義。
即signature=sha1(string1)。 示例：
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value步驟1. 對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步驟2. 對string1進行sha1簽名，得到signature：
0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事項
- 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
- 簽名用的url必須是調用JS接口頁面的完整URL。
- 出于安全考慮，開發者必須在服務器端實現簽名的邏輯。
Show me the code
public function get_signpackage(){
$jsapi_ticket = $this->read_jsapi_ticket();
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 注意 URL 一定要動態獲取，不能 hardcode.
$noncestr = $this->createNonceStr();
$timestamp = time();
$trs_url = $this->input->post('trs_url');
$url = isset($trs_url)?$trs_url:$url;
$string1 = "jsapi_ticket={$jsapi_ticket}&noncestr={$noncestr}×tamp={$timestamp}&url={$url}";
$signature = sha1($string1);
$this->json([
'appId' => $this->appId,
'nonceStr' => $noncestr,
'timestamp' => $timestamp,
'signature' => $signature,
'url' => $url
]);
// return $signPackage;
}
private function createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}
Talk is cheap
- 一定要注意，簽名用的url必須是調用JS接口頁面的完整URL，這里通過前端POST獲取調用頁的URL；
- 返回值為json格式，前端通過ajax獲取；
- 因為采用了CI框架，前端ajax請求地址為
域名/weapp/此段代碼的文件名/get_signpackage。
至此，使用微信公眾平臺JS-SDK的前置條件均已準備完畢。
二 實現錄音按鈕動畫
基本的交互邏輯如下圖演示：
此處來實現長按錄音按鈕的動畫。基本思路是：
- 通過CSS3的
transition屬性實現record突變的平滑變小、平滑變大； - 通過CSS3的
keyframes動畫與偽類配合完成環形進度動畫；
Show me the code
<div class="content">
<div class="dialogBox" id="dialogBox">
</div>
<div class="voice-remote">
<span class="cover"></span>
<span class="icon"></span>
</div>
</div>
<style type="text/css">
.voice-remote {
border-radius: 50%;
width: 4rem;
height: 4rem;
overflow: hidden;
position: absolute;
background: #f6f6f6;
bottom: 1.5rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: all .2s;
-webkit-transition: all .2s;
}
.voice-remote:active {
width: 4.5rem;
height: 4.5rem;
bottom: 1rem;
border: 1px solid #e7e7e7;
}
.voice-remote:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top: 0;
left: 0;
border-radius: 50%;
background-image: linear-gradient(-90deg, transparent 50%, #1dc61c 50%);
}
.voice-remote:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
bottom: 0;
left: 0;
border-radius: 50%;
background-image: linear-gradient(-90deg, transparent 50%, #1dc61c 50%);
}
.voice-remote .cover {
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
z-index: 4;
top: 0;
left: 0;
background-image: linear-gradient(-90deg, transparent 50%, #f6f6f6 50%);
}
.voice-remote .icon {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #f6f6f6 url(../../images/voice.png) no-repeat center center;
background-size: 100%;
border-radius: 50%;
z-index: 5;
}
.voice-remote .icon:active {
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-size: 100%;
}
.voice-remote:active:before {
-webkit-animation: scoll linear 30s;
animation: scoll linear 30s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.voice-remote:active:after {
-webkit-animation: xscoll linear 60s;
animation: xscoll linear 60s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.voice-remote:active .cover {
-webkit-animation: hide linear 60s;
animation: hide linear 60s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes scoll {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
@keyframes scoll {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes xscoll {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes xscoll {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes hide {
0% {
opacity: 1
}
49.9% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes hide {
0% {
opacity: 1
}
49.9% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
Talk is cheap
錄音按鈕原理圖
錄音按鈕動畫原理如上圖分層，其中:before層添加動畫為旋轉180度，時間為30s，與此同時:after層添加動畫為旋轉360度，時間為60s，即前30s兩個圖層同時旋轉，當30s后:after層繼續旋轉，:before層保持位置不變，使整個右側環形顯示。.cover層添加動畫為前30s覆蓋整個左側，后30s隱藏。 整個動畫由最頂部.icon覆蓋，使整個動畫過程顯示為一個環形。
三 實現錄音及錄音播放功能
開始是實現錄音及播放的相關功能。主要流程是引入JS文件、通過config接口注入權限驗證配置、通過ready接口處理成功驗證、撰寫錄音代碼邏輯、撰寫錄音播放代碼邏輯。
1）引入JS文件
在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
Show me the code
requirejs.config({
baseUrl: './lib/js',
paths: {
'jquery': 'jquery',
'jweixin': 'jweixin',
'util': 'util',
'post_data': 'data',
'pinyin_dict_notone': 'pinyin_dict_notone',
'pinyinUtil': 'pinyinUtil',
}
});
define(['jquery', 'jweixin', 'post_data', 'util', 'pinyin_dict_notone', 'pinyinUtil'], function($, wx) {
}
Talk is cheap
- 此次使用AMD模式
requirejs引入相關文件； - 這里引入多個文件，之后的代碼需要使用；
注1. 支持使用 AMD/CMD 標準模塊加載方法加載，也支持直接使用<script></script>直接引用；
注2. 調用之前需要完成配置JS接口安全域名。
2）通過config接口注入權限驗證配置
通過ajax請求之前完成的生成JS-SDK配置信息接口，獲取到相關的配置內容，另外jsApiList接口列表需要根據業務需求自行添加。
Show me the code
$.ajax({
url: "your js-sdk interface",
dataType: "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data:{"trs_url":window.location.href.split("#")[0]},
type:"POST",
success: function(data) {
var baseWxData = data;
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: baseWxData['appId'], // 必填，公眾號的唯一標識
timestamp: baseWxData['timestamp'], // 必填，生成簽名的時間戳
nonceStr: baseWxData['nonceStr'], // 必填，生成簽名的隨機串
signature: baseWxData['signature'], // 必填，簽名，見附錄1
jsApiList: [
'startRecord', // 錄音開始api
'stopRecord', // 錄音結束api
'onVoiceRecordEnd', // 超過一分鐘自動停止api
'playVoice', // 播放錄音api
'pauseVoice', // 暫停錄音api
'stopVoice', // 停止播放api
'onVoicePlayEnd', // 監聽語音播放完畢api
'translateVoice'
]
});
}
});
Talk is cheap
- 用
post傳入當前頁面URL，因為簽名算法必須是使用調用頁的地址； - 此次功能只用到如代碼中的幾個API，更多API詳見官方API；
3）通過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});
4）撰寫錄音代碼邏輯
創建一個對象R，封裝錄音、播放以及翻譯等過程。監聽錄音按鈕的touchstart事件啟動錄音，監聽touchend時間結束錄音。
Show me the code
/* Javascript Code*/
var R = {
options: {
spoint: 0, //記錄recordstart時間
tpoint: 0, //記錄touchstart時間
epoint: 0, //記錄touchend時間
timer: 0, //setInterval
iOrder: 0 //記錄錄音序列order
},
feedback: {
great: ["Excellent!", "Well done!", "口語不錯嘛！", "非常棒！", "Great"],
good: ["Good job!", "Not bad!", "還不錯哦！", "Good! Keep going!", "干得不錯！加油"],
normal: ["Please try again!", "Oh,you can do better than that!", "分數有點兒低哦！", "再來一次試試！", "Have another try,please!"]
},
recode: function() { //定時最長60s后結束錄音
R.options.timer = setInterval(function() {
var time = +new Date() - R.options.spoint;
if (time >= 60000) {
alert("時間超過60秒，請再次錄制！");
setTimeout(function() {
R.translate();
}, 100);
clearInterval(R.options.timer);
}
}, 1000);
},
translate: function() { //結束錄音并識別語音
wx.stopRecord({
success: function(res) {
localId = res.localId;
$(".voice-remote").addClass("vrPause");
wx.translateVoice({
localId: localId,
complete: function(res) {}
});
},
fail: function(res) {
alert(JSON.stringify(res));
}
});
},
insertContent: function(obj) {
var _str = "";
switch (obj.iType) {
case 1:
_str = '<div class="p1 dialogItem"><div class="avatarBox"><img src="./images/avatar1.png" class="avatar" /></div><div class="contentBox"><div class="wordBox"><span>' + obj.iContent + '</span></div></div></div>';
break;
case 2:
_str = '<div class="p2 dialogItem isSound ' + obj.iClass + '"><div class="contentBox iPlayVoice" data-localid="' + obj.iContent + '"><div class="wordBox"><span><i class="sound"></i></span></div></div><div class="avatarBox"><img src="./images/avatar2.png" class="avatar" /></div>'
break;
case 3:
break;
case 4:
break;
default:
console.log('Undefined element of iType :' + iType);
}
$("#dialogBox").append(_str).scrollTop($("#dialogBox")[0].scrollHeight);
},
init: function() {
R.insertContent({
iType: 1,
iContent: word.keyword[R.options.iOrder].content,
});
// $.ajax();
wx.ready(function() {
$('.voice-remote').on('touchstart', function(e) {
$(".playing").each(function() {
_stoplocalId = $(this).data("localid");
$(this).removeClass("playing");
wx.stopVoice({
localId: _stoplocalId
});
});
R.options.tpoint = +new Date(); //記錄touchstart時間點
wx.startRecord({
success: function() {
$('.voice-remote').addClass('active');
R.options.spoint = +new Date(); //記錄開始錄音成功時間點
R.recode(); //啟用定時結束錄音定時器
if (R.options.spoint > R.options.epoint && R.options.epoint > R.options.tpoint) { //處理因為短按，startRecord還未初始成功，導致無法正常停止錄音
clearInterval(R.options.timer);
$('.voice-remote').removeClass('active');
}
},
fail: function(res) {
alert(JSON.stringify(res));
},
cancel: function() {
alert('您拒絕了授權錄音');
}
});
});
document.oncontextmenu = function(e) {
// 阻止部分手機長按會產生彈出框的問題
e.preventDefault();
};
$('.voice-remote').on('touchend', function() {
R.options.epoint = +new Date(); //記錄touchend時間點
$(this).removeClass('active');
var time = +new Date() - R.options.spoint;
if (time < 60000) { //當錄音間隔時間小于60s，touchend后清除定時結束錄音定時器，并調用結束錄音方法
setTimeout(function() {
R.translate();
}, 200);
clearInterval(R.options.timer);
}
});
$(document).on('touchstart', '.iPlayVoice', function() {
// do sth
});
wx.onVoicePlayEnd({
complete: function(res) {
// do sth
}
});
});
}
}
R.init();
/* CSS Code*/
.setHide {
display: none;
}
.content {
background: #ebebeb;
width: 100%;
height: 100%;
overflow: hidden;
font-family: Microsoft YaHei;
}
.dialogBox {
margin: 3%;
width: 94%;
height: 81%;
overflow-y: scroll;
}
.dialogItem {
margin: 3% 0;
overflow: hidden;
text-align: left;
}
.avatarBox {
display: inline-block;
}
.contentBox {
display: inline-block;
max-width: 68%;
margin-left: 12px;
}
.wordBox:before {
content: "";
width: 12px;
height: 25px;
background: url(../../images/sharpOther.png) 0 0 no-repeat;
position: absolute;
top: 50%;
margin-top: -12px;
left: -12px;
}
.wordBox {
border: 1px solid #d4d4d4;
background-color: #fff;
padding: 5px 10px;
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
min-height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: left;
}
.wordBox>span {
line-height: 1.5em;
display: inline-block;
vertical-align: middle;
text-align: justify;
}
.avatar {
width: 40px;
vertical-align: middle;
}
.sharpStyle {
width: 17px;
height: 35px;
background: url(../../images/sharpOther.png) 0 0 no-repeat;
display: inline-block;
margin-left: 6px;
vertical-align: middle;
}
.sharpMe {
background-image: url(../../images/sharpMe.png);
margin-left: 0;
margin-right: 6px;
}
.sound {
display: inline-block;
width: 18px;
height: 25px;
background: url(../../images/sound.png) 0 0 no-repeat;
background-size: 100% 100%;
}
.playing .sound {
background-image: url(../../images/sound.gif);
}
.p2 {
text-align: right;
}
.p2 .contentBox {
margin-left: 0;
margin-right: 12px;
}
.p2 .wordBox {
border: 1px solid #86b850;
background-color: #a1e75b;
}
.p2 .wordBox:before {
background: url(../../images/sharpMe.png) 0 0 no-repeat;
left: auto;
right: -12px;
}
.p2 .sound {
background-image: url(../../images/soundMe.png);
}
.p2 .playing .sound {
background-image: url(../../images/soundMe.gif);
}
.dialogItem .contentBox:after {
color: #969696;
margin-left: 3px;
}
.dialogItem .contentBox:before {
color: #969696;
margin-right: 3px;
}
.isSound .contentBox {
width: 68%;
}
.p2.isSound .wordBox {
text-align: right;
}
.soundOt1 .wordBox {
width: 15%;
}
.soundOt2 .wordBox {
width: 16%;
}
/*……*/
.soundOt1 .contentBox:after {
content: "1 ''";
}
.soundOt2 .contentBox:after {
content: "2 ''";
}
/*……*/
.soundMe1 .contentBox:before {
content: "1 ''";
}
.soundMe2 .contentBox:before {
content: "2 ''";
}
/*……*/
.soundMe1 .wordBox {
width: 15%;
}
.soundMe2 .wordBox {
width: 16%;
}
/*……*/
Talk is cheap
- 構建了
insertContent()方法構建頁面，使用scrollTop()方法使填充的新的對話框出現再最下邊; - 構建了
spoint與epoint兩個參數，判斷錄音時間； - 構建
recode()方法，使用setInterval()方法，限制錄音超過60s后停止（因為微信JS-SDK限制錄音時長最多為60s）； - 構建
feedback參數，為之后翻譯提供反饋； - 使用偽類實現對話前后的音頻時長；
已知兼容性問題
- 部分華為手機，長按后彈出彈出菜單，檢測
document的oncontextmenu事件，阻止默認事件e.preventDefault()； - 微信開發者工具調試時，超過60s后會因為
alert()會觸發一次touchend事件，真正抬手后又會觸發一次touchend，真機運行時無此問題；
5）撰寫錄音播放代碼邏輯
在構建頁面時將localid寫到對應對話語句中，通過該localid對應相應的錄音。
Show me the code
$(document).on('touchstart', '.iPlayVoice', function() {
var $this = $(this),
_localId = $this.data("localid");
if ($this.hasClass("playing")) {
wx.stopVoice({
localId: _localId
});
$this.removeClass("playing");
} else {
$(".playing").not($this).each(function() {
_stoplocalId = $(this).data("localid");
$(this).removeClass("playing");
wx.stopVoice({
localId: _stoplocalId
});
});
wx.playVoice({
localId: _localId
});
$this.addClass("playing");
}
});
wx.onVoicePlayEnd({
complete: function(res) {
$(".playing").removeClass("playing");
}
});
Talk is cheap
- 使用
$(document).on('touchstart', '.iPlayVoice', function() {})為.iPlayVoice動態綁定事件； - 使用
playing類名，控制播放時的狀態；
四 實現語音評價功能
開篇的技術選型時已經將前因后果說明了。現在就寫借助微信JS-SDK中的wx.translateVoice()方法實現語音評價功能的具體實現。具體流程為引入示例json、獲取語音翻譯結果、語音結果轉為拼音、結果比對、反饋評價。
1）引入示例json
將示例的數據寫成json，用requirejs引入。
Show me the code
var word = {
keyword: [{
order: 1,
content: "請說：<br />What's your name.",
matched: "我次要兒內幕,我想那,我次有那么",
localId: "-1"
}, {
order: 2,
content: "請說：<br />How are you.",
matched: "好啊有",
localId: "-1"
}, {
order: 3,
content: "請說：<br />Nice to meet you.",
matched: "挨次圖密特油",
localId: "-1"
}],
}
Talk is cheap
-
content數據項，標識的是引導語； -
matched項標識的是匹配內容，通過“，”分隔多個匹配內容，以提高匹配度；
2）獲取語音翻譯結果
Show me the code
wx.translateVoice({
localId: '', // 需要識別的音頻的本地Id，由錄音相關接口獲得
isShowProgressTips: 1, // 默認為1，顯示進度提示
success: function(res) {
alert(res.translateResult); // 語音識別的結果
}
fail: function(res) {
alert(JSON.stringify(res));
}
});
Talk is cheap
翻譯接口主要依靠localId來完成一系列的工作，成功后返回一段json格式的數據。
3）語音結果轉為拼音
此步驟主要將返回的內容轉換成拼音。借助的是@sxei（小茗同學）的一個庫，地址為github。
因為只需要轉換成無聲掉的拼音，那么只需要引入pinyin_dict_notone.js與pinyinUtil.js兩個文件，使用pinyinUtil.getPinyin('')方法將漢字轉化成拼音。
4）結果比對
比對語音翻譯的拼音與預置的信息的拼音進行比對，返回匹配程度。因為預置的結果有多個，取其中匹配程度最高的的一項。
Show me the code
var str_User = pinyinUtil.getPinyin(res.translateResult.split("。")[0]),
str_Ans = word.keyword[R.options.iOrder].matched.split(","),
matchedArray = new Array(),
matchedNum = 0;
for (var i = 0; i < str_Ans.length; i++) {
matchedArray[i] = strSimilarity2Percent(Trim(str_User), Trim(pinyinUtil.getPinyin(str_Ans[i])));
}
matchedNum = arrayMax(matchedArray);
Talk is cheap
- 返回的json數據，返回結果的key為translateResult；
- 返回的結果有“。”，故需要使用
res.translateResult.split("。")[0]將“。”排除； - 使用了三個自定義方法，
strSimilarity2Percent()返回匹配程度、Trim()排除字符串中的空格、arrayMax()返回數組中的最大值。相關方法存放在unit.js中；
/**
* 兩個字符串的相似程度，并返回相差字符個數
*
*
* @param {string} s 字符串1
* @param {string} t 字符串2
* @returns {number} d[n][m] 字符串差異個數
*
* @date 2018-03-02
* @author ReeCode
*/
function strSimilarity2Number(s, t) {
var n = s.length,
m = t.length,
d = [];
var i, j, s_i, t_j, cost;
if (n == 0) return m;
if (m == 0) return n;
for (i = 0; i <= n; i++) {
d[i] = [];
d[i][0] = i;
}
for (j = 0; j <= m; j++) {
d[0][j] = j;
}
for (i = 1; i <= n; i++) {
s_i = s.charAt(i - 1);
for (j = 1; j <= m; j++) {
t_j = t.charAt(j - 1);
if (s_i == t_j) {
cost = 0;
} else {
cost = 1;
}
d[i][j] = Minimum(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost);
}
}
return d[n][m];
}
/**
* 兩個字符串的相似程度，并返回相似度百分比
*
*
* @param {string} s 字符串1
* @param {string} t 字符串2
* @returns {number} 字符串差異百分比
*
* @date 2018-03-02
* @author ReeCode
*/
function strSimilarity2Percent(s, t) {
var l = s.length > t.length ? s.length : t.length;
var d = strSimilarity2Number(s, t);
return (1 - d / l).toFixed(4);
}
function Minimum(a, b, c) {
return a < b ? (a < c ? a : c) : (b < c ? b : c);
}
/**
* 去除字符串中的空格
*
* 去除字符串中的空格，
* 如果不加參數"g",只去除字符串前后空格；
* 如果加參數"g",去除字符串全部空格；
*
* @param {string} str 目標字符串
* @param {string} is_global 是否檢測整個字符串，如果是，輸入為 "g",其他情況無視該參數
* @returns {string}
*
* @date 2018-03-02
* @author ReeCode
*/
function Trim(str, is_global) {
var result,
_is_global = (typeof(is_global) !== "undefined") ? is_global : "n";
result = str.replace(/(^\s+)|(\s+$)/g, "");
if (_is_global.toLowerCase() == "g") {
result = result.replace(/\s/g, "");
}
return result;
}
/**
* 獲取字符串的長度
*
* 獲取字符串的長度，
* 漢字為兩個字符長度，英語級其他符號為1個長度；
*
* @param {string} val 目標字符串
* @returns {number}
*
* @date 2018-03-05
* @author ReeCode
*/
function getByteLen(val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 2;
} else {
len += 1;
}
}
return len;
}
/**
* 移除數組中的某個元素 （改變數組長度）
*
*
* @param {array} arr 目標數組
* @param {any} item 要從數組中移除的元素
* @returns {array}
*
* @date 2018-03-06
* @author ReeCode
*/
function removeWithoutCopy(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == item) {
arr.splice(i, 1);
i--;
}
}
return arr;
}
/**
* 找出數組中的最小值
*
*
* @param {array} arr 目標數組
* @returns {number} min 數組最小值
*
* @date 2018-04-19
* @author ReeCode
*/
function arrayMin(arr) {
var min = arr[0],
len = arr.length;
for (var i = 1; i < len; i++) {
if (arr[i] < min) {
min = arr[i];
}
}
return min;
}
/**
* 找出數組中的最大值
*
*
* @param {array} arr 目標數組
* @returns {number} max 數組最小值
*
* @date 2018-04-19
* @author ReeCode
*/
function arrayMax(arr) {
var max = arr[0],
len = arr.length;
for (var i = 1; i < len; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
5）反饋評價
根據評價結果的情況，分為三檔：
matchedNum >= 0.8 ----------
great
0.8 > matchedNum >= 0.6 --good
matchedNum < 0.6 -----------normal
同時在此時對小于0.5s的錄音予以忽略。
Show me the code
translate: function() { //結束錄音并識別語音
wx.stopRecord({
success: function(res) {
localId = res.localId;
$(".voice-remote").addClass("vrPause");
wx.translateVoice({
localId: localId,
complete: function(res) {
var voice_time = Math.abs(R.options.epoint - R.options.point),
_iClass = "soundMe" + Math.round(voice_time / 1000);
if (res.hasOwnProperty('translateResult') && voice_time > 500) {
var str_User = pinyinUtil.getPinyin(res.translateResult.split("。")[0]),
str_Ans = word.keyword[R.options.iOrder].matched.split(","),
matchedArray = new Array(),
matchedNum = 0;
for (var i = 0; i < str_Ans.length; i++) {
matchedArray[i] = strSimilarity2Percent(Trim(str_User), Trim(pinyinUtil.getPinyin(str_Ans[i])));
}
matchedNum = arrayMax(matchedArray);
R.insertContent({
iType: 2,
iClass: _iClass,
iContent: localId,
});
if (matchedNum >= 0.8) {
R.options.iOrder++;
alert(R.feedback.great[parseInt(Math.random() * 5)] + "\r\n 您本次錄音匹配程度為：" + (matchedNum * 100).toFixed(2) + "% 。");
if (R.options.iOrder < word.keyword.length) {
R.insertContent({
iType: 1,
iContent: word.keyword[R.options.iOrder].content,
});
} else {
alert("恭喜，本次測試完成！");
}
} else if (matchedNum >= 0.6) {
alert(R.feedback.good[parseInt(Math.random() * 5)] + "\r\n 您本次錄音匹配程度為：" + (matchedNum * 100).toFixed(2) + "%！");
} else {
alert(R.feedback.normal[parseInt(Math.random() * 5)] + "\r\n 您本次錄音匹配程度為：" + (matchedNum * 100).toFixed(2) + "%！");
}
} else if (voice_time > 500) {
alert('無法識別');
} else if (voice_time <= 500) {
alert("錄音過短，請重新錄音！");
}
}
});
},
fail: function(res) {
alert(JSON.stringify(res));
}
});
},
Talk is cheap
使用parseInt(Math.random() * 5)生成隨機數，使反饋語隨機生成；
五 限制只允許微信客戶端打開
檢測客戶端版本的micromessenger值，微信用的是瀏覽器內核是這個。
Show me the code
/**
* 判斷是否是微信
*
* @returns {boolen} true 是微信 false 不是微信
*
* @date 2018-05-29
* @author ReeCode
*/
function iswx() {
var ua = navigator.userAgent.toLowerCase();
return ua.indexOf('micromessenger') != -1 ? true:false;
}
if (!iswx()) {
document.head.innerHTML = '<title>抱歉，出錯了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" ;
document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">請在微信客戶端打開鏈接</h4></div></div>';
}else{
R.init();
}
Talk is cheap
判斷如果是微信瀏覽器，對對象R進行初始化，如果不是，返回請在微信客戶端打開；
總結
絮絮叨叨終于總結好了。過段時間用小程序對該功能進行重寫。
