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:


 
 
  1. private void MainPage_Loaded(object sender, RoutedEventArgs e)    
  2. {    
  3.     var transalteServiceRef = new TranslatorService.LanguageServiceClient();    
  4.     transalteServiceRef.GetLanguagesForSpeakCompleted += new EventHandler    
  5.     <TranslatorService.GetLanguagesForSpeakCompletedEventArgs>(transalteServiceRef_GetLanguagesForSpeakCompleted);    
  6.     transalteServiceRef.GetLanguagesForSpeakAsync(applictionid,transalteServiceRef);    
  7. }    
  8.     
  9. void transalteServiceRef_GetLanguagesForSpeakCompleted(object sender,                                                                TranslatorService.GetLanguagesForSpeakCompletedEventArgs e)   
  10.  {   
  11.       //Get Service Client   
  12.       var transalateClient = e.UserState as TranslatorService.LanguageServiceClient;   
  13.       transalateClient.GetLanguageNamesCompleted += new EventHandler   
  14.       <TranslatorService.GetLanguageNamesCompletedEventArgs>(transalateClient_GetLanguageNamesCompleted);   
  15.       transalateClient.GetLanguageNamesAsync(applictionid, "en", e.Result, e.Result);   
  16.  } 

获取支持语言列表:


 
 
  1. Deployment.Current.Dispatcher.BeginInvoke(() =>     
  2.  {    
  3.      var CodeCols = e.UserState as ObservableCollection<string>;    
  4.      if (CodeCols != null)    
  5.      {    
  6.          var languageNames = e.Result;    
  7.          var languagesData = (from code in CodeCols    
  8.                               let cindex = CodeCols.IndexOf(code)    
  9.                               from name in languageNames   
  10.                                   let nindex = languageNames.IndexOf(name)   
  11.                               where cindex == nindex   
  12.                               select new TranslatorLanguage()   
  13.                                         {   
  14.                                   Name = name,   
  15.                                   Code = code   
  16.                               }).ToArray();   
  17.  
  18.          //Update UI Element   
  19.          this.LanguageList_LB.ItemsSource = languagesData;   
  20.             } 

当用户输入文本内容后.点击Speech按钮把这段文本以语音方式播放出来,在点击事件内. 通过请求云端服务获取播放WAV文件Stream:数据. 并在客户端播放出来: 


 
 
  1. private void SpeechTxt_BT_Click(object sender, RoutedEventArgs e)    
  2.  {    
  3.      var languageCode = "en";    
  4.      var language = this.LanguageList_LB.SelectedItem as TranslatorLanguage;    
  5.      if (language != null)    
  6.         {    
  7.             languageCode = language.Code;    
  8.          }    
  9.        var objTranslator = new TranslatorService.LanguageServiceClient();   
  10.         objTranslator.SpeakCompleted += translator_SpeakCompleted;   
  11.         objTranslator.SpeakAsync(applictionid, this.TextToSpeech_TB.Text, languageCode, "audio/wav",string.Empty);   
  12.    }   
  13.  
  14.   void translator_SpeakCompleted(object sender, TranslatorService.SpeakCompletedEventArgs e)   
  15.    {   
  16.       var client = new WebClient();   
  17.       client.OpenReadCompleted += ((s, args) =>   
  18.        {   
  19.            SoundEffect se = SoundEffect.FromStream(args.Result);   
  20.             se.Play();   
  21.        });   
  22.       client.OpenReadAsync(new Uri(e.Result));   
  23.    } 

ok.这种方式很好通过云端的服务来解决了把文本转换成语音输出.这样我们能够Azure封装导致一个瘦客户端.客户端只需要做很少的事.这需要在线连接网络.这也是初步看到云端.处理方式.

 当然这是处理文本语音最简单的方式.应该能够从这篇文章看出重点讲述Windows phone 从设计到开发完成中一些大概的细节. 以及主要流程.采用云端服务的方式来处理客户端.编程方式. 稍后几篇会介绍Windows phone Metro设计.编程技巧.

 源代码下载见附件。


本文转自chenkaiunion 51CTO博客,原文链接:http://blog.51cto.com/chenkai/763474



相关文章
|
2月前
|
弹性计算 开发框架 安全
基于云效 Windows 构建环境和 Nuget 制品仓库进行 .Net 应用开发
本文将基于云效 Flow 流水线 Windows 构建环境和云效 Packages Nuget 制品仓库手把手教你如何开发并部署一个 .NET 应用,从环境搭建到实战应用发布的详细教程,帮助你掌握 .NET 开发的核心技能。
|
7月前
|
存储 算法 C++
【Qt应用开发】复刻经典:基于Qt实现Windows风格计算器(加减乘除、删除、归零功能全解析)
在Qt中,"栈"的概念主要体现在两个层面:一是程序设计中的数据结构——栈(Stack),二是用户界面管理中的QStackedWidget控件。下面我将分别简要介绍这两个方面:
194 4
|
5月前
|
安全 C# 开发者
Windows Forms 应用开发:一分钟浅谈
本文将带领您从零开始,逐步掌握使用 C# 进行 Windows Forms 开发的技巧,包括创建首个应用、处理常见问题及优化方法。首先介绍如何搭建环境并编写基础代码,接着深入探讨控件使用与布局管理,解决控件重叠和响应式布局难题。最后讲解事件处理与多线程技术,确保长时间任务不阻塞界面,并安全更新 UI 状态,助您开发流畅的应用程序。
218 63
|
Android开发 iOS开发 Windows
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
不久前,随着最后一家WP手机厂商惠普宣布取消今后Windows Phone的研发计划,以及微软官方声明对WP8.1系统今后所有升级维护的终止,WP手机,作为曾经和安卓手机、苹果手机并驾齐驱的三大智能手机之一,正式寿终正寝。
1588 0
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
|
XML 开发框架 前端开发
Windows Phone快速入门需掌握哪些能力
在此之前,先普及下Windows Phone的概念和开发工具的介绍。 Windows Phone是微软公司开发的手机操作系统,它将微软旗下的Xbox Live游戏、Xbox Music音乐与独特的视频体验集成至手机中。2012年6月21日,微软正式发布Windows Phone 8,采用和Windows 8相同的Windows NT内核,同时也针对市场的Windows Phone 7.5发布Windows Phone 7.8。
189 0
Windows Phone快速入门需掌握哪些能力
|
移动开发 Android开发 开发者
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
在Build 2014大会上,微软正式发布了传闻已久的Windows Phone 8.1系统,所有的Windows Phone 8手机都可以升级,微软这次可谓是十分厚道。虽然并非迭代升级,但WP 8.1还是拥有很多重大更新,对于微软进一步完善移动平台拥有积极的意义。下面,就一起来了解一下WP 8.1的主要新特性。
281 0
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
|
编解码 前端开发 JavaScript
Windows Phone 下开发 LBS 应用
基于位置的服务(Location Based Service,LBS),它是通过电信移动运营商的无线电通讯网络(如GSM网、CDMA网)或外部定位方式(如GPS)获取移动终端用户的位置信息(地理坐标,或大地坐标),在GIS(Geographic Information System,地理信息系统)平台的支持下,为用户提供相应服务的一种增值业务。
224 0
|
C# Windows API
Windows 下的高 DPI 应用开发(UWP / WPF / Windows Forms / Win32)
原文 Windows 下的高 DPI 应用开发(UWP / WPF / Windows Forms / Win32) 本文将介绍 Windows 系统中高 DPI 开发的基础知识。由于涉及到坐标转换,这种转换经常发生在计算的不知不觉中;所以无论你使用哪种 Windows 下的 UI 框架进行开发,你都需要了解这些内容,以免不断踩坑。
1976 0
|
C# Windows
支持 Windows 10 最新 PerMonitorV2 特性的 WPF 多屏高 DPI 应用开发
原文:支持 Windows 10 最新 PerMonitorV2 特性的 WPF 多屏高 DPI 应用开发 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
1476 0
|
测试技术 Windows
Sublime Text 3(中文)在Windows下的配置、安装、运行
Sublime Text 3(中文)下载、安装、运行! 本文提供全流程,中文翻译。Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) 具体步骤 1↓ 进入Sublime Text 3(中文)网: —— 下载Sublime Text 3 官网 2↓ 点击 —— Download for Windows64 后,直接下载。
1521 0