2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 33 - Multimedia: Audio, Video, Speech...

2001 Prentice Hall, Inc. All rights reserved.

1

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

Outline33.1 Introduction33.2 Audio and Video33.3 Adding Background Sounds with the bgsound Element33.4 Adding Video with the img Element’s dynsrc Property33.5 Adding Audio or Video with the embed Element33.6 Using the Windows Media Player ActiveX Control33.7 Microsoft Agent Control33.8 RealPlayer Plug-in33.9 Synchronized Multimedia Integration Language (SMIL)33.10 Scalable Vector Graphics (SVG)


2

33.1 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


3

33.2 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)


4

33.2 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


5

33.3 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)


6

• 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

2001 Prentice Hall, Inc.All rights reserved.

Outline7

BackgroundAudio.html

Shows how to add sound to Web document using bgsound element

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 6 7 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 25 </script> 26 </head>27 28 <body>29 <h1>Background Music via the bgsound Element</h1>30 <h2>Jazz Gospel</h2>31 32 This sound is from the free sound downloads at the 33 <a href = 34 "http://msdn.microsoft.com/downloads/default.asp">35 Microsoft Developer Network</a> downloads site.

Function changeProperties sets the loop and volume properties (called in line 49)

Specifies media source

Reads new value for loop property from form’s loopit text fieldConverts value into an integer and sets new property value by assigning value to audio.loop

Reads new value for the vol property from the vol text field, Converts the value to and integer and

assigns this value to audio.volume


Outline8

BackgroundAudio.html

Program Output

36 <hr />37 Use the fields below to change the number of iterations38 and the volume for the audio clip<br />39 Press <strong>Stop</strong> to stop playing the sound.40 <br />Press <strong>Refresh</strong> to begin playing 41 the sound again.42 43 <form name = "audioForm" action = "">44 <p>Loop [-1 = loop forever]</p>45 <input name = "loopit" type = "text" value = "1" />46 <br />Volume [-10000 (low) to 0 (high)] 47 <input name = "vol" type = "text" value = "0" /><br />48 <input type = "button" value = "Set Properties" 49 onclick = "changeProperties()" />50 </form>51 </body>52 </html>


9

33.4 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

Outline10

Dynamicimg.html

Adding video to a Web page using the img element dynsource property

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 6 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 26 in a loop.<br />The video will not begin 27 playing until you move the mouse over the 28 video.<br />Press <strong>Stop</strong> to 29 stop playing the sound and the video.</td>30 </tr>31 </table>32 </body>33 </html>

Start property specifies when the movie starts playing

Img element uses dynsrc to load and display the video car_hi.wmv


Outline11

Program Output


12

33.5 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

33.5 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

Outline14

EmbeddedAudio.html

Demonstrates embedding audio with the embed element

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 6 7 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 25 function start()26 { 27 TimerID = window.setInterval( "wave()", 100 );28 }29 30 function wave()31 {32 if ( str > 20 || str < 1 ) 33 updown = !updown;34 35 if ( updown )


Outline15

EmbeddedAudio.html

Demonstrates embedding video with the embed element

36 str++;37 else38 str--;39 40 wft.filters( "wave" ).phase = str * 30;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 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 </body>60 </html>

Embed element embeds audio file humming.wav


Outline16

Program Output

VolumeSound EqualizerPlay Pause Stop


17

33.6 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

Outline18

EmbeddedVideo.html

Embeds video using the Embed element

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 6 7 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 />23 This page plays the video once.<br />24 Use the controls on the embedded video player to play the 25 video again. 26 </body>27 </html>

Embeds video file car_hi.wmv


Outline19

Program Output


20


• 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


21


• 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

Outline22

MediaPlayer.html

Embeds a Windows Media File in a Web page using the object element

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 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head><title>Embedded Media Player Objects</title>10 <script type = "text/javascript">11 23 </script>24 </head>25 26 <body>27 <h1>28 Audio and video through embedded Media Player objects29 </h1>30 <hr />31 <table>32 <tr><td valign = "top" align = "center">33 <object id = "VideoPlayer" width = "200" height = "225"34 classid = 35 "CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">

Object creates Media Player object for file car_hi.wmvclassid property

specifies ActiveX control ID for Windows Media Player

Script which controls Media PlayerFunction toggleVideo is the event handler which passes this as an argument for the function.

Changes button textDetermines whether to call VideoPlayer’s Play or Pause methods


Outline23

MediaPlayer.html

Embeds a Windows Media File in a Web page using the object element

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" />51 </object></td></tr>52 53 <tr><td valign = "top" align = "center">54 <input name = "video" type = "button" value = 55 "Pause Video" onclick = "toggleVideo( this )" />56 </td></tr>57 </table>58 </body>59 </html>

Parameters passed to control in Web page

Object element embeds another Media Player object which plays MIDI file carib.mid


Outline24

Program Output


25

33.7 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


26


• 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


27


• 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


28


• 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

Outline29

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.

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 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Speech Recognition</title>11 12  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  19 <object width = "0" height = "0"20 classid = "CLSID:B8F2846E-CE36-11D0-AC83-00C04FD97575"21 codebase = "#VERSION = 6, 0, 0, 0">22 </object> 23 24  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 <script type = "text/javascript">31 <!--32 33 var currentImage = null; 34 var tips = 35 [ "gpp", "seo", "perf", "port",

Embeds an instance of Microsoft ActiveX control. Gives scripting name agent via id property

Embeds instance of Lernout and Hauspie TruVoice TTS engine

Codebase attribute specifies download version of ActiveX control

Embeds Microsoft Speech Recognition engine control in a Web page


Outline30

Tutorial.html


36 "gui", "dbt", "cpe" ];37 var tipNames = [ 38 "Good Programming Practice", 39 "Software Engineering Observation", 40 "Performance Tip", "Portability Tip", 41 "Look-and-Feel Observation", 42 "Testing and Debugging Tip", 43 "Common Programming Error" ];44 var voiceTips = [ 45 "Good [Programming Practice]", 46 "Software [Engineering Observation]", 47 "Performance [Tip]", 48 "Portability [Tip]", 49 "Look-and-Feel [Observation]", 50 "Testing [and Debugging Tip]", 51 "Common [Programming Error]" ];52 var explanations = [ 53 // Good Programming Practice text54 "Good Programming Practices highlight " + 55 "techniques for writing programs that are " +56 "clearer, more understandable, more " +57 "debuggable, and more maintainable.",58 59 // Software Engineering Observation text60 "Software Engineering Observations highlight " +61 "architectural and design issues that affect " +62 "the construction of complex software systems.",63 64 // Performance Tip text65 "Performance Tips highlight opportunities for " + 66 "improving program performance.", 67 68 // Portability Tip text69 "Portability Tips help students write portable " +70 "code that can execute in different Web browsers.",

Arrays which contain text that Peedy speaks


Outline31

Tutorial.html


71 72 // Look-and-Feel Observation text 73 "Look-and-Feel Observations highlight graphical " +74 "user interface conventions. These observations " + 75 "help students design their own graphical user " +76 "interfaces in conformance with industry " + 77 "standards.",78 79 // Testing and Debugging Tip text 80 "Testing and Debugging 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 95 function loadAgent() 96 {97 agent.Characters.Load( "Peedy", 98 "C:\\WINNT\\msagent\\chars\\Peedy.acs" );99 actor = agent.Characters.Character( "Peedy" );100 actor.LanguageID = 0x0409; // sometimes needed101 102 // get states from server103 actor.Get( "state", "Showing" );104 actor.Get( "state", "Speaking" );105 actor.Get( "state", "Hiding" );

Global variable actor references Peedy Character objectSets Character’s LanguageID property to 0x0409 (English)

Uses MSAgent’s Characters collection to load information for Peedy

Method Load takes arguments for the character name and location of the character’s data file

Character object receives name used to download character data as its argument

Function loadAgent loads agent character

Get method downloads states for the character


Outline32

Tutorial.html


106 107 // get Greet animation and do Peedy introduction108 actor.Get( "animation", "Greet" ); 109 actor.MoveTo( screenLeft, screenTop - 100 );110 actor.Show();111 actor.Play( "Greet" );112 actor.Speak( "Hello. " +113 "If you would like me to tell you about a " +114 "programming tip, click its icon, or, press " +115 "the 'Scroll Lock' key, and speak the name " +116 "of the tip, into your microphone." );117 118 // get other animations119 actor.Get( "animation", "Idling" ); 120 actor.Get( "animation", "MoveDown" );121 actor.Get( "animation", "MoveUp" );122 actor.Get( "animation", "MoveLeft" );123 actor.Get( "animation", "MoveRight" );124 actor.Get( "animation", "GetAttention" );125 actor.Get( "animation", "GetAttentionReturn" );126 127 // set up voice commands128 for ( var i = 0; i < tips.length; ++i )129 actor.Commands.Add( tips[ i ], 130 tipNames[ i ], voiceTips[ i ], true, true );131 132 actor.Commands.Caption = "Programming Tips";133 actor.Commands.Voice = "Programming Tips";134 actor.Commands.Visible = true; 135 }136 137 function imageSelectTip( tip )138 {139 for ( var i = 0; i < document.images.length; ++i ) 140 if ( document.images( i ) == tip )

Get method loads Greet animation

MoveTo method specifies Peedy’s position on the screen

Show method displays the character

Play method plays Greet animation

Speak method makes character speak string in argument

Loads set of Idling animations Peedy performs when user is not interacting

Loads the animations for moving Peedy

voiceTips array contains words or phrases users can speak for this command

Caption property specifies text that describes voice command setVoice property specifies text that appears in Voice Commands window

Visible property specifies whether the commands should appear in the pop-up menu (boolean)For structure uses Add method to register each voice command

For structure determines which image user clicked

Determines index of clicked image

If the image index is equal to the tip number function tellMeAboutIt (lines 158-166) is called

Function imageSelectTip determines particular user-selected image based on this passed by img element

Outline33

Tutorial.html


141 tellMeAboutIt( i );142 }143 144 function voiceSelectTip( cmd )145 {146 var found = false; 147 148 for ( var i = 0; i < tips.length; ++i ) 149 if ( cmd.Name == tips[ i ] ) {150 found = true; 151 break;152 }153 154 if ( found )155 tellMeAboutIt( i );156 }157 158 function tellMeAboutIt( element )159 {160 currentImage = document.images( element );161 currentImage.style.background = "red"; 162 actor.MoveTo( 163 currentImage.offsetParent.offsetLeft, 164 currentImage.offsetParent.offsetTop + 30 );165 actor.Speak( explanations[ element ] );166 }167 // -->168 </script>169 170 <script type = "text/javascript" for = "agent" 171 event = "Command( cmd )"> 172 175 </script>

If the image index is equal to the tip number calls function tellMeAboutIt (lines 158-166) Passes i as the argument

Assigns global variable currentImage reference to the clicked img elementFunction changes color of img elementInvokes MoveTo method to position Peedy above clicked imageSpeak method makes Peedy speak the text stored as strings in the explanations arrayCommand event handler executes after receiving voice command

Function voiceSelectTip uses command name from For structure (lines 148-152) to determine index of command in commands objectValue is passed to function

tellMeAboutIt (line 158)

Outline34

Tutorial.html


176 177 <script type = "text/javascript" for = "agent" 178 event = "BalloonHide">179 185 </script>186 187 <script type = "text/javascript" for = "agent" 188 event = "Click">189 194 </script>195 </head>196 197 <body style = "background-color: lemonchiffon" 198 onload = "loadAgent()">199 <table border = "0">200 <tr>201 <th colspan = "4">202 <h1 style = "color: blue">203 Deitel Programming Tips204 </h1>205 </th>206 </tr>207 <tr> 208 <td align = "center" valign = "top" width = "120">209 <img id = "gpp" src = "GPP_100h.gif" 210 alt = "Good Programming Practice" border =

Invokes script for agent control if user clicks Peedy

Invoke script for agent control in response to hiding text balloon


Outline35

Tutorial.html


211 "0" onclick = "imageSelectTip( this )" />212 <br />Good Programming Practices</td>213 <td align = "center" valign = "top" width = "120">214 <img id = "seo" src = "SEO_100h.gif" 215 alt = "Software Engineering Observation" 216 border = "0" 217 onclick = "imageSelectTip( this )" />218 <br />Software Engineering Observations</td>219 <td align = "center" valign = "top" width = "120">220 <img id = "perf" src = "PERF_100h.gif" 221 alt = "Performance Tip" border = "0"222 onclick = "imageSelectTip( this )" />223 <br />Performance Tips</td> 224 <td align = "center" valign = "top" width = "120">225 <img id = "port" src = "PORT_100h.gif" 226 alt = "Portability Tip" border = "0" 227 onclick = "imageSelectTip( this )" />228 <br />Portability Tips</td>229 </tr>230 <tr>231 <td align = "center" valign = "top" width = "120">232 <img id = "gui" src = "GUI_100h.gif" 233 alt = "Look-and-Feel Observation" border = 234 "0" onclick = "imageSelectTip( this )" />235 <br />Look-and-Feel Observations</td> 236 <td align = "center" valign = "top" width = "120">237 <img id = "dbt" src = "DBT_100h.gif" 238 alt = "Testing and Debugging Tip" border = 239 "0" onclick = "imageSelectTip( this )" />240 <br />Testing and Debugging Tips</td>241 <td align = "center" valign = "top" width = "120">242 <img id = "cpe" src = "CPE_100h.gif" 243 alt = "Common Programming Error" border = 244 "0" onclick = "imageSelectTip( this )" />245 <br />Common Programming Errors</td>


Outline36

Tutorial.html

Program Output

246 </tr>247 </table>248 <img src = "agent_button.gif" style = "position: absolute;249 bottom: 10px; right: 10px" />250 </body>251 </html>


Outline37

Program Output


38

33.7 Microsoft® Agent ControlFig. 33.7 Peedy finishing introduction.

Fig. 33.8 Peedy ready to receive voice commands.


39

33.7 Microsoft® Agent ControlFig. 33.9 Peedy receiving voice command.

Fig. 33.10 Peedy discussing Good Programming Practice.


40


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 Other events for the Microsoft Agent control.


41


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 Other properties and methods for the Character object.


42


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. 33.13 Speech output tags.


43

33.8 RealPlayer™ Plug-in

• RealPlayer media player– Plays audio and video files

• Streams

– Example• Users select from audio sources

• Embeds RealPlayer into Web page

Outline44

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.

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 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Live Audio!</title>11 12 <script type = "text/javascript">13 26 </script>27 </head>28 29 <body>30 31 <p>Pick from my favorite audio streams:32 33 <select id = "streamSelect" onchange = 34 "change( this.value )">35 <option value = "">Select a station</option>

Select menu

locations array contains URLs for live audio

change function called by onchange event (line 33)DoPlayPause method toggles between playing an pausing the stream

SetSource method sets source URL based on locations array


Outline45

Real.html

Program Output

36 <option value = "0">CNN</option>37 <option value = "1">KING-FM</option>38 <option value = "2">Jazz Summit</option>39 </select></p>40 41 <br />42 <embed id = "raControl" src = ""43 type = "audio/x-pn-realaudio-plugin" width = "275" 44 height = "125" controls = "Default" 45 autostart = "false" />46 47 </body>48 </html>

type attribute specifies MIME type of embedded file (MIME type for streaming audio.)

Image of RealPlayer playing the selected audio stream. Run the example to see this live.

width and height attributes define size of player controlsautoStart attribute determines whether audio begins playing when page opens

controls attribute specifies which player controls display

embed element embeds RealPlayer plug-in into the Web pageStations from which the user selects


46

33.9 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

Outline47

Example1.smil

Displays JPEG images sequentially with sound.

Document can be displayed by embedding RealPlayer into XHTML.

1 <smil>2 3 4 5 <head>6 <layout> 7 <root-layout height = "300" width = "280" 8 background-color = "#bbbbee" title = "Example" /> 9 10 <region id = "image1" width = "177" height = "230"11 top = "35" left = "50" background-color = 12 "#ffffff" />13 </layout> 14 </head> 15 <body>16 <seq>17 18 <par>19 <img src = "book1.jpg" region = "image1" 20 alt = "book 1" dur = "1s" fit = "fill" />21 <audio src = "bounce.au" dur = ".5s" />22 </par>23 24 <par>25 <img src = "book2.jpg" region = "image1" 26 alt = "book 2" dur = "1s" fit = "fill" />27 <audio src = "bounce.au" dur = ".5s" />28 </par>29 30 <par>31 <img src = "book3.jpg" region = "image1" 32 alt = "book 3" dur = "1s" fit = "fill" />33 <audio src = "bounce.au" dur = ".5s" />34 </par>35

head element contains information for setting up the document

layout element sets layout attributes for the document

root-layout element element sets document size, color and title

region element sets a region for displaying objects

width and height attributes specify the region size

top and left attributes set region’s relative positionbackground-color attribute sets region’s background color

seq element sets child elements to execute sequentially

par element sets child elements to execute simultaneously img element references image source (src) and alternative text (alt)

region attribute specifies region in which image displays

fit attribute sets how the image appears in the region. fill value sets the image to fill the region.audio element provides

audio source that plays when the image displays

dur attribute describes how long image appears on screen


Outline48

Example1.smil

36 <par>37 <img src = "book4.jpg" region = "image1" 38 alt = "book4" dur = "1s" fit = "fill" />39 <audio src = "bounce.au" dur = ".5s" />40 </par>41 42 <par>43 <img src = "book5.jpg" region = "image1" 44 alt = "book5" dur = "1s" fit = "fill" />45 <audio src = "bounce.au" dur = ".5s" />46 </par>47 48 <par>49 <img src = "book6.jpg" region = "image1" 50 alt = "book6" dur = "1s" fit = "fill" />51 <audio src = "bounce.au" dur = ".5s" />52 </par>53 </seq>54 </body>55 </smil>

Outline49

Example1.html

Embeds previous SMIL document and displays it with RealPlayer.

Program Output

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 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Embedding SMIL with Real Player</title>11 </head>12 <body>13 <div style = "text-align: center">14 <embed src = "example1.smil" 15 controls = "ImageWindow" 16 type = "audio/x-pn-realaudio-plugin" 17 width = "280" height = "300" autostart = "true">18 </embed></div>19 </body>20 </html>

src attribute set to location of SMIL document.

controls attribute set to ImageWindow so controls are hidden from user

type sets RealPlayer plug-in to display the SMIL document


50

33.10 Scalable Vector Graphics (SVG)

• SVG markup language– 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

Outline51

Shapes.svg

Displays simple shapes of varying colors in a browser.

1 <?xml version="1.0"?>2 3 4 5 6 <svg viewBox = "0 0 300 300" width = "300" height = "300">7 8 9 <g>10 <path style = "fill: #eebb99" 11 d = "M0,0 h300 v300 h-300 z" />12 </g>13 14 15 <g>16 17 <circle style = "fill: green; fill-opacity: 0.5"18 cx = "150" cy = "150" r = "50" />19 20 <rect style = "fill: blue; stroke: white"21 x = "50" y = "50" width = "100" height = "100" />22 23 <text style = "fill: red; font-size: 24pt"24 x = "25" y = "250">Welcome to SVG!</text>25 26 </g>27 </svg>

Root element for SVG documentviewBox sets viewing area for document

width and height attributes specify display dimensions

g element groups elements in an SVG documentpath element creates a boxstyle property uses CSS property fill to fill box with colord attribute defines corner points of the box M property specifies starting coordinates of the path

h property specifies that next point is horizontal to current pointv property specifies that next point is vertical to previous point

z property sets path to connect the first and last points, closing the box

circle element creates a circle with center at cx, cy. r is the radius.rect element creates a rectangle. x,y is the upper-left corner. width and height set the dimensions.

text element creates text. x,y is the upper-left corner. style attribute sets the text format.


Outline52

Program Output

Outline53

Planet.svg

Simulates the Earth and Moon rotating around the Sun.

1 <?xml version = "1.0"?>2 3 4 5 6 <svg viewBox = "-500 -500 1000 1000">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">26 <animateTransform attributeName = "transform"27 type = "rotate" dur = "20s" from = "360"28 to = "0" repeatCount = "indefinite" />29 </circle>30 </g>31 </g>32 </svg>

Creates background boxanimateTransform element changes parent element’s attribute specified in attribute attributeName.type attribute defines property of changing attribute

Creates yellow circle for sun. Center at (0,0) and radius 100.

g element groups the circles representing the Earth and Moon.dur attribute sets the time it takes to make transition from initial to final values.

from and to set the initial and final transformation valuesAttribute repeatCount sets number of times to perform transformationcircle defines shape and color of Earth.g element groups the Moon circle element with the Earth circle element

transform translates (shifts) group element 400 px to the right, centering the group on the Earth circle

animateTransform is child element of Moon circle, rotates Moon circle 360 degrees CCW around the Earth circle ever 20 secs.


Outline54

Program Output

2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 33 - Multimedia: Audio, Video, Speech...

Documents

Transcript of 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 33 - Multimedia: Audio, Video, Speech...