Chapter 28 – Multimedia: Audio, Video,
Speech Synthesis and Recognition
Outline
28.1
28.2
28.3
28.4
28.5
28.6
28.7
28.8
28.9
28.10
28.11
Introduction
Audio and Video
Adding Background Sounds with the bgsound Element
Adding Video with the img Element’s dynsrc Property
Adding Audio or Video with the embed Element
Using the Windows Media Player ActiveX Control
Microsoft Agent Control
RealOne Player Plug-in
Synchronized Multimedia Integration Language (SMIL)
Scalable Vector Graphics (SVG)
Web Resources
2004 Prentice Hall, Inc. All rights reserved.
Objectives
– To enhance Web pages with sound and video.
– To use the bgsound element to add background sounds.
– To use the img element’s dynsrc property to incorporate
video into Web pages.
– To use the embed element to add sound or video.
– To use the Windows Media Player ActiveX control to play
a variety of media formats in Web pages.
– To use the Microsoft Agent ActiveX control to create
animated characters that speak to users and respond to
spoken commands from users.
– To embed RealOne Player™ to include streaming audio
and video in a Web page.
– To embed video and create graphics in a Web page using
SMIL and SVG.
2004 Prentice Hall, Inc. All rights reserved.
28.1 Introduction
• Multimedia
– Use of sound, images, graphics and video
– Add sound, video, and animated characters to Webbased applications
– Streaming technologies (Audio and video files can
begin playing while files are downloading)
Definition
– Multimedia is an integration of text, graphics, still and
moving images, animation, sounds, and any other
medium where every type of information can be
represented, stored, transmitted and processed digitally
2004 Prentice Hall, Inc. All rights reserved.
Characteristics of Multimedia
• Characteristics of multimedia
– Digital – key concept
– Integration of multiple media type,
usually including video or/and audio
– May be interactive or non-interactive
2004 Prentice Hall, Inc. All rights reserved.
Various Media Types
• Text, Graphics, image, video, animation, sound, etc.
• Classifications of various media types
– Captured vs. synthesized media
• Captured media (natural) : information captured from the
real world
Example: still image, video, audio
• Synthesized media (artificial) : information synthesize by
the computer
Example: text, graphics, animation
– Discrete vs. continuous media
• Discrete media: spaced-based, media involve the space
dimension only (Text, Image, Graphics)
• Continuous media: time-based, media involves both the
space and the time dimension (Video, Sound, Animation) 5
2004 Prentice Hall, Inc. All rights reserved.
Classification of Media Type
Sound
Video
Continuou
s
Image
Discrete
Captured
From real world
Animation
Continuou
s
Text
Graphics
Discrete
Synthesized
By computer
6
2004 Prentice Hall, Inc. All rights reserved.
28.2 Audio and Video
• Can be embedded in Web page
• Can be downloaded “on-demand”
• Encoding algorithm or codec
– Transforms raw audio or video into a format that Web
browsers can display
2004 Prentice Hall, Inc. All rights reserved.
21.2 Adding Background Sounds with the
BGSOUND Element
• BGSOUND element
–
–
–
–
Specific to IE
Place in HEAD section
Ending tag optional
Four properties
• SRC
– URL of audio clip
• LOOP
– -1 (default) loops until user browses different Web page
or clicks Stop button
– Positive integer specifies number of times to loop
– Negative values (other than –1) and zero play clip once
2004 Prentice Hall, Inc. All rights reserved.
21.2 Adding Background Sounds with the
BGSOUND Element
– Four properties (continued)
• BALANCE
– Range from –10000 to 10000
– -10000: sound only from left speaker
– 10000: sound only from right speaker
– 0: default, sound balanced between left and right speakers
– Cannot be set via scripting
• VOLUME
– Between –10000 (minimum volume) and 0 (maximum
volume)
– Default: 0
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.1: BackgroundAudio.html
6
<!-- Demonstrating the bgsound element -->
-->
7
8
<html xmlns = "http://www.w3.org/1999/xhtml">
9
<head><title>The bgsound Element</title>
10
Outline
BackgroundAudio
.html
(1 of 4)
<bgsound id = "audio" src =
11
"http://msdn.microsoft.com/downloads/sounds/jazzgos.mid"
12
loop = "1"></bgsound>
13
14
<script type = "text/javascript">
15
<!--
16
function changeProperties()
17
{
18
var loop = parseInt( audioForm.loopit.value );
19
if ( ( loop >= -1 ) ) {
audio.loop = ( isNaN( loop ) ? 1 : loop );
20
21
} else {
alert( "Please enter a integer\n" +
22
"greater than or equal to -1." );
23
24
}
25
2004 Prentice Hall, Inc.
All rights reserved.
26
var vol = parseInt( audioForm.vol.value );
27
if ( ( vol >= -10000 ) && ( vol <= 0 ) ) {
audio.volume = ( isNaN( vol ) ? 0 : vol );
28
} else {
29
alert( "Please enter an integer\n" +
30
"between -10000 and 0." );
31
}
32
33
Outline
BackgroundAudio
.html
(2 of 4)
}
34
35
function stopSound()
36
{
if ( audioForm.stopButton.value ==
37
38
"Stop Sound" ) {
39
audio.src = "";
40
audioForm.stopButton.value =
"Start Sound";
41
} else {
42
audio.src =
43
"http://msdn.microsoft.com/downloads/sounds/jazzgos.mid";
44
audioForm.stopButton.value =
45
"Stop Sound";
46
}
47
48
}
49
// -->
50
</script>
2004 Prentice Hall, Inc.
All rights reserved.
51
</head>
52
53
Outline
<body>
54
<h1>Background Music via the bgsound Element</h1>
55
<h2>Jazz Gospel</h2>
56
57
This sound is from the free sound downloads at the
58
<a href =
59
"http://msdn.microsoft.com/downloads/default.asp">
60
Microsoft Developer Network</a> downloads site.
61
<hr />
62
Use the fields below to change the number of iterations
63
and the volume for the audio clip<br />
64
Press <strong>Stop</strong> to stop playing the sound.
65
<br />Press <strong>Refresh</strong> to begin playing
66
the sound again.
BackgroundAudio
.html
(3 of 4)
67
68
<form name = "audioForm" action = "">
69
<p>Loop [-1 = loop forever]</p>
70
<input name = "loopit" type = "text" value = "1" />
71
<br />Volume [-10000 (low) to 0 (high)]
72
<input name = "vol" type = "text" value = "0" /><br />
73
<input type = "button" value = "Set Properties"
74
onclick = "changeProperties()" />
75
2004 Prentice Hall, Inc.
All rights reserved.
<input type = "button" value = "Stop Sound"
76
id = "stopButton" onClick = "stopSound()" />
77
78
79
</form>
Outline
</body>
80 </html>
BackgroundAudio
.html
(4 of 4)
2004 Prentice Hall, Inc.
All rights reserved.
28.4 Adding Video with the img Element’s
dynsrc Property
• img element
– Incorporates both images and videos
– src property
• Indicates source is image
– dynsrc property
• Indicates source is video clip
– start property
• Specifies when video should start playing
• Event fileopen
– Video should play as soon as it loads
• Event mouseover
– Video should play when user position mouse over video
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.2: Dynamicimg.html
-->
6
<!-- Demonstrating the img element’s dynsrc property -->
Dynamicimg.html
(1 of 2)
7
8
9
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
10
<title>An Embedded Video Using the dynsrc Property</title>
11
<bgsound src =
12
"http://msdn.microsoft.com/downloads/sounds/carib.MID"
13
loop = "-1"></bgsound>
14
</head>
15
16
17
18
<body>
<h1>An Embedded Video Using the img element's
dynsrc Property</h1>
19
<h2>Car and Carribean Music</h2>
20
<table>
21
<tr><td><img dynsrc = "car_hi.wmv"
22
start = "mouseover" width = "180"
23
height = "135" loop = "-1"
24
alt = "Car driving in circles" /></td>
25
<td>This page will play the audio clip and video
2004 Prentice Hall, Inc.
All rights reserved.
26
in a loop.<br />The video will not begin
27
playing until you move the mouse over the
28
video.<br />Press the browser’s<strong>Stop</strong>
29
button to stop playing the sound and the video.</td>
30
</tr>
31
</table>
32
Outline
Dynamicimg.html
(2 of 2)
</body>
33 </html>
2004 Prentice Hall, Inc.
All rights reserved.
28.5 Adding Audio or Video with the embed
Element
• Element embed
– Embeds media clip into Web page
– Displays a graphical user interface (GUI)
– Supported by both Microsoft Internet Explorer and Netscape
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.3: EmbeddedAudio.html
-->
6
<!-- Background Audio via the embed Element -->
7
8
9
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
10
<title>Background Audio via the embed Element</title>
11
<style type = "text/css">
12
span
{ width: 600 }
13
.big
{ color: blue;
14
font-family: sans-serif;
15
font-size: 50pt;
16
font-weight: bold }
17
EmbeddedAudio
.html
(1 of 3)
</style>
18
19
<script type = "text/javascript">
20
<!--
21
var TimerID;
22
var updown = true;
23
var str = 1;
24
2004 Prentice Hall, Inc.
All rights reserved.
25
function start()
26
{
TimerID = window.setInterval( "wave()", 100 );
27
28
Outline
}
29
30
function wave()
31
{
EmbeddedAudio
.html
(2 of 3)
if ( str > 23 || str < 1 )
32
updown = !updown;
33
34
35
if ( updown )
36
str++;
else
37
str--;
38
39
40
wft.filters( "wave" ).phase = str * 20;
41
wft.filters( "wave" ).strength = str;
42
}
43
// -->
44
</script>
45
</head>
46
47
<body onload = "start()">
48
<h1>Background Audio via the embed Element</h1>
49
<p>Click the text to stop the script.</p>
50
2004 Prentice Hall, Inc.
All rights reserved.
51
<p class = "big" align = "center">
52
<span onclick = "window.clearInterval( TimerID )"
53
id = "wft" style = "filter:wave(
54
add = 0, freq = 3, light = 0, phase = 0, strength = 5)">
55
WAVE FILTER EFFECT</p></span>
56
57
<p>These controls can be used to control the audio.</p>
58
<embed src = "humming.wav" loop = "true"></embed>
59
Outline
EmbeddedAudio
.html
(3 of 3)
</body>
60 </html>
2004 Prentice Hall, Inc.
All rights reserved.
28.5 Adding Audio or Video with the embed
Element
Play
Pause
Stop
Mute
2004 Prentice Hall, Inc. All rights reserved.
Volume
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.4: EmbeddedVideo.html -->
6
<!-- Video via the embed Element
-->
7
8
9
10
11
EmbeddedVideo
.html
(1 of 2)
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Video via the embed Element</title>
</head>
12
13
<body>
14
<h1>Displaying a Video using the embed Element</h1>
15
<h2>Car Driving in Circles</h2>
16
17
18
<table>
<tr><td><embed src = "car_hi.wmv" loop = "false"
width = "240" height = "176">
19
</embed></td>
20
21
22
</tr></table>
<hr />
2004 Prentice Hall, Inc.
All rights reserved.
23
This page plays the video once.<br />
24
Use the controls on the embedded video player to play the
25
video again.
26
Outline
</body>
27 </html>
EmbeddedVideo
.html
(2 of 2)
2004 Prentice Hall, Inc.
All rights reserved.
28.6 Using the Windows Media Player
ActiveX Control
• object element
– Embed Windows Media Player and ActiveX controls
– Property id
–
–
–
–
–
–
–
• Specifies scripting name of element
width and height properties
• Specify width and height in pixels
property classid
• Specifies ActiveX control ID
Element param
• Specify parameter
Parameter FileName
• Specifies file containing media clip
AutoStart (boolean value)
ShowControls (boolean value)
Loop (boolean value)
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.5: MediaPlayer.html
-->
6
<!-- Embedded Media Player Objects -->
MediaPlayer.html
(1 of 3)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>Embedded Media Player Objects</title>
<script type = "text/javascript">
11
<!--
12
var videoPlaying = true;
13
14
function toggleVideo( b )
15
{
16
videoPlaying = !videoPlaying;
17
b.value = videoPlaying ?
"Pause Video" : "Play Video";
18
videoPlaying ?
19
VideoPlayer.Play() : VideoPlayer.Pause();
20
21
}
22
// -->
23
</script>
24
</head>
25
2004 Prentice Hall, Inc.
All rights reserved.
26
27
28
<body>
<h1>
Audio and video through embedded Media Player objects
29
</h1>
30
<hr />
31
<table>
MediaPlayer.html
(2 of 3)
32
<tr><td valign = "top" align = "center">
33
<object id = "VideoPlayer" width = "200" height = "225"
34
35
36
37
classid =
"CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<param name = "FileName" value =
"car_hi.wmv" />
38
<param name = "AutoStart" value = "true" />
39
<param name = "ShowControls" value = "false" />
40
<param name = "Loop" value = "true" />
41
</object></td>
42
<td valign = "bottom" align = "center">
43
<p>Use the controls below to control the audio clip.</p>
44
<object id = "AudioPlayer"
45
46
47
48
Outline
classid =
"CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<param name = "FileName" value =
"http://msdn.microsoft.com/downloads/sounds/carib.mid" />
49
<param name = "AutoStart" value = "true" />
50
<param name = "Loop" value = "true" />
2004 Prentice Hall, Inc.
All rights reserved.
</object></td></tr>
51
52
<tr><td valign = "top" align = "center">
53
<input name = "video" type = "button" value =
54
"Pause Video" onclick = "toggleVideo( this )" />
55
</td></tr>
56
57
58
Outline
MediaPlayer.html
(3 of 3)
</table>
</body>
59 </html>
2004 Prentice Hall, Inc.
All rights reserved.
28.7 Microsoft Agent Control
• Interactive animated characters
• Speaks
• Supports speech recognition
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.6: tutorial.html -->
6
<!-- Microsoft Agent Control
-->
tutorial.html
(1 of 12)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Speech Recognition</title>
11
12
<!-- Microsoft Agent ActiveX Control -->
13
<object id = "agent" width = "0" height = "0"
14
classid = "CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F"
15
codebase = "#VERSION = 2, 0, 0, 0">
16
</object>
17
18
<!-- Lernout & Hauspie TruVoice text to speech engine -->
19
<object width = "0" height = "0"
20
classid = "CLSID:B8F2846E-CE36-11D0-AC83-00C04FD97575"
21
codebase = "#VERSION = 6, 0, 0, 0">
22
</object>
23
2004 Prentice Hall, Inc.
All rights reserved.
24
<!-- Microsoft Speech Recognition Engine -->
25
<object width = "0" height = "0"
26
classid = "CLSID:161FA781-A52C-11d0-8D7C-00A0C9034A7E"
27
codebase = "#VERSION = 4, 0, 0, 0">
28
</object>
29
30
31
Outline
tutorial.html
(2 of 12)
<script type = "text/javascript">
<!--
32
33
var currentImage = null;
34
var tips =
35
36
37
[ "gpp", "seo", "perf", "port",
"gui", "ept", "cpe" ];
var tipNames = [
38
"Good Programming Practice",
39
"Software Engineering Observation",
40
"Performance Tip", "Portability Tip",
41
"Look-and-Feel Observation",
42
"Error-Prevention Tip",
43
"Common Programming Error" ];
44
var voiceTips = [
45
"Good [Programming Practice]",
46
"Software [Engineering Observation]",
47
"Performance [Tip]",
48
"Portability [Tip]",
2004 Prentice Hall, Inc.
All rights reserved.
49
"Look-and-Feel [Observation]",
50
"Error-Prevention [Tip]",
51
"Common [Programming Error]" ];
52
Outline
var explanations = [
53
// Good Programming Practice text
54
"Good Programming Practices highlight " +
55
"techniques for writing programs that are " +
56
"clearer, more understandable, more " +
57
"debuggable, and more maintainable.",
tutorial.html
(3 of 12)
58
59
// Software Engineering Observation text
60
"Software Engineering Observations highlight " +
61
"architectural and design issues that affect " +
62
"the construction of complex software systems.",
63
64
// Performance Tip text
65
"Performance Tips highlight opportunities for " +
66
"improving program performance.",
67
68
// Portability Tip text
69
"Portability Tips help students write portable " +
70
"code that can execute in different Web browsers.",
71
72
// Look-and-Feel Observation text
73
"Look-and-Feel Observations highlight graphical " +
2004 Prentice Hall, Inc.
All rights reserved.
74
"user interface conventions. These observations " +
75
"help students design their own graphical user " +
76
"interfaces in conformance with industry " +
77
"standards.",
78
79
// Error-Prevention Tip text
80
"Error-Prevention Tips tell people how to " +
81
"test and debug their programs. Many of the " +
82
"tips also describe aspects of creating Web " +
83
"pages and scripts that reduce the likelihood " +
84
"of 'bugs' and thus simplify the testing and " +
85
"debugging process.",
Outline
tutorial.html
(4 of 12)
86
87
// Common Programming Error text
88
"Common Programming Errors focus the students' " +
89
"attention on errors commonly made by beginning " +
90
"programmers. This helps students avoid making " +
91
"the same errors. It also helps reduce the long " +
92
"lines outside instructors' offices during " +
93
"office hours!" ];
94
2004 Prentice Hall, Inc.
All rights reserved.
95
function loadAgent()
96
{
97
agent.Connected = true;
98
agent.Characters.Load( "Peedy",
99
"C:\\WINNT\\msagent\\chars\\Peedy.acs" );
100
actor = agent.Characters.Character( "Peedy" );
101
actor.LanguageID = 0x0409; // sometimes needed
Outline
tutorial.html
(5 of 12)
102
103
// get states from server
104
actor.Get( "state", "Showing" );
105
actor.Get( "state", "Speaking" );
106
actor.Get( "state", "Hiding" );
107
108
// get Greet animation and do Peedy introduction
109
actor.Get( "animation", "Greet" );
110
actor.MoveTo( screenLeft, screenTop - 90);
111
actor.Show();
112
actor.Play( "Greet" );
113
actor.Speak( "Hello. " +
114
"If you would like me to tell you about a " +
115
"programming tip, click its icon, or, press " +
116
"the 'Scroll Lock' key, and speak the name " +
117
"of the tip, into your microphone." );
118
2004 Prentice Hall, Inc.
All rights reserved.
119
// get other animations
120
actor.Get( "animation", "Idling" );
121
actor.Get( "animation", "MoveDown" );
122
actor.Get( "animation", "MoveUp" );
123
actor.Get( "animation", "MoveLeft" );
124
actor.Get( "animation", "MoveRight" );
125
actor.Get( "animation", "GetAttention" );
126
actor.Get( "animation", "GetAttentionReturn" );
Outline
tutorial.html
(6 of 12)
127
128
// set up voice commands
129
for ( var i = 0; i < tips.length; ++i )
actor.Commands.Add( tips[ i ],
130
tipNames[ i ], voiceTips[ i ], true, true );
131
132
133
actor.Commands.Caption = "Programming Tips";
134
actor.Commands.Voice = "Programming Tips";
135
actor.Commands.Visible = true;
136
}
137
138
function imageSelectTip( tip )
139
{
140
actor.Stop();
141
for ( i = 0; i < document.images.length; i++) {
142
document.images[ i ].style.background = "lemonchiffon";
143
currentImage = null;
2004 Prentice Hall, Inc.
All rights reserved.
144
}
145
for ( var i = 0; i < document.images.length; ++i )
if ( document.images( i ) == tip )
146
tellMeAboutIt( i );
147
148
Outline
tutorial.html
(7 of 12)
}
149
150
function voiceSelectTip( cmd )
151
{
var found = false;
152
153
for ( var i = 0; i < tips.length; ++i )
154
if ( cmd.Name == tips[ i ] ) {
155
156
found = true;
157
break;
}
158
159
if ( found )
160
tellMeAboutIt( i );
161
162
}
163
164
function tellMeAboutIt( element )
165
{
166
currentImage = document.images( element );
167
currentImage.style.background = "red";
168
spanId = document.images( element ).id + "Span";
2004 Prentice Hall, Inc.
All rights reserved.
169
spanObject = document.getElementById( spanId );
170
actor.MoveTo(
171
screenLeft + parseInt( spanObject.style.left ) - 18,
172
screenTop + parseInt( spanObject.style.top )- 103 );
actor.Speak( explanations[ element ] );
173
174
}
175
// -->
176
</script>
Outline
tutorial.html
(8 of 12)
177
178
<script type = "text/javascript" for = "agent"
event = "Command( cmd )">
179
180
<!--
181
voiceSelectTip( cmd );
182
// -->
183
</script>
184
185
<script type = "text/javascript" for = "agent"
event = "BalloonShow">
186
187
<!--
188
if ( currentImage != null ) {
189
currentImage.style.background = "lemonchiffon";
190
currentImage = null;
191
}
192
// -->
193
</script>
2004 Prentice Hall, Inc.
All rights reserved.
194
195
<script type = "text/javascript" for = "agent"
196
event = "Click">
197
<!--
198
actor.Play( "GetAttention" );
199
actor.Speak( "Stop poking me with that pointer!" );
200
actor.Play( "GetAttentionReturn" );
201
// -->
202
</script>
203
Outline
tutorial.html
(9 of 12)
</head>
204
205
206
207
208
209
<body style = "background-color: lemonchiffon"
onload = "loadAgent()">
<table border = "0">
<tr>
<th colspan = "4">
210
<h1 style = "color: blue">
211
Deitel Programming Tips
</h1>
212
213
</th>
214
</tr>
215
<tr>
216
217
218
<td align = "center" valign = "top" width = "120">
<span id = "gppSpan" style = "position : absolute;
left : 30; top : 80; width : 130;">
2004 Prentice Hall, Inc.
All rights reserved.
219
<img id = "gpp" src = "GPP_100h.gif"
220
alt = "Good Programming Practice" border =
221
"0" onclick = "imageSelectTip( this )" />
222
Good Programming Practices</span></td>
223
<td align = "center" valign = "top" width = "120">
224
225
226
<span id = "seoSpan" style = "position : absolute;
<img id = "seo" src = "SEO_100h.gif"
alt = "Software Engineering Observation"
228
border = "0"
229
onclick = "imageSelectTip( this )" />
231
232
Software Engineering Observations</span></td>
<td align = "center" valign = "top" width = "120">
<span id = "perfSpan" style = "position : absolute;
233
left : 330; top : 80; width : 130;">
234
<img id = "perf" src = "PERF_100h.gif"
235
alt = "Performance Tip" border = "0"
236
onclick = "imageSelectTip( this )" />
237
238
239
tutorial.html
(10 of 12)
left : 180; top : 80; width : 130;">
227
230
Outline
Performance Tips</span></td>
<td align = "center" valign = "top" width = "120">
<span id = "portSpan" style = "position : absolute;
240
left : 480; top : 80; width : 130;">
241
<img id = "port" src = "PORT_100h.gif"
242
alt = "Portability Tip" border = "0"
243
onclick = "imageSelectTip( this )" />
2004 Prentice Hall, Inc.
All rights reserved.
Portability Tips</span></td>
244
245
</tr>
246
<tr>
247
Outline
<td align = "center" valign = "top" width = "120">
<span id = "guiSpan" style = "position : absolute;
248
left : 30; top : 260; width : 130;">
249
<img id = "gui" src = "GUI_100h.gif"
250
251
alt = "Look-and-Feel Observation" border =
252
"0" onclick = "imageSelectTip( this )" />
253
Look-and-Feel Observations</span></td>
254
<td align = "center" valign = "top" width = "120">
<span id = "eptSpan" style = "position : absolute;
255
left : 180; top : 260; width : 130;">
256
<img id = "ept" src = "EPT_100h.gif"
257
258
alt = "Error-Prevention Tip" border =
259
"0" onclick = "imageSelectTip( this )" />
Error-Prevention Tips</span></td>
260
261
<td align = "center" valign = "top" width = "12">
<span id = "cpeSpan" style = "position : absolute;
262
left : 330; top : 260; width : 130;">
263
<img id = "cpe" src = "CPE_100h.gif"
264
265
alt = "Common Programming Error" border =
266
"0" onclick = "imageSelectTip( this )" />
Common Programming Errors</span></td>
267
268
tutorial.html
(11 of 12)
</tr>
2004 Prentice Hall, Inc.
All rights reserved.
269
</table>
270
<img src = "agent_button.gif" style = "position: absolute;
bottom: 10px; right: 10px" />
271
272
Outline
</body>
273 </html>
tutorial.html
(12 of 12)
2004 Prentice Hall, Inc.
All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
28.7 Microsoft Agent Control
Fig. 28.7
Peedy finishing introduction.
2004 Prentice Hall, Inc. All rights reserved.
28.7 Microsoft Agent Control
Fig. 28.8
Peedy ready to receive voice commands.
2004 Prentice Hall, Inc. All rights reserved.
28.7 Microsoft Agent Control
Fig. 28.9
Peedy receiving voice command.
2004 Prentice Hall, Inc. All rights reserved.
28.7 Microsoft Agent Control
Fig. 28.10
Peedy discussing Good Programming Practices.
2004 Prentice Hall, Inc. All rights reserved.
28.7 Microsoft Agent Control
Event
BalloonHide
Description
Called when the text balloon for a character is
hidden.
BalloonShow
Called when the text balloon for a character is
shown.
Hide
Called when a character is hidden.
Move
Called when a character is moved on the screen.
Show
Called when a character is displayed on the
screen.
Size
Called when a character’s size is changed.
Fig. 28.11
Other events for the Microsoft Agent control.
2004 Prentice Hall, Inc. All rights reserved.
28.7 Microsoft Agent Control
Property or method
Properties
Height
Left
Name
Speed
Top
Width
Methods
Activate
GestureAt
Interrupt
StopAll
Fig. 28.12
Description
The height of the character in pixels.
The left edge of the character in pixels from the left of the
screen.
The default name for the character.
The speed of the character’s speech.
The top edge of the character in pixels from the top of the screen.
The width of the character in pixels.
Sets the currently active character when multiple characters
appear on the screen.
Specifies that the character should gesture toward a location on
the screen that is specified in pixel coordinates from the upperleft corner of the screen.
Interrupts the current animation. The next animation in the queue
of animations for this character is then displayed.
Stops all animations of a specified type for the character.
Other properties and methods for the Character object.
2004 Prentice Hall, Inc. All rights reserved.
28.7 Microsoft Agent Control
Tag
\Chr = string\
Description
Specifies the tone of the voice. Possible values for string are
Normal (the default) for a normal tone of voice, Monotone for
a monotone voice or Whisper for a whispered voice.
\Emp\
Emphasizes the next spoken word.
\Lst\
Repeats the last statement spoken by the character. This tag must
be the only content of the string in the Speak method call.
Pauses speech for number milliseconds.
\Pau = number\
\Pit = number\
Changes the pitch of the character’s voice. This value must be
within the range 50 to 400 hertz for the Microsoft Agent speech
engine.
\Spd = number\
Changes the speech speed to a value in the range 50 to 250.
\Vol = number\
Changes the volume to a value in the range 0 (silent) to 65,535
(maximum volume).
Fig. 28.13
Speech output tags.
2004 Prentice Hall, Inc. All rights reserved.
28.8 RealOne Player Plug-in
• Element embed
– Embed RealOne Player plug-ins for video and audio
– Attribute type
• Specifies MIME type of embedded file
– Attributes width and height
• Specify dimensions of space the control occupies
– Attribute autostart
• Determines whether media start playing when page loads
– Attribute controls
• Specifies which controls users can access
– Attribute src
• Set to location of streaming media
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.14: StreamingMedia.html
-->
6
<!-- Embedding RealOne Player into an XHTML page -->
7
8
9
10
StreamingMedia
.html
(1 of 3)
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Live Media!</title>
11
12
<script type = "text/javascript">
13
<!--
14
var locations =
[ "http://www.noaanews.noaa.gov/video/naturalworld.ram",
15
"http://www.nasa.gov/ram/35037main_.ram"]
16
17
18
function change( loc )
19
{
20
videoControl.SetSource( locations[ loc ] );
21
videoControl.DoPlayPause();
22
}
23
// -->
24
</script>
25
</head>
2004 Prentice Hall, Inc.
All rights reserved.
26
27
<body>
Outline
28
29
<p>Pick from my favorite video streams:
30
31
<select id = "streamSelect" onchange =
32
"change( this.value )">
33
<option value = "">Select a station</option>
34
<option value = "0">NOAA</option>
35
<option value = "1">NASA</option>
36
StreamingMedia
.html
(2 of 3)
</select></p>
37
38
<br />
39
<embed id = "videoControl" src = ""
40
type = "audio/x-pn-realaudio-plugin" width = "275"
41
height = "200" controls = "ImageWindow"
42
console = "streamingAudio"
43
autostart = "false" />
44
<br />
45
<embed id = "audioControl" src = ""
46
type = "audio/x-pn-realaudio-plugin" width = "275"
47
height = "40" controls = "ControlPanel"
48
console = "streamingAudio"
49
autostart = "false" />
2004 Prentice Hall, Inc.
All rights reserved.
50
51
</body>
52 </html>
Outline
StreamingMedia
.html
(3 of 3)
2004 Prentice Hall, Inc.
All rights reserved.
28.9 Synchronized Multimedia Integration
Language (SMIL)
• Coordinate wide range of multimedia elements
• XML-based description language
• Organize text, audio, video to occur
simultaneously or sequentially
• Provide time reference for all instances of text and
media
• Specifies source and presentation of multimedia
2004 Prentice Hall, Inc. All rights reserved.
1
<smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">
Outline
2
3
<!-- Fig. 20.15 : exampleSMIL.smil -->
4
<!-- Example SMIL Document
-->
exampleSMIL.smil
(1 of 3)
5
6
7
8
9
<head>
<layout>
<root-layout height = "300" width = "280"
background-color = "#bbbbee" title = "Example" />
10
11
12
13
<region id = "image1" width = "177" height = "230"
top = "35" left = "50" background-color = "#bbbbee" />
</layout>
14
15
<transition id = "wipeForward" dur = "2s" type = "barWipe" />
16
<transition id = "wipeBackward" dur = "2s" type = "barWipe"
17
subtype = "topToBottom" />
18
19
20
<transition id = "fadeIn" dur = "2s" type = "fade"
subtype = "fadeFromColor" fadeColor = "#bbbbee" />
21
22
<transition id = "fadeOut" dur = "2s" type = "fade"
23
subtype = "fadeToColor" fadeColor = "#bbbbee" />
24
2004 Prentice Hall, Inc.
All rights reserved.
25
26
<transition id = "crossFade" type = "fade" subtype = "crossfade"
dur = "2s" />
Outline
27
28
</head>
29
<body>
30
31
32
exampleSMIL.smil
(2 of 3)
<seq>
<par>
<img src = "book1.jpg" region = "image1"
33
transIn = "wipeForward" transOut = "wipeForward"
34
alt = "book1" dur = "6s" fill = "transition"
35
fit = "fill" />
36
<audio src = "bounce.au" dur = ".5s" />
37
</par>
38
<par>
39
<img src = "book2.jpg" region = "image1" transIn = "fadeIn"
40
transOut = "fadeOut" alt = "book2" dur = "6s"
41
fit = "fill" fill = "transition" />
42
<audio src = "bounce.au" dur = ".5s" />
43
</par>
44
<par>
45
<img src = "book3.jpg" region = "image1"
46
transIn = "wipeBackward" transOut = "fadeOut"
47
alt = "book3" dur = "6s" fit = "fill"
48
fill = "transition" />
49
<audio src = "bounce.au" dur = ".5s" />
2004 Prentice Hall, Inc.
All rights reserved.
50
</par>
51
<par>
<img src = "book4.jpg" region = "image1" transIn = "crossFade"
52
53
transOut = "fadeOut" alt = "book4" dur = "6s"
54
fit = "fill" fill = "transition" />
55
<audio src = "bounce.au" dur = ".5s" />
56
</par>
57
<par>
exampleSMIL.smil
(3 of 3)
<img src = "book5.jpg" region = "image1"
58
59
transIn = "wipeForward" transOut = "wipeBackward"
60
alt = "book5" dur = "6s" fit = "fill"
61
fill = "transition" />
<audio src = "bounce.au" dur = ".5s" />
62
63
</par>
64
<par>
<img src = "book6.jpg" region = "image1"
65
66
transIn = "crossFade" alt = "book6" dur = "6s"
67
fit = "fill" fill = "transition" />
<audio src = "bounce.au" dur = ".5s" />
68
</par>
69
70
Outline
</seq>
71
72
</body>
73 </smil>
2004 Prentice Hall, Inc.
All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 28.16: SMILexample.html
-->
6
<!-- embedding SMIL with RealOne Player -->
SMILexample.html
(1 of 1)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Embedding SMIL with RealOne Player</title>
11
</head>
12
<body>
13
<div style = "text-align: center">
14
<embed src = "exampleSMIL.smil"
15
controls = "ImageWindow"
16
type = "audio/x-pn-realaudio-plugin"
17
width = "280" height = "300" autostart = "true">
18
</embed>
19
</div>
20
</body>
21 </html>
2004 Prentice Hall, Inc.
All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
28.10 Scalable Vector Graphics (SVG)
• Describes vector graphic data for JPEG, GIF, and
PNG formats
• Vector graphics
– Produced by mathematical equations
• XML vocabulary
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
Outline
2
3
<!-- Fig. 28.17 : shapes.svg -->
4
<!-- Simple example of SVG
-->
5
6
<svg viewBox = "0 0 300 300" width = "300" height = "300">
shapes.svg
(1 of 2)
7
8
<!-- Generate a background -->
9
<g>
10
11
<path style = "fill: #eebb99" d = "M0,0 h300 v300 h-300 z"/>
</g>
12
13
14
<!-- Circle shape and attributes -->
15
<g>
16
17
<circle style = "fill:green;" cx = "150" cy = "150" r = "50">
18
<animate attributeName = "opacity" attributeType = "CSS"
19
20
from = "0" to = "1" dur = "6s"
/>
</circle>
21
22
<!-- Rectangle shape and attributes -->
23
24
25
<rect style = "fill: blue; stroke: white"
x = "50" y = "0" width = "100" height = "100">
2004 Prentice Hall, Inc.
All rights reserved.
<animate attributeName = "y" begin = "mouseover" dur = "2s"
26
values = "0; -50; 0; 20; 0; -10; 0; 5; 0; -3; 0; 1; 0" />
27
28
</rect>
Outline
29
30
<!-- Text value and attributes -->
31
32
<text style = "fill: red; font-size: 24pt"
33
x = "25" y = "250"> Welcome to SVG!
34
<animateColor attributeName = "fill"
35
attributeType = "CSS" values = "red;blue;yellow;green;red"
36
dur = "10s" repeatCount = "indefinite"/>
</text>
37
38
shapes.svg
(2 of 2)
</g>
39 </svg>
2004 Prentice Hall, Inc.
All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
Outline
2
3
<!-- Fig. 28.18: planet.svg
-->
4
<!-- Planetary motion with SVG -->
5
6
7
8
<svg viewBox = "-500 -500 1000 1000">
<g id = "background">
<path style = "fill: black"
d = "M -2000,-2000 H 2000 V 2000 H -2000 Z" />
9
10
planet.svg
(1 of 2)
</g>
11
12
13
<circle id = "sun" style = "fill: yellow"
cx = "0" cy = "0" r = "100" />
14
15
16
<g>
<animateTransform attributeName = "transform"
17
type = "rotate" dur = "80s" from = "0" to = "360"
18
repeatCount = "indefinite" />
19
20
21
<circle id = "earth" style = "fill: blue"
cx = "400" cy = "0" r = "40" />
22
23
24
25
<g transform = "translate( 400 0 )">
<circle id = "moon" style = "fill: white"
cx = "70" cy = "0" r = "10">
2004 Prentice Hall, Inc.
All rights reserved.
<animateTransform attributeName = "transform"
26
27
type = "rotate" dur = "20s" from = "360"
28
to = "0" repeatCount = "indefinite" />
</circle>
29
30
31
Outline
</g>
</g>
planet.svg
(2 of 2)
32 </svg>
2004 Prentice Hall, Inc.
All rights reserved.
28.11 Web Resources
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
www.microsoft.com/windows/windowsmedia
www.streamingmedia.com
www.microsoft.com/msagent/downloads/default.asp
msdn.microsoft.com/downloads/default.asp
www.real.com
www.adobe.com/svg
www.service.real.com/help/library/guides/extend/embed.htm
www.nasa.gov/gallery/index.html
www.speech.cs.cmu.edu/comp.speech/SpeechLinks.html
www.mp3.com
www.mpeg.org
www.winamp.com
www.shoutcast.com
www.windowsmedia.com
www.research.att.com/~rws/Sable.v1_0.htm
www.w3.org/AudioVideo
smw.internet.com/smil/smilhome.html
2004 Prentice Hall, Inc. All rights reserved.
