SSSS - Computer Science
advertisement
1
Multimedia
in
Web Applications
Dr. Awad Khalil
Computer Science Department
AUC
2
Multimedia: Audio, Video, Speech
Synthesis and Recognition
Outline
1
2
3
4
5
6
7
8
9
10
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
RealPlayer Plug-in
Synchronized Multimedia Integration Language (SMIL)
Scalable Vector Graphics (SVG)
3
Introduction
• Multimedia
– Audio, video and interactivity added to desktop applications
• CD-ROMs
• DVD-ROMs
– Audio, video and interactivity added to Web applications
• More limited
• Bandwidth limitations
– Multimedia files can be large
– Created with complex applications
– Added to applications with programming languages
4
Audio and Video
• Adding audio and video to Web applications
– Embed audio and video files
– Stream on-demand files
• File formats
– Video
•
•
•
•
•
MPEG (Moving Pictures Experts Group)
QuickTime
RealPlayer
AVI (Video for Windows)
MJPEG (Motion Joint Photographic Experts Group)
5
Audio and Video
• File formats, cont.
– Audio
•
•
•
•
MP3 (MPEG Layer 3)
MIDI (Musical Instrument Digital Interface)
WAV (Windows Waveform)
AIFF (Audio Interchange File Format) Macintosh only
– Encoding/Compression
•
•
•
•
Uses encoding algorithm (CODEC) to compress media files
Determines media file format
Different encoding formats are ideal for different applications
Encoding applications
– Some available for free on Internet
6
Adding Background sounds with the
bgsound Element
• Add a background sound with the bgsound
element
– Microsoft-specific (Only works in IE)
– Properties
• Src
– Audio source
– <bgsound src = “sound.wav”>
• loop
–
–
–
–
Times the audio clip plays
Positive integers (exact number of times)
Negative (except –1) and zero (plays once)
-1 (Plays until button is pressed)
7
• Add a background sound with the bgsound
element, cont.
– Properties, cont.
• balance
– Balance between left and right speakers
– Between –10000 and 10000
• Volume
– Clip volume (between -10000 and 0)
– bgsound element is placed within <head> tags
8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Fig. 1: BackgroundAudio.html
-->
<!-- Demonstrating the bgsound element -->
Function changeProperties
sets
Specifies media source
the loop and volume properties
<html xmlns = "http://www.w3.org/1999/xhtml">
Reads
new value for loop property
<head><title>The bgsound Element</title>
(called in line 49)
<bgsound id = "audio" src = from form’s loopit text field
Converts value into an integer and
"http://msdn.microsoft.com/downloads/sounds/jazzgos.mid"
sets new property value by assigning
loop = "1"></bgsound>
value to audio.loop
<script type = "text/javascript">
Reads new value for the vol
Converts
thefrom
valuethe
to vol
and text
integer
and
<!-property
field,
function changeProperties()
assigns this value to audio.volume
{
var loop = parseInt( audioForm.loopit.value );
audio.loop = ( isNaN( loop ) ? 1 : loop );
var vol = parseInt( audioForm.vol.value );
audio.volume = ( isNaN( vol ) ? 0 : vol );
}
// -->
</script>
</head>
<body>
<h1>Background Music via the bgsound Element</h1>
<h2>Jazz Gospel</h2>
This sound is from the free sound downloads at the
<a href =
"http://msdn.microsoft.com/downloads/default.asp">
Microsoft Developer Network</a> downloads site.
Outline
BackgroundAudio.
html
Shows how to add sound to
Web document using
bgsound element
9
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<hr />
Use the fields below to change the number of iterations
and the volume for the audio clip<br />
Press <strong>Stop</strong> to stop playing the sound.
<br />Press <strong>Refresh</strong> to begin playing
the sound again.
Outline
BackgroundAudio.
html
<form name = "audioForm" action = "">
<p>Loop [-1 = loop forever]</p>
<input name = "loopit" type = "text" value = "1" />
<br />Volume [-10000 (low) to 0 (high)]
<input name = "vol" type = "text" value = "0" /><br />
<input type = "button" value = "Set Properties"
onclick = "changeProperties()" />
</form>
</body>
</html>
Program Output
Adding Video with the img Element’s
dynsrc Property
• Adding video to a Web page
– img element dynsrc (dynamic source) property
• <img dynsrc=“videofile.wmv”>
– Example
• dynsrc properties
– start
• action that causes the movie to play
– width and height
• define display dimensions
– loop
• How many times the movie plays
– alt
• Alternative content for those who cannot see video
10
11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Fig. 2: Dynamicimg.html
-->
<!-- Demonstrating the img element’s dynsrc property -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>An Embedded Video Using the dynsrc Property</title>
<bgsound src =
Img element uses dynsrc to
"http://msdn.microsoft.com/downloads/sounds/carib.MID"
loop = "-1"></bgsound>
load and display the video
</head>
car_hi.wmv
Start property specifies when
theimg
movie
starts playing
the
element's
<body>
<h1>An Embedded Video Using
dynsrc Property</h1>
<h2>Car and Carribean Music</h2>
<table>
<tr><td><img dynsrc = "car_hi.wmv"
start = "mouseover" width = "180"
height = "135" loop = "-1"
alt = "Car driving in circles" /></td>
<td>This page will play the audio clip and video
in a loop.<br />The video will not begin
playing until you move the mouse over the
video.<br />Press <strong>Stop</strong> to
stop playing the sound and the video.</td>
</tr>
</table>
</body>
</html>
Outline
Dynamicimg.html
Adding video to a Web
page using the img
element dynsource
property
12
Outline
Program Output
Adding Audio and Video with the embed
Element
• embed element
–
–
–
–
–
Embeds audio or video into a Web page
Displays a GUI that controls media clip
Works in both IE and Netscape Communicator
Not part of the XHTML 1.0 recommendation
Example
• Embed a Windows Waveform (WAV) file into the Web page
• Embed properties
– width and height
• Define the GUI control size
– hidden
• Prevents the GUI control from displaying
13
Adding Audio and Video with the embed
Element
• embed element, cont.
– Example
• Embed properties
– width and height
• Define the GUI control size
– hidden
• Prevents the GUI control from displaying Example
• Functions wave and start control wave filter
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Fig. 3: EmbeddedAudio.html
-->
<!-- Background Audio via the embed Element -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Background Audio via the embed Element</title>
<style type = "text/css">
span
{ width: 600 }
.big
{ color: blue;
font-family: sans-serif;
font-size: 50pt;
font-weight: bold }
</style>
<script type = "text/javascript">
<!-var TimerID;
var updown = true;
var str = 1;
function start()
{
TimerID = window.setInterval( "wave()", 100 );
}
function wave()
{
if ( str > 20 || str < 1 )
updown = !updown;
if ( updown )
Outline
EmbeddedAudio.ht
ml
Demonstrates embedding
audio with the embed
element
16
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Outline
str++;
else
str--;
wft.filters( "wave" ).phase = str * 30;
wft.filters( "wave" ).strength = str;
}
// -->
</script>
</head>
EmbeddedAudio.ht
ml
Demonstrates embedding
video with the embed
element
<body onload = "start()">
<h1>Background Audio via the embed Element</h1>
<p>Click the text to stop the script.</p>
Embed element embeds audio
<p class = "big" align = "center">
file humming.wav
<span onclick = "window.clearInterval(
TimerID )"
id = "wft" style = "filter:wave(
add = 0, freq = 3, light = 0, phase = 0, strength = 5)">
WAVE FILTER EFFECT</p></span>
<p>These controls can be used to control the audio.</p>
<embed src = "humming.wav" loop = "true"></embed>
</body>
</html>
17
Outline
Program Output
Play
Pause
Stop
Sound Equalizer
Volume
18
Using the Windows Media Player ActiveX
Control
• Embed Windows Media files in Web pages
– embed element
• Good for Netscape and IE
• Searches for plug-in
• Deprecated in XHTML 1.0
– object element
• Used for ActiveX controls
• Becoming the standard
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
<!-- Fig. 4: EmbeddedVideo.html -->
<!-- Video via the embed Element
-->
EmbeddedVideo.ht
ml
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Video via the embed Element</title>
</head>
Embeds video using the
Embed element
Embeds video file car_hi.wmv
<body>
<h1>Displaying a Video using the embed Element</h1>
<h2>Car Driving in Circles</h2>
<table>
<tr><td><embed src = "car_hi.wmv" loop = "false"
width = "240" height = "176">
</embed></td>
</tr></table>
<hr />
This page plays the video once.<br />
Use the controls on the embedded video player to play the
video again.
</body>
</html>
20
Outline
Program Output
21
Using the Windows Media Player ActiveX
Control
• Embed Windows Media files in Web pages, cont.
– Example
• Embedding audio and video into a Web page using the
object element
• Properties
– width and height elements
• Defines video dimensions
– classid
• ID for ActiveX control
22
Using the Windows Media Player ActiveX
Control
• Embed Windows Media files in Web pages, cont.
– Example
• Parameters
– FileName
• Sets source file
– AutoStart
• Sets whether the user has to initiate play sequence
– ShowControls
• Sets whether the GUI controls display
– Loop
• Sets how many times the media clip plays
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Fig. 5: MediaPlayer.html
--> Script which controls
Media Player
<!-- Embedded Media Player Objects -->
Outline
MediaPlayer.html
Function toggleVideo is the
Embeds a Windows Media
event handler which passes this as
<html xmlns = "http://www.w3.org/1999/xhtml">
File in a Web page using
<head><title>Embedded Media Player
an Objects</title>
argument for the function.
the object element
<script type = "text/javascript">
<!-var videoPlaying = true;
function toggleVideo( b )
Changes button
text
Determines
whether
to call
{
VideoPlayer’s Play or
videoPlaying = !videoPlaying;
Pause methods
b.value = videoPlaying ?
"Pause Video" : "Play Video";
videoPlaying ?
VideoPlayer.Play() : VideoPlayer.Pause();
}
// -->
</script>
</head>
Object creates Media
classid
Player object
for fileproperty
specifies ActiveX control
car_hi.wmv
embedded Media
objects
ID forPlayer
Windows
Media
Player
<body>
<h1>
Audio and video through
</h1>
<hr />
<table>
<tr><td valign = "top" align = "center">
<object id = "VideoPlayer" width = "200" height = "225"
classid =
"CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
24
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<param name = "FileName" value =
"car_hi.wmv" />
<param name = "AutoStart" value = "true" />
<param name = "ShowControls" value = "false" />
<param name = "Loop" value = "true" />
</object></td>
<td valign = "bottom" align = "center">
<p>Use the controls below to control the audio clip.</p>
<object id = "AudioPlayer"
classid =
"CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<param name = "FileName" value =
"http://msdn.microsoft.com/downloads/sounds/carib.mid" />
<param name = "AutoStart"Object
value = element
"true" embeds
/>
another
<param name = "Loop" value = "true" />
Media Player
object which
plays
Parameters
passed
to
</object></td></tr>
MIDI file carib.mid
control in Web page
<tr><td valign = "top" align = "center">
<input name = "video" type = "button" value =
"Pause Video" onclick = "toggleVideo( this )" />
</td></tr>
</table>
</body>
</html>
Outline
MediaPlayer.html
Embeds a Windows Media
File in a Web page using
the object element
25
Outline
Program Output
26
Microsoft® Agent Control
• MSAgent
– Interactive, animated characters
• Use in Windows application or Web page
• Agent characters
– Developed by Microsoft or third parties
• Microsoft Agent Character Editor
• Users interact with these characters using speech input or
keyboard strokes
– Speech recognition
– Text-to-speech (TTS) engine ActiveX control
– Downloads
• www.microsoft.com/products/msagent/downloads.htm
27
Microsoft® Agent Control
• MSAgent, cont.
– Example
•
•
•
•
•
Peedy character responds to user voice input
Peedy then speaks response
Embeds MSAgent ActiveX control
Embeds Lernout and Hauspie TTS Engine ActiveX control
Embeds Microsoft Speech Recognition Engine ActiveX
control
28
Microsoft® Agent Control
• MSAgent, cont.
– Example, cont.
• Functions
– loadAgent
• Loads Peedy character
• Retrieves Peedy’s movement states
– imageSelectTip
• Terminates current animation
• Determines which icon the user clicked
– voiceSelectTip
• Selects a tip for Peedy to read
– tellMeAboutIt
• Changes icon background to red
• Moves Peedy to the correct image which corresponds
to tip
29
Microsoft® Agent Control
• MSAgent, cont.
– Example, cont.
• Character data
– Variable actor
• character object
• get method retrieves character states
– Showing
– Speaking
– Hiding
– Greet
– MoveTo
– Idling
– MoveUp, MoveDown, MoveRight, MoveLeft
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Embeds an instance of Microsoft
control. Gives scripting name
agent via id property
<html xmlns = "http://www.w3.org/1999/xhtml">
Codebase attribute specifies
<head>
download version of ActiveX control
<title>Speech Recognition</title>
<!-- Fig. 6: tutorial.html -->
<!-- Microsoft Agent Control --> ActiveX
<!-- Microsoft Agent ActiveX Control -->
Embeds= instance
of Lernout and
<object id = "agent" width = "0" height
"0"
classid = "CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F"
Hauspie TruVoice TTS engine
codebase = "#VERSION = 2, 0, 0, 0">
</object>
<!-- Lernout & Hauspie TruVoice text to speech engine -->
<object width = "0" height Embeds
= "0" Microsoft Speech Recognition
classid = "CLSID:B8F2846E-CE36-11D0-AC83-00C04FD97575"
engine control in a Web page
codebase = "#VERSION = 6, 0, 0, 0">
</object>
<!-- Microsoft Speech Recognition Engine -->
<object width = "0" height = "0"
classid = "CLSID:161FA781-A52C-11d0-8D7C-00A0C9034A7E"
codebase = "#VERSION = 4, 0, 0, 0">
</object>
<script type = "text/javascript">
<!-var currentImage = null;
var tips =
[ "gpp", "seo", "perf", "port",
Outline
Tutorial.html
Uses Microsoft Agent
ActiveX control. Peedy
character appears and
describes each
programming tip when the
user clicks on it or speaks
the tip name into the
microphone.
31
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
"gui", "dbt", "cpe" ];
var tipNames = [
"Good Programming Practice",
"Software Engineering Observation",
"Performance Tip", "Portability Tip",
"Look-and-Feel Observation",
"Testing and Debugging Tip",
"Common Programming Error" ];
var voiceTips = [
"Good [Programming Practice]",
Arrays which contain
"Software [Engineering Observation]",
"Performance [Tip]",
that Peedy speaks
"Portability [Tip]",
"Look-and-Feel [Observation]",
"Testing [and Debugging Tip]",
"Common [Programming Error]" ];
var explanations = [
// Good Programming Practice text
"Good Programming Practices highlight " +
"techniques for writing programs that are " +
"clearer, more understandable, more " +
"debuggable, and more maintainable.",
// Software Engineering Observation text
"Software Engineering Observations highlight " +
"architectural and design issues that affect " +
"the construction of complex software systems.",
// Performance Tip text
"Performance Tips highlight opportunities for " +
"improving program performance.",
// Portability Tip text
"Portability Tips help students write portable " +
"code that can execute in different Web browsers.",
Outline
Tutorial.html
text
Uses Microsoft Agent
ActiveX control. Peedy
character appears and
describes each
programming tip when the
user clicks on it or speaks
the tip name into the
microphone.
32
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
// Look-and-Feel Observation text
"Look-and-Feel Observations highlight graphical " +
"user interface conventions. These observations " +
"help students design their own graphical user " +
"interfaces in conformance with industry " +
"standards.",
// Testing and Debugging Tip text
"Testing and Debugging Tips tell people how to " +
"test and debug their programs. Many of the " +
"tips also describe aspects of creating Web " +
"pages and scripts that reduce the likelihood " +
"of 'bugs' and thus simplify the testing and " +
"debugging process.",
// Common Programming Error text
"Common Programming Errors focus the students' " +
"attention on errors commonly made by beginning " +
"programmers. This helps students avoid making " +
Character
object
Method
takes" +
loadAgent
"the same errors. It also helpsFunction
reduce Load
the
long
receives
name
used
to
"lines outside instructors' offices
"the
+actor
arguments
for
character
loads
agent
character
Globalduring
variable
Uses
"office hours!" ];
download
characterofdata
name MSAgent’s
and location
the as
references
Peedy
Sets
Character’s
Characters
collection
its
argument
character’s
dataobject
file to
Character
function loadAgent()
LanguageID
property
load information for Peedy
{
to 0x0409 (English)
agent.Characters.Load( "Peedy",Get method downloads
"C:\\WINNT\\msagent\\chars\\Peedy.acs" );
states "Peedy"
for the character
actor = agent.Characters.Character(
);
actor.LanguageID = 0x0409; // sometimes needed
// get states from server
actor.Get( "state", "Showing" );
actor.Get( "state", "Speaking" );
actor.Get( "state", "Hiding" );
Outline
Tutorial.html
Uses Microsoft Agent
ActiveX control. Peedy
character appears and
describes each
programming tip when the
user clicks on it or speaks
the tip name into the
microphone.
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
33
Outline
Get method loads
// get Greet animation and do Peedy introduction
Greet
animation
actor.Get( "animation", "Greet" ); Speak
method
makes
Play
method
plays
actor.MoveTo( screenLeft, screenTopShow
- 100method
);
displays
character
speak
string
Greet animation in
actor.Show();
the method
character
argument
actor.Play( "Greet" );
MoveTo
specifies
actor.Speak( "Hello. " +
Peedy’s
positiona on
the screen
"If you would like me to tellLoads
you about
" +
set of Idling
"programming tip, click its icon,Loads
or, press
" +
the animations
animations
Peedy
performs
"the 'Scroll Lock' key, and speak
the
name
"
+
for moving Peedy
when user
"of the tip, into your microphone."
); is not interacting
// get other animations
actor.Get( "animation",
actor.Get( "animation",
actor.Get( "animation",
actor.Get( "animation",
actor.Get( "animation",
actor.Get( "animation",
actor.Get( "animation",
}
"Idling" );
"MoveDown" );
"MoveUp" );
"MoveLeft"
);
voiceTips
array
Caption
property
"MoveRight" );
contains);
words
or phrases
specifies
text that
"GetAttention"
"GetAttentionReturn"
users can speak
describes
voice);for this
Tutorial.html
Uses Microsoft Agent
ActiveX control. Peedy
character appears and
describes each
programming tip when the
user clicks on it or speaks
the tip name into the
microphone.
Voice
property
specifies
Visible
property
command
set
// set up voice commands
text
that appears in Voice
Function
specifies
for ( var i = 0; i < tips.length;
++i ) whether the
Commands
window
imageSelectTip
For structure
determines
actor.Commands.Add( tips[ i ],
commands
should
appear in
tipNames[ i ], voiceTips[ determines
i
],
true,
true
);
For
structure
uses
Add method to
particular
which
image
user
clicked
the pop-up
menu
(boolean)
If
the image
equal
user-selected
imageiscommand
register
eachindex
voice
actor.Commands.Caption = "Programming
Tips";
to
theTips";
tip
number
function
Determines
index
based
on this
passed
actor.Commands.Voice = "Programming
tellMeAboutIt
actor.Commands.Visible = true; by
of clicked
image (lines
img element
158-166) is called
function imageSelectTip( tip )
{
for ( var i = 0; i < document.images.length; ++i )
if ( document.images( i ) == tip )
34
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
Outline
tellMeAboutIt( i );
}
function voiceSelectTip( cmd )
{
var found = false;
If the image index is equal to
the tip number calls function
tellMeAboutIt (lines 158166) Passes i as the argument
for ( var i = 0; i < tips.length; ++i )
if ( cmd.Name == tips[ i ] ) {
found = true;
break;
}
Assigns global variable
currentImage
reference changes
to the clicked
Function
color of
}
img element
function tellMeAboutIt( element ) Invokes MoveTo method
{
position);Peedy above
currentImage = document.images(toelement
Speak
method makes
currentImage.style.background =clicked
"red";image
actor.MoveTo(
Peedy
speak the text stored
Function
voiceSelectTip
currentImage.offsetParent.offsetLeft,
strings in
the
uses as
command
For
currentImage.offsetParent.offsetTop
+ name
30 );from
Command
event
handler
explanations
array
actor.Speak( explanations[ structure
element
] ); after
(lines
148-152)
to
executes
receiving
}
determine
of command in
voice index
command
// -->
commands object
</script>
Value is passed to function
tellMeAboutIt (line
<script type = "text/javascript" for = "agent"
158)
event = "Command( cmd )">
if ( found )
tellMeAboutIt( i );
<!-voiceSelectTip( cmd );
// -->
</script>
Tutorial.html
Uses Microsoft Agent
ActiveX control. Peedy
character appears and
describes each
programming tip when the
user clicks on it or speaks
the tip name into the
microphone.
35
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<script type = "text/javascript" for = "agent"
event = "BalloonHide">
<!-if ( currentImage != null ) {
currentImage.style.background = "lemonchiffon";
currentImage = null;
}
Invoke script for agent
// -->
</script>
control in response to
text balloon
<script type = "text/javascript" for =hiding
"agent"
event = "Click">
<!-actor.Play( "GetAttention" );
actor.Speak( "Stop poking me with that pointer!" );
actor.Play( "GetAttentionReturn" );
// -->
Invokes script for agent
</script>
</head>
control if user clicks Peedy
<body style = "background-color: lemonchiffon"
onload = "loadAgent()">
<table border = "0">
<tr>
<th colspan = "4">
<h1 style = "color: blue">
Deitel Programming Tips
</h1>
</th>
</tr>
<tr>
<td align = "center" valign = "top" width = "120">
<img id = "gpp" src = "GPP_100h.gif"
alt = "Good Programming Practice" border =
Outline
Tutorial.html
Uses Microsoft Agent
ActiveX control. Peedy
character appears and
describes each
programming tip when the
user clicks on it or speaks
the tip name into the
microphone.
36
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
"0" onclick = "imageSelectTip( this )" />
<br />Good Programming Practices</td>
<td align = "center" valign = "top" width = "120">
<img id = "seo" src = "SEO_100h.gif"
alt = "Software Engineering Observation"
border = "0"
onclick = "imageSelectTip( this )" />
<br />Software Engineering Observations</td>
<td align = "center" valign = "top" width = "120">
<img id = "perf" src = "PERF_100h.gif"
alt = "Performance Tip" border = "0"
onclick = "imageSelectTip( this )" />
<br />Performance Tips</td>
<td align = "center" valign = "top" width = "120">
<img id = "port" src = "PORT_100h.gif"
alt = "Portability Tip" border = "0"
onclick = "imageSelectTip( this )" />
<br />Portability Tips</td>
</tr>
<tr>
<td align = "center" valign = "top" width = "120">
<img id = "gui" src = "GUI_100h.gif"
alt = "Look-and-Feel Observation" border =
"0" onclick = "imageSelectTip( this )" />
<br />Look-and-Feel Observations</td>
<td align = "center" valign = "top" width = "120">
<img id = "dbt" src = "DBT_100h.gif"
alt = "Testing and Debugging Tip" border =
"0" onclick = "imageSelectTip( this )" />
<br />Testing and Debugging Tips</td>
<td align = "center" valign = "top" width = "120">
<img id = "cpe" src = "CPE_100h.gif"
alt = "Common Programming Error" border =
"0" onclick = "imageSelectTip( this )" />
<br />Common Programming Errors</td>
Outline
Tutorial.html
Uses Microsoft Agent
ActiveX control. Peedy
character appears and
describes each
programming tip when the
user clicks on it or speaks
the tip name into the
microphone.
37
246
247
248
249
250
251
</tr>
</table>
<img src = "agent_button.gif" style = "position: absolute;
bottom: 10px; right: 10px" />
</body>
</html>
Outline
Tutorial.html
Program Output
38
Outline
Program Output
39
Microsoft® Agent Control
Fig. 33.7 Peedy finishing introduction.
Fig. 33.8 Peedy ready to receive voice commands.
40
Microsoft® Agent Control
Fig. 33.9 Peedy receiving voice command.
Fig. 33.10 Peedy discussing Good Programming Practice.
41
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. 33.11 O ther events for the Mic rosoft Ag ent c ontrol.
42
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. 33.12 O ther p rop erties a nd method s for the Character ob jec t.
43
Microsoft® Agent Control
Ta g
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. 33.13 Sp eec h outp ut ta g s.
44
RealPlayer™ Plug-in
• RealPlayer media player
– Plays audio and video files
• Streams
– Example
• Users select from audio sources
• Embeds RealPlayer into Web page
45
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Fig. 14: real.html
-->
<!-- Embedding RealPlayer into an XHTML page -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Live Audio!</title>
<script type = "text/javascript">
locations array contains
<!-URLs
for live method
audio
var locations =
SetSource
[ "http://www.cnn.com/video/audio/cnn.ram",
change
function
called by
sets
source
URL based
"http://www.real.com/showcase/kingredir.ram",
on
locations
onchange
(line 33)
"http://radio.onlinemusic.com/play/"
+ eventarray
DoPlayPause
method
"jazzsummit.com/rm" ]
toggles between playing an
stream
function change( loc )
pausing the
{
raControl.SetSource( locations[ loc ] );
raControl.DoPlayPause();
}
// -->
</script>
</head>
<body>
Select menu
<p>Pick from my favorite audio streams:
<select id = "streamSelect" onchange =
"change( this.value )">
<option value = "">Select a station</option>
Outline
Real.html
Demonstrates streaming audio
in a Web page by embedding
RealPlayer object with the
embed element.
Users can select from several
audio sources which invoke
RealPlayer methods.
46
36
37
38
39
40
41
42
43
44
45
46
47
48
<option value = "0">CNN</option> embed element
type attribute specifies
<option value = "1">KING-FM</option>
embeds
RealPlayer
width
and
height
<option value = "2">Jazz Summit</option>
MIME type
of
embedded
</select></p>
plug-in
into
the
controls
attribute
attributes define size of
file (MIME type for
autoStart
attribute
Web
page
specifies
which
player
Stations
from
which
player
controls
streaming
audio.)
determines
whether audio
controls
display
= "raControl" src = ""
the
user selects
"audio/x-pn-realaudio-plugin"
width
= "275"
begins
playing
when page
= "125" controls = "Default"
opens
Outline
Real.html
<br />
<embed id
type =
height
autostart = "false" />
</body>
</html>
Program Output
Image of RealPlayer playing the
selected audio stream. Run the
example to see this live.
47
Synchronized Multimedia Integration
Language (SMIL)
• SMIL (“smile”)
– XML-based language
– Synchronizes audio, video, static text and dynamic text
– SMIL document
• Specifies source URL and multimedia element presentation
• Uses time references
– Rendered with RealPlayer or Quicktime
48
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<smil>
head
element
contains
information
root-layout
element
element
layout
element
sets
<!-- Fig. 15: example1.smil -->
for
setting
up the
document
<!-- Example SMIL Document
-->
sets
document
size,
color
layout
attributes
forand
thetitle
width
and height
attributes
top
background-color
and left
attributesattribute
set
regiondocument
element sets a
thebackground
region
sizecolor
region’s
setsspecify
region’s
relative
position
region for displaying objects
<head>
<layout>
<root-layout height = "300" width = "280"
background-color = "#bbbbee" title = "Example" />
seq
element
setschild
<region id = "image1" width = "177"
height
= "230"
par
element
sets
top = "35" left = "50" background-color
=
child
elements
to
elements
to
execute
fit attribute
sets
how
the
image
"#ffffff" />
img
element
references
execute
sequentially
region
attribute
specifies
</layout>
appears
insimultaneously
the region.
fill
value
image
source
(src)
and
dur
attribute
describes
how
</head>
audio
element
provides
region
in to
which
image
displays
sets the
image
filltext
the
region.
alternative
(alt)
long
image
appears
on screen
<body>
audio source that plays when
<seq>
the image displays
<par>
<img src = "book1.jpg" region = "image1"
alt = "book 1" dur = "1s" fit = "fill" />
<audio src = "bounce.au" dur = ".5s" />
</par>
<par>
<img src = "book2.jpg" region = "image1"
alt = "book 2" dur = "1s" fit = "fill" />
<audio src = "bounce.au" dur = ".5s" />
</par>
<par>
<img src = "book3.jpg" region = "image1"
alt = "book 3" dur = "1s" fit = "fill" />
<audio src = "bounce.au" dur = ".5s" />
</par>
Outline
Example1.smil
Displays JPEG images
sequentially with sound.
Document can be
displayed by embedding
RealPlayer into XHTML.
49
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<par>
<img src = "book4.jpg" region = "image1"
alt = "book4" dur = "1s" fit = "fill" />
<audio src = "bounce.au" dur = ".5s" />
</par>
<par>
<img src = "book5.jpg" region = "image1"
alt = "book5" dur = "1s" fit = "fill" />
<audio src = "bounce.au" dur = ".5s" />
</par>
<par>
<img src = "book6.jpg" region = "image1"
alt = "book6" dur = "1s" fit = "fill" />
<audio src = "bounce.au" dur = ".5s" />
</par>
</seq>
</body>
</smil>
Outline
Example1.smil
50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version = "1.0"?>
src
attribute set
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to location of
<!-- Fig. 16: example1.html
-->
<!-- embedding SMIL with RealPlayer -->
SMIL document.
controls attribute set to
ImageWindow so controls
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
are hidden from user
<title>Embedding SMIL with Real Player</title>
type sets RealPlayer plug-in to
</head>
display the SMIL document
<body>
Outline
Example1.html
Embeds previous SMIL
document and displays it
with RealPlayer.
<div style = "text-align: center">
<embed src = "example1.smil"
controls = "ImageWindow"
type = "audio/x-pn-realaudio-plugin"
width = "280" height = "300" autostart = "true">
</embed></div>
</body>
</html>
Program Output
51
Scalable Vector Graphics (SVG)
• SVG markup language
– Scalable Vector Graphics (SVG) is an exciting new XMLbased language for Web graphics from the World Wide Web
Consortium (W3C). This area was created to give Web
developers and designers a taste of developing sites with
SVG. Describes vector graphic data for bitmap file formats
(JPEG, GIF and PNG)
• Increases portability
• Resize without image quality loss
• Vector graphics describe these images mathematically
– SVG is an XML application
• SVG documents can be scripted, searched and dynamically
created.
– Need Adobe SVG plug-in (www.adobe.com/svg) to view
• Netscape Communicator and IE will have support in future
52
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Outline
width
and height
attributes
viewBox
sets viewing
Root
element
for SVG
document
specify
display
dimensions
area
for document
<!-- Fig. 17: shapes.svg -->
g element
groups elements
<!-- Simple example of SVG -->
h property
thatuses
next
Shapes.svg
insets
an specifies
SVG
document
property
z propertystyle
path
to
connect
the
element
creates
apoint
box
point
ispath
horizontal
tofill
current
d
attribute
defines
<svg viewBox = "0 0 300 300" width first
= "300"
height
= "300">
vand
property
specifies
that
next
CSS
property
tothe
fill
last
points,
closing
box
M
property
specifies
starting
corner
points
ofthe
thepath
box
point is
vertical
toof
previous
point Displays simple shapes of
box
with
color
coordinates
<!-- generate a background -->
<?xml version="1.0"?>
<g>
<path style = "fill: #eebb99"
d = "M0,0 h300 v300 h-300
z" /> element
circle
elementcreates
createsa arectangle.
circle with
rect
</g>
center at cx, cy. r is the radius.
<!-- some shapes and colors
<g>
x,ytext
is the element
upper-left
corner.
width
creates
text.
x,y is
--> and height set the dimensions.
the upper-left corner. style
attribute sets the text format.
<circle style = "fill: green; fill-opacity: 0.5"
cx = "150" cy = "150" r = "50" />
<rect style = "fill: blue; stroke: white"
x = "50" y = "50" width = "100" height = "100" />
<text style = "fill: red; font-size: 24pt"
x = "25" y = "250">Welcome to SVG!</text>
</g>
</svg>
varying colors in a
browser.
53
Outline
Program Output
54
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version = "1.0"?>
animateTransform
element
Creates background
box
changes parent element’s
attribute
specified
in attribute
Creates
yellow circle
for sun.
<svg viewBox = "-500 -500 1000 1000">
type
attribute
defines
property
attributeName.
Center at (0,0) and radius 100.
<g id = "background">
g
dur
element
attribute
groups
setsthe
thecircles
time it
of
changing
attribute
<path style = "fill: black"
from
and
to
set
the
initial
and
d = "M -2000,-2000 H 2000 V 2000
H to
-2000
Z"transition
/>
representing
takes
makethe
Earth and
from
Moon.
</g>
final to
transformation
initial
final
values. values
Attribute
repeatCount
<!-- Fig. 18: planet.svg
-->
<!-- Planetary motion with SVG -->
<circle id = "sun" style = "fill: yellow"
setscircle
number defines
of timesshape
to
cx = "0" cy = "0" r = "100" />
perform
transformation
and color
of Earth.
g element groups the
<g>
translates
<animateTransform attributeName = transform
"transform"
Moon circle
element
type = "rotate" dur = "80s" from
=
"0"
to
=
"360"
(shifts)
element
400 px to
withgroup
the Earth
circle
repeatCount = "indefinite" /> animateTransform is child
the element
right, centering the group on
element
Moon circle,
theblue"
Earthofcircle
<circle id = "earth" style = "fill:
cx = "400" cy = "0" r = "40" />rotates Moon circle 360
degrees CCW around the Earth
<g transform = "translate( 400 0 )">
circle ever 20 secs.
<circle id = "moon" style = "fill: white"
cx = "70" cy = "0" r = "10">
<animateTransform attributeName = "transform"
type = "rotate" dur = "20s" from = "360"
to = "0" repeatCount = "indefinite" />
</circle>
</g>
</g>
</svg>
Outline
Planet.svg
Simulates the Earth and
Moon rotating around the
Sun.
55
Outline
Program Output
