Scribd
Upload
79 views63 pages

Chapter 28 - Multimedia: Audio, Video, Speech Synthesis and Recognition

Uploaded by

Selva Ganesh
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
79 views63 pages

Chapter 28 - Multimedia: Audio, Video, Speech Synthesis and Recognition

Uploaded by

Selva Ganesh
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 63

Chapter 28 – Multimedia: Audio, Video,

Speech Synthesis and Recognition


Outline
28.1 Introduction
28.2 Audio and Video
28.3 Adding Background Sounds with the bgsound Element
28.4 Adding Video with the img Element’s dynsrc Property
28.5 Adding Audio or Video with the embed Element
28.6 Using the Windows Media Player ActiveX Control
28.7 Microsoft Agent Control
28.8 RealOne Player Plug-in
28.9 Synchronized Multimedia Integration Language (SMIL)
28.10 Scalable Vector Graphics (SVG)
28.11 Web Resources

 2004 Prentice Hall, Inc. All rights reserved.


Objectives

• In this lesson, you will learn:


– 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 Web-based
applications
– Streaming technologies

 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.


28.3  Adding Background Sounds with the
bgsound Element
• bgsound element
– src property
• Specifies the URL of audio clip to be played
– loop property
• Specifies number of times audio clip will play
– balance property
• Specifies balance between left and right speakers
– volume property
• Determines volume of audio clip

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.1: BackgroundAudio.html --> BackgroundAudio
6 <!-- Demonstrating the bgsound element --> .html
7 (1 of 4)
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head><title>The bgsound Element</title>
10 <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 ) ) {
20 audio.loop = ( isNaN( loop ) ? 1 : loop );
21 } else {
22 alert( "Please enter a integer\n" +
23 "greater than or equal to -1." );
24 }
25

 2004 Prentice Hall, Inc.


All rights reserved.
26 var vol = parseInt( audioForm.vol.value );
27 if ( ( vol >= -10000 ) && ( vol <= 0 ) ) {
Outline
28 audio.volume = ( isNaN( vol ) ? 0 : vol );
29 } else {
30 alert( "Please enter an integer\n" + BackgroundAudio
31 "between -10000 and 0." ); .html
32 } (2 of 4)
33 }
34
35 function stopSound()
36 {
37 if ( audioForm.stopButton.value ==
38 "Stop Sound" ) {
39 audio.src = "";
40 audioForm.stopButton.value =
41 "Start Sound";
42 } else {
43 audio.src =
44 "http://msdn.microsoft.com/downloads/sounds/jazzgos.mid";
45 audioForm.stopButton.value =
46 "Stop Sound";
47 }
48 }
49 // -->
50 </script>

 2004 Prentice Hall, Inc.


All rights reserved.
51 </head>
52
Outline
53 <body>
54 <h1>Background Music via the bgsound Element</h1>
55 <h2>Jazz Gospel</h2> BackgroundAudio
56 .html
57 This sound is from the free sound downloads at the (3 of 4)
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.
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.
76 <input type = "button" value = "Stop Sound"
77 id = "stopButton" onClick = "stopSound()" />
Outline
78 </form>
79 </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"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.2: Dynamicimg.html --> Dynamicimg.html
6 <!-- Demonstrating the img element’s dynsrc property --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <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 <body>
17 <h1>An Embedded Video Using the img element's
18 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
Outline
28 video.<br />Press the browser’s<strong>Stop</strong>
29 button to stop playing the sound and the video.</td>
30 </tr> Dynamicimg.html
31 </table> (2 of 2)
32 </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"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.3: EmbeddedAudio.html --> EmbeddedAudio
6 <!-- Background Audio via the embed Element --> .html
7 (1 of 3)
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <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 </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 {
Outline
27 TimerID = window.setInterval( "wave()", 100 );
28 }
29 EmbeddedAudio
30 function wave() .html
31 { (2 of 3)
32 if ( str > 23 || str < 1 )
33 updown = !updown;
34
35 if ( updown )
36 str++;
37 else
38 str--;
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 )"
Outline
53 id = "wft" style = "filter:wave(
54 add = 0, freq = 3, light = 0, phase = 0, strength = 5)">
55 WAVE FILTER EFFECT</p></span> EmbeddedAudio
56 .html
57 <p>These controls can be used to control the audio.</p> (3 of 3)
58 <embed src = "humming.wav" loop = "true"></embed>
59 </body>
60 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
28.5  Adding Audio or Video with the embed
Element

Play

Pause Stop Mute Volume

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.4: EmbeddedVideo.html --> EmbeddedVideo
6 <!-- Video via the embed Element --> .html
7 (1 of 2)
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Video via the embed Element</title>
11 </head>
12
13 <body>
14 <h1>Displaying a Video using the embed Element</h1>
15 <h2>Car Driving in Circles</h2>
16
17 <table>
18 <tr><td><embed src = "car_hi.wmv" loop = "false"
19 width = "240" height = "176">
20 </embed></td>
21 </tr></table>
22 <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
Outline
25 video again.
26 </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"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.5: MediaPlayer.html --> MediaPlayer.html
6 <!-- Embedded Media Player Objects --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head><title>Embedded Media Player Objects</title>
10 <script type = "text/javascript">
11 <!--
12 var videoPlaying = true;
13
14 function toggleVideo( b )
15 {
16 videoPlaying = !videoPlaying;
17 b.value = videoPlaying ?
18 "Pause Video" : "Play Video";
19 videoPlaying ?
20 VideoPlayer.Play() : VideoPlayer.Pause();
21 }
22 // -->
23 </script>
24 </head>
25

 2004 Prentice Hall, Inc.


All rights reserved.
26 <body>
27 <h1>
Outline
28 Audio and video through embedded Media Player objects
29 </h1>
30 <hr /> MediaPlayer.html
31 <table> (2 of 3)
32 <tr><td valign = "top" align = "center">
33 <object id = "VideoPlayer" width = "200" height = "225"
34 classid =
35 "CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
36 <param name = "FileName" value =
37 "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 classid =
46 "CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
47 <param name = "FileName" value =
48 "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.
51 </object></td></tr>
52
Outline
53 <tr><td valign = "top" align = "center">
54 <input name = "video" type = "button" value =
55 "Pause Video" onclick = "toggleVideo( this )" /> MediaPlayer.html
56 </td></tr> (3 of 3)
57 </table>
58 </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"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.6: tutorial.html --> tutorial.html
6 <!-- Microsoft Agent Control --> (1 of 12)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <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"
Outline
26 classid = "CLSID:161FA781-A52C-11d0-8D7C-00A0C9034A7E"
27 codebase = "#VERSION = 4, 0, 0, 0">
28 </object> tutorial.html
29 (2 of 12)
30 <script type = "text/javascript">
31 <!--
32
33 var currentImage = null;
34 var tips =
35 [ "gpp", "seo", "perf", "port",
36 "gui", "ept", "cpe" ];
37 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]",
Outline
51 "Common [Programming Error]" ];
52 var explanations = [
53 // Good Programming Practice text tutorial.html
54 "Good Programming Practices highlight " + (3 of 12)
55 "techniques for writing programs that are " +
56 "clearer, more understandable, more " +
57 "debuggable, and more maintainable.",
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 " +
Outline
76 "interfaces in conformance with industry " +
77 "standards.",
78 tutorial.html
79 // Error-Prevention Tip text (4 of 12)
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.",
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 {
Outline
97 agent.Connected = true;
98 agent.Characters.Load( "Peedy",
99 "C:\\WINNT\\msagent\\chars\\Peedy.acs" ); tutorial.html
100 actor = agent.Characters.Character( "Peedy" ); (5 of 12)
101 actor.LanguageID = 0x0409; // sometimes needed
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" );
Outline
121 actor.Get( "animation", "MoveDown" );
122 actor.Get( "animation", "MoveUp" );
123 actor.Get( "animation", "MoveLeft" ); tutorial.html
124 actor.Get( "animation", "MoveRight" ); (6 of 12)
125 actor.Get( "animation", "GetAttention" );
126 actor.Get( "animation", "GetAttentionReturn" );
127
128 // set up voice commands
129 for ( var i = 0; i < tips.length; ++i )
130 actor.Commands.Add( tips[ i ],
131 tipNames[ i ], voiceTips[ i ], true, true );
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 )
Outline
146 if ( document.images( i ) == tip )
147 tellMeAboutIt( i );
148 } tutorial.html
149 (7 of 12)
150 function voiceSelectTip( cmd )
151 {
152 var found = false;
153
154 for ( var i = 0; i < tips.length; ++i )
155 if ( cmd.Name == tips[ i ] ) {
156 found = true;
157 break;
158 }
159
160 if ( found )
161 tellMeAboutIt( i );
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(
Outline
171 screenLeft + parseInt( spanObject.style.left ) - 18,
172 screenTop + parseInt( spanObject.style.top )- 103 );
173 actor.Speak( explanations[ element ] ); tutorial.html
174 } (8 of 12)
175 // -->
176 </script>
177
178 <script type = "text/javascript" for = "agent"
179 event = "Command( cmd )">
180 <!--
181 voiceSelectTip( cmd );
182 // -->
183 </script>
184
185 <script type = "text/javascript" for = "agent"
186 event = "BalloonShow">
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"
Outline
196 event = "Click">
197 <!--
198 actor.Play( "GetAttention" ); tutorial.html
199 actor.Speak( "Stop poking me with that pointer!" ); (9 of 12)
200 actor.Play( "GetAttentionReturn" );
201 // -->
202 </script>
203 </head>
204
205 <body style = "background-color: lemonchiffon"
206 onload = "loadAgent()">
207 <table border = "0">
208 <tr>
209 <th colspan = "4">
210 <h1 style = "color: blue">
211 Deitel Programming Tips
212 </h1>
213 </th>
214 </tr>
215 <tr>
216 <td align = "center" valign = "top" width = "120">
217 <span id = "gppSpan" style = "position : absolute;
218 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 =
Outline
221 "0" onclick = "imageSelectTip( this )" />
222 Good Programming Practices</span></td>
223 <td align = "center" valign = "top" width = "120"> tutorial.html
224 <span id = "seoSpan" style = "position : absolute; (10 of 12)
225 left : 180; top : 80; width : 130;">
226 <img id = "seo" src = "SEO_100h.gif"
227 alt = "Software Engineering Observation"
228 border = "0"
229 onclick = "imageSelectTip( this )" />
230 Software Engineering Observations</span></td>
231 <td align = "center" valign = "top" width = "120">
232 <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 Performance Tips</span></td>
238 <td align = "center" valign = "top" width = "120">
239 <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.
244 Portability Tips</span></td>
245 </tr>
Outline
246 <tr>
247 <td align = "center" valign = "top" width = "120">
248 <span id = "guiSpan" style = "position : absolute; tutorial.html
249 left : 30; top : 260; width : 130;"> (11 of 12)
250 <img id = "gui" src = "GUI_100h.gif"
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">
255 <span id = "eptSpan" style = "position : absolute;
256 left : 180; top : 260; width : 130;">
257 <img id = "ept" src = "EPT_100h.gif"
258 alt = "Error-Prevention Tip" border =
259 "0" onclick = "imageSelectTip( this )" />
260 Error-Prevention Tips</span></td>
261 <td align = "center" valign = "top" width = "12">
262 <span id = "cpeSpan" style = "position : absolute;
263 left : 330; top : 260; width : 130;">
264 <img id = "cpe" src = "CPE_100h.gif"
265 alt = "Common Programming Error" border =
266 "0" onclick = "imageSelectTip( this )" />
267 Common Programming Errors</span></td>
268 </tr>

 2004 Prentice Hall, Inc.


All rights reserved.
269 </table>
270 <img src = "agent_button.gif" style = "position: absolute;
Outline
271 bottom: 10px; right: 10px" />
272 </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 Description
BalloonHide 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 Description


Properties
Height The height of the character in pixels.
Left The left edge of the character in pixels from the left of the
screen.
Name The default name for the character.
Speed The speed of the character’s speech.
Top The top edge of the character in pixels from the top of the screen.
Width The width of the character in pixels.
Methods
Activate Sets the currently active character when multiple characters
appear on the screen.
GestureAt Specifies that the character should gesture toward a location on
the screen that is specified in pixel coordinates from the upper-
left corner of the screen.
Interrupt Interrupts the current animation. The next animation in the queue
of animations for this character is then displayed.
StopAll Stops all animations of a specified type for the character.
Fig. 28.12 Other properties and methods for the Character object.

 2004 Prentice Hall, Inc. All rights reserved.


28.7  Microsoft Agent Control

Tag Description
\Chr = string\ 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.
\Pau = number\ Pauses speech for number milliseconds.
\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"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.14: StreamingMedia.html --> StreamingMedia
6 <!-- Embedding RealOne Player into an XHTML page --> .html
7 (1 of 3)
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Live Media!</title>
11
12 <script type = "text/javascript">
13 <!--
14 var locations =
15 [ "http://www.noaanews.noaa.gov/video/naturalworld.ram",
16 "http://www.nasa.gov/ram/35037main_.ram"]
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 StreamingMedia
31 <select id = "streamSelect" onchange = .html
32 "change( this.value )"> (2 of 3)
33 <option value = "">Select a station</option>
34 <option value = "0">NOAA</option>
35 <option value = "1">NASA</option>
36 </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>
Outline
52 </html>

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">
2
Outline
3 <!-- Fig. 20.15 : exampleSMIL.smil -->
4 <!-- Example SMIL Document -->
5 exampleSMIL.smil
6 <head> (1 of 3)
7 <layout>
8 <root-layout height = "300" width = "280"
9 background-color = "#bbbbee" title = "Example" />
10
11 <region id = "image1" width = "177" height = "230"
12 top = "35" left = "50" background-color = "#bbbbee" />
13 </layout>
14
15 <transition id = "wipeForward" dur = "2s" type = "barWipe" />
16 <transition id = "wipeBackward" dur = "2s" type = "barWipe"
17 subtype = "topToBottom" />
18
19 <transition id = "fadeIn" dur = "2s" type = "fade"
20 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 <transition id = "crossFade" type = "fade" subtype = "crossfade"
26 dur = "2s" />
Outline
27
28 </head>
29 <body> exampleSMIL.smil
30 <seq> (2 of 3)
31 <par>
32 <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>
Outline
52 <img src = "book4.jpg" region = "image1" transIn = "crossFade"
53 transOut = "fadeOut" alt = "book4" dur = "6s"
54 fit = "fill" fill = "transition" /> exampleSMIL.smil
55 <audio src = "bounce.au" dur = ".5s" /> (3 of 3)
56 </par>
57 <par>
58 <img src = "book5.jpg" region = "image1"
59 transIn = "wipeForward" transOut = "wipeBackward"
60 alt = "book5" dur = "6s" fit = "fill"
61 fill = "transition" />
62 <audio src = "bounce.au" dur = ".5s" />
63 </par>
64 <par>
65 <img src = "book6.jpg" region = "image1"
66 transIn = "crossFade" alt = "book6" dur = "6s"
67 fit = "fill" fill = "transition" />
68 <audio src = "bounce.au" dur = ".5s" />
69 </par>
70 </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"
Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 28.16: SMILexample.html --> SMILexample.html
6 <!-- embedding SMIL with RealOne Player --> (1 of 1)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <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"?>
2
Outline
3 <!-- Fig. 28.17 : shapes.svg -->
4 <!-- Simple example of SVG -->
5 shapes.svg
6 <svg viewBox = "0 0 300 300" width = "300" height = "300"> (1 of 2)
7
8 <!-- Generate a background -->
9 <g>
10 <path style = "fill: #eebb99" d = "M0,0 h300 v300 h-300 z"/>
11 </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 from = "0" to = "1" dur = "6s" />
20 </circle>
21
22 <!-- Rectangle shape and attributes -->
23
24 <rect style = "fill: blue; stroke: white"
25 x = "50" y = "0" width = "100" height = "100">

 2004 Prentice Hall, Inc.


All rights reserved.
26 <animate attributeName = "y" begin = "mouseover" dur = "2s"
27 values = "0; -50; 0; 20; 0; -10; 0; 5; 0; -3; 0; 1; 0" />
Outline
28 </rect>
29
30 <!-- Text value and attributes --> shapes.svg
31 (2 of 2)
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"/>
37 </text>
38 </g>
39 </svg>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
1 <?xml version = "1.0"?>
2
Outline
3 <!-- Fig. 28.18: planet.svg -->
4 <!-- Planetary motion with SVG -->
5 planet.svg
6 <svg viewBox = "-500 -500 1000 1000"> (1 of 2)
7 <g id = "background">
8 <path style = "fill: black"
9 d = "M -2000,-2000 H 2000 V 2000 H -2000 Z" />
10 </g>
11
12 <circle id = "sun" style = "fill: yellow"
13 cx = "0" cy = "0" r = "100" />
14
15 <g>
16 <animateTransform attributeName = "transform"
17 type = "rotate" dur = "80s" from = "0" to = "360"
18 repeatCount = "indefinite" />
19
20 <circle id = "earth" style = "fill: blue"
21 cx = "400" cy = "0" r = "40" />
22
23 <g transform = "translate( 400 0 )">
24 <circle id = "moon" style = "fill: white"
25 cx = "70" cy = "0" r = "10">

 2004 Prentice Hall, Inc.


All rights reserved.
26 <animateTransform attributeName = "transform"
27 type = "rotate" dur = "20s" from = "360"
Outline
28 to = "0" repeatCount = "indefinite" />
29 </circle>
30 </g> planet.svg
31 </g> (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.

You might also like