11月11日北京.
<a target="_blank" href="http://blog.51cto.com/attachment/201201/170735577.jpg"></a>
ok.作為開篇章節.第一篇将在如下介紹一些Windows phone比較有意思的東西-Text To Speech[文本到語音轉換]. 相信大家最近一定對IPhone 4S 的Siri影響深刻.其實作為智能Smart Phone一個終極标準之一就是實作人類語言和機器語言的無障礙. 也就是第三次GUI革命-人機智能領域.這個我會稍後幾篇提到Siri實作原理和Windows phone 在語音Tellme實作和發展情況.
相信作為手機使用者你一定有這樣的需求.當你打開手機螢幕看新聞或是其他文字資訊時. 有沒有想過我們能以語音的方式讀取文字資訊,而把我們眼睛從螢幕中解放出來.特别是針對盲人這樣需求就更明顯了.Text To Speech已經在IPhone和Android上已經成型的運用.Windows phone上如何來實作?
<a target="_blank" href="http://blog.51cto.com/attachment/201201/170746652.jpg"></a>
首先來看看在語音識别領域IPhone的蘋果公司采用是語音識别巨頭Nuance技術.具體實作作為商業機密.而微軟Tellme和Google都是采用自己開發的技術.在QQ2011版本我上周偶然發現QQ在輸入法加入語音識别輸入的方式.但是效果不太好.
Windows phone中實作的方式大概有三到四種方式.本篇将采用最簡單一種使用Bing在雲端的服務方式來解決這個問題[因最近一直在看Windows Azure雲平台].其他更多關于這方面實作将在後續幾篇涉及到.
設計原型工具[閱聽人人群-UI設計團隊]:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/170808480.jpg"></a>
Pencil Project:
設計工具界面:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/170845589.jpg"></a>
可能在設計團隊溝通時.Product Ower和開發Team 需要對産品進行多次讨論時. 這時一個統一流程設計工具就很重要.這樣避免在讨論時出現不同設計工具圖形元素照成不同了解而耽誤時間.另外儲存可以在任何時候都可以通過同一工具實作修改目的. 這點很重要. 使用這個工具閱聽人一般是産品經理和開發團隊居多-Gliffy:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/170858184.jpg"></a>
Gliffy:
<a target="_blank" href="http://www.gliffy.com/">Gliffy Draw Software Online Tool</a>
Gliffy 是一款免費的線上流程設計工具.基本包含軟體開發中UML 和開發流程 UI所有設計模型.支援線上存儲. 友善多個團隊溝通和互動工具初始化界面:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/170906935.jpg"></a>
這個APP稱為Text To Speech. 在确定UI設計之前.設計團隊一定确認功能需求和必要UI流程 .原型設計目的産品設計成形之前的一個簡單架構. 把這個功能需求拆解如下:
功能需求:
[1]:把文本轉換成語音輸入
[2]: 指出多語言版本:英文和中文語音輸出
[3]: 實作對使用者文本可選記錄存儲和删除
[4]:……
注意在UI設計過程.功能需求優先級最高.是産品原型設計最基本的要點. 這也是差別于效果圖版本中最重要因素. 一般情況産品設計原型設計隻有一個.也就是陳述這個産品價值和目的标準時統一的.可能在後期最終APP市場-使用者群體定位和美化等其他因素考慮情況下.效果圖往往會出現2-4版本或是多個版本都正常的.
那麼windows phone 整個APP設計和開發Team如何來分工? .
<a target="_blank" href="http://blog.51cto.com/attachment/201201/170958754.jpg"></a>
Windows phone 在基于Silverlight平台建構.MS官方SDK給出Express Bland 設計工具.有人曾多次問過我.UI效果圖實作是否也應該交給開放團隊來做?
當然這個問題也看具體團隊安排和分工. 當然為了程式設計效率上考慮. 同時開發Team不可能每個人都能精通XAML标示語言. 這就需要一個BI角色實作設計團隊效果圖來和開發團隊進行對接.BI 角色核心工作就是把設計團隊效果圖通過Express Bland 設計工具變成實際XAML code.然後傳遞給開發Team. 如果與設計效果圖出現出入.開發Team隻需要BI這個單獨角色抽出來來設計Team進行交涉.避免分工導緻整個開發團隊進度停滞. 這種方式主要目的就是保證Code高效. 使我們在每次MileStroe裡程碑都能持續傳遞成果.
當然這裡談到效果圖:主要做到如下四點:
•UI操作流程和使用者行為分析.
•确定頁面UI元素.-[BI參與]
•美化效果和完善使用者體驗.
•設計團隊效果圖-作為開發TeamExpress Bland 最終參考
是以BI這個角色不僅持續向開發團隊傳遞良好UI界面.同時也完全屏蔽整個設計團隊對開發過程的影響. 效果圖是作為APP産品最終UI設計參考.設計團隊可能對Windows phone控件元素不熟悉.這就需要BI配合.保證效果圖和實際開發不存在脫節. 效果圖也是最終定義這個APP設計意圖.是以一但制定就是作為開發Team唯一參考. BI就很好的起到這個上下承接的作用.事實證明這種方式确實高效解決不少開發團隊與設計Team溝通問題.
原型圖采用Balsamip設計采用樞軸控件方式 效果如下:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171005522.jpg"></a>
效果圖 由UI設計團隊完成 此處就略去[略]
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171017928.jpg"></a>
Now 我們現在通過BI已經拿到效果圖.和已經實作的UI.剩下工作則由開發團隊接手.如何實作這個Text To Speech. ok. 打開Visual Studio2010建立一個Pivot Windows phone Application. 在解決方案中出現一個Solution. 是否應該立即考慮Code實作. no. 我們在真正Code前需要好好規劃我們的Solution.
在CodePlex上看到很多Windows phone OpenSource Project開源項目.發現在View種大多都使用MVVM Light架構. 而對UserControl卻很少見到.這種現象曾讓我這個Silverlight開發者感到困惑奇怪.不知有沒有人做過把Silverlight版本Application向windows Phone移植的工作.那個時候你才後悔當初為何沒有使用UserControl來對通用View進行封裝.而是采用PhoneApplicationPage替代.如果你想自己寫過WP7 View具有在未來項目中可移植 甚至在其他項目不斷複用 擴充,. UserControl是一個很好選擇.
另外一個就是不得不說的Windows phone Library類庫.在開發Windows phone應用用戶端時.總是會涉及到一些基本資料操作 Json/XML、IsolateStorageFile序列化/反序列化. Task基本調用. 資料清單緩存系統建立等等這些不斷可重用的操作.必要子產品化封裝.是必不可少是.這将為我們項目開發節省大量時間. 這些封裝類庫DLL在不同項目移植就成不斷可以重用的代碼庫.維護這些可重用代碼庫則将是一筆無形資産. 類庫封裝則分為System Level 系統級和Customer Level自定義. 關于這些類庫封裝在後面文章會詳細說明封裝技巧.
當然還有其他的注意是否做UnitTest. 以及自動化測試等.都在考慮行列……如上隻是略做舉例說明.項目規劃必要性,.
作為本次則無需類庫封裝.Pivot APPlication則足以. 在使用Bing在雲端伺服器 來做Text To Speech 我們需要先申請一個ApplicationId. 然後通過該ApplicationId調用Ms雲端的Translate翻譯服務并儲存可播放的語音檔案wav在用戶端播放.實作Text文本轉換成語音效果.
打開Bing Developer Bing API:
<a href="http://www.bing.com/toolbox/bingdeveloper/">http://www.bing.com/toolbox/bingdeveloper/</a>
找到Sign in-bing Search API 建立一個Application:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171028440.jpg"></a>
建立成功後可以看到該Application的ApplicationId:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171036485.jpg"></a>
有了ApplicationID.向Application程式添加雲端的Translate服務引用:
Add Microsoft Translator Service:
添加服務引用:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171043109.jpg"></a>
引用成功後:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171049452.jpg"></a>
在頁面加載中首先獲得支援語言類型.通過Translate Service服務中擷取Client:
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var transalteServiceRef = new TranslatorService.LanguageServiceClient();
transalteServiceRef.GetLanguagesForSpeakCompleted += new EventHandler
<TranslatorService.GetLanguagesForSpeakCompletedEventArgs>(transalteServiceRef_GetLanguagesForSpeakCompleted);
transalteServiceRef.GetLanguagesForSpeakAsync(applictionid,transalteServiceRef);
}
void transalteServiceRef_GetLanguagesForSpeakCompleted(object sender, TranslatorService.GetLanguagesForSpeakCompletedEventArgs e)
{
//Get Service Client
var transalateClient = e.UserState as TranslatorService.LanguageServiceClient;
transalateClient.GetLanguageNamesCompleted += new EventHandler
<TranslatorService.GetLanguageNamesCompletedEventArgs>(transalateClient_GetLanguageNamesCompleted);
transalateClient.GetLanguageNamesAsync(applictionid, "en", e.Result, e.Result);
}
擷取支援語言清單:
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
var CodeCols = e.UserState as ObservableCollection<string>;
if (CodeCols != null)
{
var languageNames = e.Result;
var languagesData = (from code in CodeCols
let cindex = CodeCols.IndexOf(code)
from name in languageNames
let nindex = languageNames.IndexOf(name)
where cindex == nindex
select new TranslatorLanguage()
{
Name = name,
Code = code
}).ToArray();
//Update UI Element
this.LanguageList_LB.ItemsSource = languagesData;
}
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171100882.jpg"></a>
當使用者輸入文本内容後.點選Speech按鈕把這段文本以語音方式播放出來,在點選事件内. 通過請求雲端服務擷取播放WAV檔案Stream:資料. 并在用戶端播放出來:
private void SpeechTxt_BT_Click(object sender, RoutedEventArgs e)
var languageCode = "en";
var language = this.LanguageList_LB.SelectedItem as TranslatorLanguage;
if (language != null)
{
languageCode = language.Code;
}
var objTranslator = new TranslatorService.LanguageServiceClient();
objTranslator.SpeakCompleted += translator_SpeakCompleted;
objTranslator.SpeakAsync(applictionid, this.TextToSpeech_TB.Text, languageCode, "audio/wav",string.Empty);
}
void translator_SpeakCompleted(object sender, TranslatorService.SpeakCompletedEventArgs e)
{
var client = new WebClient();
client.OpenReadCompleted += ((s, args) =>
{
SoundEffect se = SoundEffect.FromStream(args.Result);
se.Play();
});
client.OpenReadAsync(new Uri(e.Result));
}
ok.這種方式很好通過雲端的服務來解決了把文本轉換成語音輸出.這樣我們能夠Azure封裝導緻一個瘦用戶端.用戶端隻需要做很少的事.這需要線上連接配接網絡.這也是初步看到雲端.處理方式.
<a target="_blank" href="http://blog.51cto.com/attachment/201201/171108936.jpg"></a>
當然這是處理文本語音最簡單的方式.應該能夠從這篇文章看出重點講述Windows phone 從設計到開發完成中一些大概的細節. 以及主要流程.采用雲端服務的方式來處理用戶端.程式設計方式. 稍後幾篇會介紹Windows phone Metro設計.程式設計技巧.
源代碼下載下傳見附件。
本文轉自chenkaiunion 51CTO部落格,原文連結:http://blog.51cto.com/chenkai/763474