楔 子
隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的開啟，各種移動(dòng)設(shè)備走進(jìn)了我們的生活。無論是日常生活中人手一部的手機(jī)，還是夜跑者必備的各種智能腕帶，亦或者是充滿未來科技感的google glass云云，它們正漸漸改變著我們的生活習(xí)慣以及用戶交互習(xí)慣。觸摸屏取代了實(shí)體按鍵，Siri開始慢慢釋放我們的雙手，而leap motion之類的硬件更是讓我們徹底不需要接觸IT設(shè)備便能通過手勢(shì)控制它們。在這樣的大背景下，前端的交互將涉及越來越多元的交叉學(xué)科，我們正如十幾年前人們經(jīng)歷Css的誕生一樣，見證著一場(chǎng)帶動(dòng)整個(gè)行業(yè)乃至社會(huì)的變革。
?
放下IE6正如你放下table布局
如果現(xiàn)今你的工作還只是每天嚴(yán)謹(jǐn)?shù)厝ゼ嫒軮E6，那么是時(shí)候起身遙望身邊的風(fēng)景了，HTML5已經(jīng)遠(yuǎn)遠(yuǎn)不只是那些漸變和圓角了。這篇博文中，我會(huì)像大家介紹 Web Speech 和 Web Audio 兩組API，這是MyVoix.js框架的核心組成部分，在早前好幾個(gè)版本的chrome這就已經(jīng)實(shí)現(xiàn)，你可以通過webkit前綴調(diào)用他們。
Web Speech
WebSpeech API是由 Speech API Community Group 發(fā)布，主要功能是將語音輸入轉(zhuǎn)換成文字，如果你能加上一個(gè)語義分析的服務(wù)器，那它就是一個(gè)Siri。你也可以簡(jiǎn)單地把它理解成一個(gè)可編程的input語音輸入框（如下代碼）。
<
input
type
=”text”
x-webkit-speech lang
=”zh-CN”
/>
在Siri剛剛出世的那個(gè)年代，上面這行代碼就是前端界讓屌絲變高富帥的利器，老板才不知道你才寫了一行代碼就搞出一個(gè)語音輸入框（偷偷在input上加過x-webkit-speech的同學(xué)們請(qǐng)點(diǎn)贊）。但是，僅僅一個(gè)輸入框標(biāo)簽顯然不能滿足程序員們那熊熊燃燒對(duì)代碼的控制欲，于是Web Speech應(yīng)運(yùn)而生。
再回到代碼，要使用webSpeech API我們首先要?jiǎng)?chuàng)建一個(gè)window.webkitSpeechRecognition對(duì)象。
1
var
_rec =new
window.webkitSpeechRecognition();
2
_rec.continuous=
true
;
3
_rec.interimResults=
false
;
4
_rec.lang='en-US'
;
5
_rec.maxAlternatives=1;
為了大家看的清楚，這里我稍稍修改了MyVoix中的源碼。可以看到新建SpeechRecognition實(shí)例后，有幾個(gè)參數(shù)需要我們配置。
continuous：如果置為false,那么當(dāng)實(shí)例start之后，若沒有輸入或者輸入錯(cuò)誤就會(huì)立刻返回。這里需要等到有意義的輸入才返回，所以我們置為true。
interimResults：如果設(shè)置為true，那么在onresult的時(shí)候就會(huì)不斷有分析過程中的單詞返回。這里只需要最后的分析結(jié)果，所以置為false。
lang：這個(gè)是語言，大家應(yīng)該都看的懂。
maxAlternatives：設(shè)置的是每個(gè)result最大的SpeechRecognitionAlternatives。
接下來我們調(diào)用實(shí)例的start方法就會(huì)開啟SpeechdRecognition的監(jiān)聽。但是在此之前還需要指定實(shí)例的onresult事件，語音分析完成后的單詞會(huì)傳入這個(gè)方法。
1
_rec.onresult=
function
(eve){
2
var
len =
eve.results.length,
3
i =
eve.resultIndex,
4
j = 0
,
5
listeners,
6
command;
7
for
(i; i < len; i += 1
) {
8
if
(eve.results[i].isFinal) {
9
//
get words
10
command = eve.results[i][0].transcript.replace(/^\s+|\s+$/g, ''
).toLowerCase();
11
if
(console.log){
12
console.log(eve.results[i][0
].transcript);
13
}
14
//
your code here....
15
}
16
}
17
};
18
_rec.start();
MyVoix中對(duì)于單詞事件的綁定有自己的架構(gòu)，之后的博文有機(jī)會(huì)會(huì)詳述。
Web Audio
? ? ? 搞定了語音識(shí)別，接下來我們就需要獲得麥克風(fēng)的輸入信號(hào)，以便實(shí)現(xiàn)MyVoix中的繪制波形功能。如果你用javascript調(diào)用過攝像頭，那你一定用過navigator.webkitGetUserMedia這個(gè)東西，Web Audio中獲取麥克風(fēng)的音源數(shù)據(jù)就需要用到它。先看一下MyVoix中的源碼：
1
navigator.webkitGetUserMedia({audio:
true
},
function
(e){
2
var
context =
new
webkitAudioContext(),
3
javascriptNode = context.createScriptProcessor(2048, 1, 1
),
4
audioInput =
context.createMediaStreamSource(e),
5
analyser =
context.createAnalyser(),
6
splitter =
context.createChannelSplitter();
7
analyser.smoothingTimeConstant = 0.3
;
8
analyser.fftSize = 1024
;
9
audioInput.connect(splitter);
10
splitter.connect(analyser,0,0
);
11
analyser.connect(javascriptNode);
12
javascriptNode.connect (context.destination);
13
14
javascriptNode.onaudioprocess =
function
(e) {
15
var
array =
new
Uint8Array(analyser.frequencyBinCount);
16
analyser.getByteFrequencyData(array);
17
var
average = me.getAverageVolume(e.inputBuffer.getChannelData (0
));
18
if
(average > 0
) {
19
me.changeNoise(average);
20
me.changeFrequence(average);
21
}
22
}
23
},
function
(){});
初看之下，和WebGL有點(diǎn)類似，你需要鏈接一堆堆的東西。進(jìn)一步分析代碼：
navigator.webkitGetUserMedia({audio:
true
},
function
(e){
//
success callback
//
...
},
function
(){
//
error callback
//
...
};
第一步使用webkitGetUserMedia對(duì)象調(diào)用本地麥克風(fēng)，主要代碼在成功回調(diào)函數(shù)中實(shí)現(xiàn)。
var
context =
new
webkitAudioContext(),
audioInput
= context.createMediaStreamSource(e);
之后我們需要建立一個(gè)webkitAudioContext實(shí)例,通過該實(shí)例可以創(chuàng)建許多有用的元件。這里通過createMediaStreamSource方法和getUserMedia成功回調(diào)函數(shù)中的參數(shù)可以創(chuàng)建一個(gè)輸入源。 通過一層層的傳遞可以最終連接到context.destination這個(gè)輸出位置。我們簡(jiǎn)單過一下MyVoix中用到的幾個(gè)節(jié)點(diǎn)：
analyser:這個(gè)一看就是分析音源用的，具體一般用在聲音可視化上。
splitter:此節(jié)點(diǎn)用以聲道轉(zhuǎn)換，在MyVoix中我們用它把音源變成了左右兩個(gè)聲道。
javascriptNode：這個(gè)節(jié)點(diǎn)我們用來進(jìn)行javascript級(jí)別的監(jiān)聽處理。通過onaudioprocess函數(shù)，在每次聲音完成采樣的時(shí)候，調(diào)用我們繪制波形的函數(shù)，并最終通過它連接到輸出端。
在MyVoix2.0中，大致就只用到了以上幾個(gè)AudioContext創(chuàng)造的節(jié)點(diǎn)。通過類似的方法加入其他節(jié)點(diǎn)，Web Audio還可以實(shí)現(xiàn)聲音在3D空間中定位播放等功能。
尾 聲
本文介紹了在MyVoix中用到的兩個(gè)核心的技術(shù)，通過這篇博文希望大家對(duì)語音技術(shù)在html端的實(shí)現(xiàn)有大致的了解。我們?cè)趫@子里寫作，不用像魯迅先生一樣戰(zhàn)斗，卻也盼著技術(shù)推進(jìn)這個(gè)時(shí)代。
?
? ? ?? myvoix源碼地址
轉(zhuǎn)發(fā)請(qǐng)注明出處 ： http://www.cnblogs.com/Arthus/p/3889457.html
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
