原文:http://blog.csdn.net/artlife/article/details/1449162
web
页面中使用语音合成技术
前言:
语音合成技术其实并没有什么神秘的,也不像想象中的那么繁杂。今天我就与大家一起来看一下,怎么让我们网页为我们朗读文本。怎样做到在
web
中进行语音合成
。我也将使用最短的代码,最通俗话语来完成这篇文章。
环境要求:
首先我们需要一个微软的
Speech SDK 5.1
的安装包(当然你的机器的操作系统版本要在
windows2000
以上的这个范畴)
,
来使得我们的机器具有语音识别的功能。安装包,您可以在这里找到:
安装说明:
·
If
you want to download sample code, documentation, SAPI, and the U.S.
English Speech engines for development purposes, download the Speech SDK
5.1 file (SpeechSDK51.exe).
·
If
you want to use the Japanese and Simplified Chinese engines for
development purposes, download the Speech SDK 5.1 Language Pack file
(SpeechSDK51LangPack.exe) in addition to the Speech SDK 5.1 file.
·
If
you want to redistribute the Speech API and/or the Speech engines to
integrate and ship as a part of your product, download the Speech 5.1
SDK Redistributables file (SpeechSDK51MSM.exe).
·
If
you want to get only the Mike and Mary voices redistributable for
Windows XP, download Mike and Mary redistributables (Sp5TTIntXP.exe).
·
If you only want the documentation, download the Documentation file (sapi.chm).
其实上面这些可以不看,请您下载并安装
SpeechSDK51.exe
和
SpeechSDK51LangPack.exe
就可以了。
让我们开始:
环境已经准备好了
,那就让我们正式开始吧。
首先我们需要一个能够"发声"的对象,暂时我们就称他为" 朗读人"。在不同的语音合成的程序中,他所出现的形式也是不同的,当然这是后话,以后我再告诉你(嘿嘿,不是卖关子,这是第一讲,咱们先让它能说话了先)。
在web 应用程序的 html 代码中创建" 朗读人"对象:
// Create the Sapi SpVoice object
var VoiceObj = new ActiveXObject("Sapi.SpVoice");
上面的代码是创建一个" 朗读人"对象,我们要将这个写在js中(有点废话,呵呵)。
下面的代码将告诉我们" 朗读人"是如何工作的:
VoiceObj.Speak(“hello world”);
下面的代码告诉了我们如何销毁我们的" 朗读人"
// Clean up voice object
delete VoiceObj;
当您如果读到了这里,我首先要感谢您的耐心。与此同时我也要恭喜你了,如果您是一个敏感的程序员。这个时候您可能已经开始编写您自己的语音合成代码了。因为我们知道了,如何创建对象,如何使用对象的方法,和如何delete它。
当然这些还远远不够,让我们再做的更好些:
控制声音的属性
控制音量(1~100):
VoiceObj.Volume = 80 ;
控制语速(-10~10)
VoiceObj.Rate = 0;
控制朗读人的声音
VoiceObj.Voice = "Microsoft Anna";
控制朗读人的硬件设备输出
VoiceObj.AudioOutput = "SoundMax Integrated";
好了 该知道的 我们都已经知道了 , 再让我们看一个完整的例子来结束我们这一次的语音合成的学习。
完整的例子:
<!--
Copyright @ 2001 Microsoft Corporation All Rights Reserved.
-->
<
HTML
>
<
HEAD
>
<
META
HTTP-EQUIV
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
TITLE
>
TTS Demo
</
TITLE
>
<
SCRIPT
LANGUAGE
="JavaScript"
>
//
Create the Sapi SpVoice object
var
VoiceObj
=
new
ActiveXObject(
"
Sapi.SpVoice
"
);
//
ChangeVoice() function:
//
This function sets the newly selected voice choice from the Voice
//
Select box on the Voice object.
function
ChangeVoice()
{
var
i
=
parseInt( idsVoices.value );
VoiceObj.Voice
=
VoiceObj.GetVoices().Item(i);
}
//
ChangeAudioOutput() function:
//
This function sets the newly selected audio output choice from the
//
Audio Output Select box on the Voice object.
function
ChangeAudioOutput()
{
var
i
=
parseInt( idsAudioOutputs.value );
VoiceObj.AudioOutput
=
VoiceObj.GetAudioOutputs().Item(i);
}
//
IncRate() function:
//
This function increases the speaking rate by 1 up to a maximum
//
of 10.
function
IncRate()
{
if
( VoiceObj.Rate
<
10
)
{
VoiceObj.Rate
=
VoiceObj.Rate
+
1
;
}
}
//
DecRate() function:
//
This function decreases the speaking rate by -1 down to a minimum
//
of -10.
function
DecRate()
{
if
( VoiceObj.Rate
>
-
10
)
{
VoiceObj.Rate
=
VoiceObj.Rate
-
1
;
}
}
//
IncVol() function:
//
This function increases the speaking volume by 10 up to a maximum
//
of 100.
function
IncVol()
{
if
( VoiceObj.Volume
<
100
)
{
VoiceObj.Volume
=
VoiceObj.Volume
+
10
;
}
}
//
DecVol() function:
//
This function decreases the speaking volume by -10 down to a minimum
//
of 0.
function
DecVol()
{
if
( VoiceObj.Volume
>
9
)
{
VoiceObj.Volume
=
VoiceObj.Volume
-
10
;
}
}
//
SpeakText() function:
//
This function gets the text from the textbox and sends it to the
//
Voice object's Speak() function. The value "1" for the second
//
parameter corresponds to the SVSFlagsAsync value in the SpeechVoiceSpeakFlags
//
enumerated type.
function
SpeakText()
{
if
( idbSpeakText.value
==
"
SpeakText
"
)
{
//
Speak the string in the edit box
try
{
VoiceObj.Speak( idTextBox.value );
}
catch
(exception)
{
alert(
"
Speak error
"
);
}
}
else
if
( idbSpeakText.value
==
"
Stop
"
)
{
//
Speak empty string to Stop current speaking. The value "2" for
//
the second parameter corresponds to the SVSFPurgeBeforeSpeak
//
value in the SpeechVoiceSpeakFlags enumerated type.
VoiceObj.Speak(
""
);
}
}
</
SCRIPT
>
<
SCRIPT
FOR
="window"
EVENT
="OnQuit()"
LANGUAGE
="JavaScript"
>
//
Clean up voice object
delete
VoiceObj;
</
SCRIPT
>
</
HEAD
>
<
BODY
>
<
H1
align
=center
>
Simple TTS (DHTML)
</
H1
>
<
H1
align
=center
><
FONT
size
=3
>
</
FONT
>
<
IMG
alt
=""
border
=2
hspace
=0
id
=idImage
src
="mouthclo.bmp"
>
</
H1
>
<
H1
align
=center
>
<
TEXTAREA
ID
=idTextBox
COLS
=50
ROWS
=10
WRAP
=VIRTUAL
>
Enter text you wish spoken here
</
TEXTAREA
>
</
H1
>
<
P
align
=center
><
STRONG
><
STRONG
>
Rate
<
STRONG
>
<
INPUT
id
=idbIncRate
name
=button1
type
=button
onclick
=IncRate()
value
=" + "
></
STRONG
>
<
INPUT
id
=idbDecRate
name
=button2
type
=button
onclick
=DecRate()
value
=" - "
style
="LEFT: 237px; TOP: 292px"
>
</
STRONG
>
Volume
<
STRONG
><
STRONG
>
<
INPUT
id
=idbIncVol
name
=button3
onclick
=IncVol()
style
="LEFT: 67px; TOP: 318px"
type
=button
value
=" + "
>
<
INPUT
id
=idbDecVol
name
=button4
onclick
=DecVol()
type
=button
value
=" - "
style
="LEFT: 134px; TOP: 377px"
>
</
STRONG
></
STRONG
></
STRONG
></
P
>
<
P
align
=center
><
STRONG
><
BUTTON
id
=idbSpeakText
onclick
=SpeakText();
style
="HEIGHT: 24px; LEFT: 363px; TOP: 332px; WIDTH: 178px"
>
SpeakText
</
BUTTON
></
STRONG
></
P
>
<
P
align
=center
><
STRONG
>
Voice
<
STRONG
>
Audio Output
</
STRONG
></
STRONG
></
P
>
<
P
align
=center
>
<
SELECT
id
=idsVoices
name
=Voices
onchange
=ChangeVoice()
style
="FONT-FAMILY: serif; HEIGHT: 21px; WIDTH: 179px"
>
</
SELECT
>
<
SELECT
id
=idsAudioOutputs
name
=AudioOutputs
onchange
=ChangeAudioOutput()
style
="HEIGHT: 22px; WIDTH: 179px"
>
</
SELECT
>
<
SCRIPT
LANGUAGE
="JavaScript"
>
//
Code in the BODY of the webpage is used to initialize controls and
//
to handle SAPI events
/*
**** Initializer code ****
*/
InitializeControls();
function
InitializeControls()
{
//
Initialize the Voices and AudioOutput Select boxes
var
VoicesToken
=
VoiceObj.GetVoices();
var
AudioOutputsToken
=
VoiceObj.GetAudioOutputs();
//
Add correct strings to Voice Select box
for
(
var
i
=
0
; i
<
VoicesToken.Count; i
++
)
{
var
oOption
=
document.createElement(
"
OPTION
"
);
idsVoices.options.add(oOption);
oOption.innerText
=
VoicesToken.Item(i).GetDescription();
oOption.value
=
i;
}
//
Add correct strings to Audio Output Select box
for
(
var
i
=
0
; i
<
AudioOutputsToken.Count; i
++
)
{
var
oOption
=
document.createElement(
"
OPTION
"
);
idsAudioOutputs.options.add(oOption);
oOption.innerText
=
AudioOutputsToken.Item(i).GetDescription();
oOption.value
=
i;
}
}
/*
**** Event handling code ****
*/
//
These functions are used to handle the SAPI events
//
Handle StartStream event
function
VoiceObj::StartStream()
{
idbSpeakText.value
=
"
Stop
"
;
}
//
Handle EndStream event
function
VoiceObj::EndStream()
{
idbSpeakText.value
=
"
SpeakText
"
;
idImage.src
=
"
mouthclo.bmp
"
;
}
//
Handle Viseme event
function
VoiceObj::Viseme(StreamNum, StreamPos, Duration, VisemeType, Feature, VisemeId)
{
//
Map the VisemeId to the appropriate .bmp
if
( VisemeId
==
15
||
VisemeId
==
17
||
VisemeId
==
18
||
VisemeId
==
21
)
{
idImage.src
=
"
mouthop1.bmp
"
;
}
else
if
( VisemeId
==
14
||
VisemeId
==
16
||
VisemeId
==
19
||
VisemeId
==
20
)
{
idImage.src
=
"
mouthop2.bmp
"
;
}
else
if
( VisemeId
==
4
||
VisemeId
==
6
||
VisemeId
==
9
||
VisemeId
==
12
)
{
idImage.src
=
"
mouthop3.bmp
"
;
}
else
if
( VisemeId
==
1
||
VisemeId
==
2
||
VisemeId
==
3
||
VisemeId
==
11
)
{
idImage.src
=
"
mouthop4.bmp
"
;
}
else
if
( VisemeId
==
7
||
VisemeId
==
8
)
{
idImage.src
=
"
mouthnar.bmp
"
;
}
else
if
( VisemeId
==
5
||
VisemeId
==
10
||
VisemeId
==
13
)
{
idImage.src
=
"
mouthmed.bmp
"
;
}
else
{
idImage.src
=
"
mouthclo.bmp
"
;
}
}
</
SCRIPT
>
<
STRONG
>
<
HR
></
STRONG
>
<
P
></
P
>
</
BODY
>
</
HTML
>
分享到:
相关推荐
基于科大讯飞的webAPI语音合成,使用java开发,大家别看花眼。 最近想用第三方api做点东西玩,一直在网上找不到,讯飞的web版的demo,就自己写了一个供大家参考,比较简陋,直接运行就好了
这将语音技术带入PC和移动平台上所有可用的现代第一方浏览器。 演示版 在开始之前,请从您的Azure订阅中获取Cognitive Services订阅密钥。 在尝试我们的演示。 如果没有订阅密钥,您仍然可以在支持语音的浏览器...
语音合成和语音识别(第2部分) 这些是语音合成和语音识别程序的第2部分。 在这一部分中,我已经用HTML和JavaScript创建了一些程序。 这也是只能日语识别的语言。 1.说明 本でログラムは,HTMLとJavaScriptで作成し...
CASR-DEMO(中文自动语音识别演示系统) 关于本项目的一些说明 首先,欢迎大家关注项目,...speechV2.0基于第三方接口实现语音识别和语音合成,说话人识别功能(效果图二) 微信:LHH754086474 于2019年12月25日更新。
3.3.4 语音识别与合成技术 3.4 自然交互与传感技术 3.4.1 手势识别 3.4.2 面部表情识别 3.4.3 眼动跟踪 3.4.4 触觉、力觉反馈传感技术 3.5 碰撞检测技术 3.6 虚拟现实工具软件 3.7 Web3D技术与软件 3.7.1 Web3D技术...
系统支 持自然语言人机交互,支持面向互联网、微信、移动APP等全渠道,支持语音识别和语音 合成等技术。 2. 系统特点介绍 丰富的行业背景,服务更专业 依托中科汇联领先的行业内容管理解决方案,借助三千多家行业...
第1章 WPF概述 3 1.1 Windows图形演化 3 1.1.1 DirectX:新的图形引擎 4 1.1.2 硬件加速与WPF 4 1.2 WPF:高级API 4 1.3 分辨率无关性 5 1.3.1 WPF单位 6 1.3.2 系统DPI 7 1.3.3 位图和矢量图形 9 1.4 WPF体系结构 ...
第1章 WPF概述 3 1.1 Windows图形演化 3 1.1.1 DirectX:新的图形引擎 4 1.1.2 硬件加速与WPF 4 1.2 WPF:高级API 4 1.3 分辨率无关性 5 1.3.1 WPF单位 6 1.3.2 系统DPI 7 1.3.3 位图和矢量图形 9 1.4 WPF体系结构 ...
第1章 WPF概述 1 1.1 理解Windows图形 1 1.1.1 DirectX:新的图形引擎 1 1.1.2 硬件加速与WPF 2 1.2 WPF:高级API 4 1.2.1 分辨率无关性 5 1.2.2 WPF的演化 9 1.2.3 Windows窗体将继续保留 11 1.2.4 DirectX...
第1章 WPF概述 1 1.1 理解Windows图形 1 1.1.1 DirectX:新的图形引擎 1 1.1.2 硬件加速与WPF 2 1.2 WPF:高级API 4 1.2.1 分辨率无关性 5 1.2.2 WPF的演化 9 1.2.3 Windows窗体将继续保留 11 1.2.4 DirectX也将继续...
提供了两个不同的功能区域-语音识别和语音合成。 在这里,我们正在与第二个领域合作。 谢谢 ,几乎是前bbb大声笑(制作了有关Web Speech的很酷的视频) ,我希望你授权大个子。 可用脚本 查看如何运行应用程序 ...
第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003 根据表中数据动态生成菜单 实例004 浮动的菜单 1.2 弹出菜单应用实例 实例005 在控件上单击右键...
第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003 根据表中数据动态生成菜单 实例004 浮动的菜单 1.2 弹出菜单应用实例 实例005 在控件上单击右键...
12.5 在/etc/passwd文件中使用NISisms 232 12.6 使用网络组 232 12.7 解决问题的一些技巧 233 12.8 小结 233 第13章 网络文件系统 235 13.1 NFS安装 235 13.2 启动和停止NFS守护程序 236 13.3 NFS状态 236 13.4 配置...
开发它是用于在UTF-8 Oracle实例中使用ASCII编码的Oracle 数据库中来正确的传输非ASCII字符。 Java模板语言 Beetl Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,...
开发它是用于在UTF-8 Oracle实例中使用ASCII编码的Oracle 数据库中来正确的传输非ASCII字符。 Java模板语言 Beetl Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,...
含本书全部源码(1-16章) 共399个实例:第1章 窗体与界面设计 1.1 菜单应用实例 cc实例001 在系统菜单中添加菜单项 cc实例002 带图标的程序菜单 cc实例003 根据表中数据动态生成菜单 cc实例004 浮动的菜单...
第1章 窗体与界面设计 1.1 菜单应用实例 cc实例001 在系统菜单中添加菜单项 cc实例002 带图标的程序菜单 cc实例003 根据表中数据动态生成菜单 cc实例004 浮动的菜单 1.2 弹出菜单...
第1章 窗体与界面设计 1.1 菜单应用实例 cc实例001 在系统菜单中添加菜单项 cc实例002 带图标的程序菜单 cc实例003 根据表中数据动态生成菜单 cc实例004 浮动的菜单 1.2 弹出菜单...