Windows phone 應用開發[1]-Text To Speech

最近幾個月一直在專一Windows phone產品設計和項目開發.在其中團隊磨合和產品定位上也出現很多問題.一直難以抽出成塊的時間來思考梳理.至此博客更新也今後中斷.這兩天因病在家休息.上週在微博[Fllow me]上提到本身翻譯一些Wiki文檔.目前還沒有整理完畢.從本篇博客開始將把這些資源逐步遷移到Cnblogs上[在線Wiki資源因服務器不穩定不公開].主要涉及到Windows phone 應用開發技術和Metro設計細節. 以及在開發中碰到一些問題和相對應的解決方案. 這些資源都是咱們設計和開發團隊在實際項目操做中對Windows phone 這個新的技術平臺理解和逐步積累的過程.可能有些地方給出答案並非最準確 最好的.也走了很多彎路. 可是對於這個探索的過程有必要分享出來.

目前APPBub對國內已經開放.開發者能夠經過招行Visa信用卡購買開發者帳號,提交Windows phone 應用.上個月TechEd2011 和最近11月份關於Windows phone培訓和線下活動比較多[會在微博動態更新].11月份MS官方推出Windows phone開發訓練營活動[免費].包含國內大部分地區 也歡迎各位開發者報名參加. 屆時線下交流":

微軟Windows phone 開發訓練營: [免費] 在線報名活動地址: http://msdn.microsoft.com/zh-cn/windowsphone/hh532262  11月11日北京.

ok.做爲開篇章節.第一篇將在以下介紹一些Windows phone比較有意思的東西-Text To Speech[文本到語音轉換].  相信你們最近必定對IPhone 4S 的Siri影響深入.其實做爲智能Smart Phone一個終極標準之一就是實現人類語言和機器語言的無障礙. 也就是第三次GUI革命-人機智能領域.這個我會稍後幾篇提到Siri實現原理和Windows phone 在語音Tellme實現和發展狀況.

相信做爲手機用戶你必定有這樣的需求.當你打開手機屏幕看新聞或是其餘文字信息時. 有沒有想過咱們能以語音的方式讀取文字信息,而把咱們眼睛從屏幕中解放出來.特別是針對盲人這樣需求就更明顯了.Text To Speech已經在IPhone和Android上已經成型的運用.Windows phone上如何來實現?

首先來看看在語音識別領域IPhone的蘋果公司採用是語音識別巨頭Nuance技術.具體實現做爲商業機密.而微軟Tellme和Google都是採用本身開發的技術.在QQ2011版本我上週偶然發現QQ在輸入法加入語音識別輸入的方式.可是效果不太好.

Windows phone中實現的方式大概有三到四種方式.本篇將採用最簡單一種使用Bing在雲端的服務方式來解決這個問題[因最近一直在看Windows Azure雲平臺].其餘更多關於這方面實現將在後續幾篇涉及到.

首先咱們設計UI. 俗話說「工欲善其事必先利其器」那麼Windows phone 在UI設計採用什麼樣設計工具. 這裏不得不得不提到.Balsamiq Mockups-是Balsamiq工做室出品的一款手繪風格的產品原型設計工具。它適合於產品經理、產品設計師、用戶體驗設計師、交互設計師、網站前端設計師等等.

和經常使用的Visio、Axure RP等軟件相比最大的特色就是塗鴉風格，而且使用起來很是簡單，徹底不須要了解太多技術就能夠作出一個可審閱的原型圖，很是適合快速設計簡單的原型.

Balsamiq Mockups： Download Link：Balsamiq Mockupas Free Try Version  Design GuideLine Support Document：Balsamiq Mockupas Design GuideLine Blogs Design Handler Book: Balsamiq Mockupas Design Hanlder Book Document

設計原型工具[受衆人羣-UI設計團隊]:

相對Balsamiq 收費軟件.默認設計面向IPhone內置模板. 那麼基於Windows 平臺免費UI設計工具-Pencil 則也是手繪設計風格.一樣能夠用來對Windows phone作原型UI設計 同時支持在Firefox 插件方便使用 開源免費.:

Pencil Project: Download Link:Pencil UI Design Download Link Design User GuideLine:Pencil Design User GuideLine

設計工具界面:

 

 

可能在設計團隊溝通時.Product Ower和開發Team 須要對產品進行屢次討論時. 這時一個統一流程設計工具就很重要.這樣避免在討論時出現不一樣設計工具圖形元素照成不一樣理解而耽誤時間.另外保存能夠在任什麼時候候均可以經過同一工具實現修改目的. 這點很重要. 使用這個工具受衆通常是產品經理和開發團隊居多-Gliffy:

Gliffy: Gliffy Draw Software Online Tool

Gliffy 是一款免費的在線流程設計工具.基本包含軟件開發中UML 和開發流程 UI全部設計模型.支持在線存儲. 方便多個團隊溝通和交互工具初始化界面:

 

這個APP稱爲Text To Speech. 在肯定UI設計以前.設計團隊必定確認功能需求和必要UI流程 .原型設計目的產品設計成形以前的一個簡單框架. 把這個功能需求拆解以下:

功能需求: [1]：把文本轉換成語音輸入 [2]: 指出多語言版本:英文和中文語音輸出 [3]: 實現對用戶文本可選記錄存儲和刪除 [4]：……

 注意在UI設計過程.功能需求優先級最高.是產品原型設計最基本的要點. 這也是區別於效果圖版本中最重要因素. 通常狀況產品設計原型設計只有一個.也就是陳述這個產品價值和目的標準時統一的.可能在後期最終APP市場-用戶羣體定位和美化等其餘因素考慮狀況下.效果圖每每會出現2-4版本或是多個版本都正常的.

那麼windows phone 整個APP設計和開發Team如何來分工? . 

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設計採用樞軸控件方式 效果以下:

 效果圖 由UI設計團隊完成 此處就略去[略]

 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： http://www.bing.com/toolbox/bingdeveloper/

找到Sign in-bing Search API 建立一個Application:

 建立成功後能夠看到該Application的ApplicationId:

 有了ApplicationID.向Application程序添加雲端的Translate服務引用:

Add Microsoft Translator Service: http://api.microsofttranslator.com/V2/Soap.svc

添加服務引用:

 引用成功後:

 在頁面加載中首先得到支持語言類型.經過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;
            }

當用戶輸入文本內容後.點擊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封裝致使一個瘦客戶端.客戶端只須要作不多的事.這須要在線鏈接網絡.這也是初步看到雲端.處理方式.

 固然這是處理文本語音最簡單的方式.應該可以從這篇文章看出重點講述Windows phone 從設計到開發完成中一些大概的細節. 以及主要流程.採用雲端服務的方式來處理客戶端.編程方式. 稍後幾篇會介紹Windows phone Metro設計.編程技巧.

 源代碼下載見附件。