3.1 Audio, Video, Speech Synthesis and Recognition

Multimedia: Audio, Video, Speech Synthesis and Recognition
Outline 28.1 28.2 28.3 28.4 28.5 28.6 28.7 28.8 28.9 28.10 28.11 Introduction Audio and Video Adding Background Sounds with the bgsound Element Adding Video with the img Elements dynsrc Property Adding Audio or Video with the embed Element Using the Windows Media Player ActiveX Control Microsoft Agent Control RealOne Player Plug-in Synchronized Multimedia Integration Language (SMIL) Scalable Vector Graphics (SVG) Web Resources
2004 Prentice Hall, Inc. All rights reserved.
Objectives 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 elements 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.
28.1 Introduction Multimedia

Use of sound, images, graphics and video Add sound, video, and animated characters to Web-based applications Streaming technologies
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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?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
BackgroundAudio .html (1 of 4)
25
2004 Prentice Hall, Inc.

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

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
</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. <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. <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()" />
Outline

76 77 78 79
<input type = "button" value = "Stop Sound" id = "stopButton" onClick = "stopSound()" /> </form> </body>
Outline
80 </html>

28.4 Adding Video with the img Elements 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<?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
Dynamicimg.html (1 of 2)
15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 </tr> </table> </body>
in a loop.<br />The video will not begin playing until you move the mouse over the video.<br />Press the browsers<strong>Stop</strong> button to stop playing the sound and the video.</td>
Outline
Dynamicimg.html (2 of 2)
33 </html>

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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<?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
EmbeddedAudio .html (1 of 3)
18 19 20 21 22 23 24

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
function start() { TimerID = window.setInterval( "wave()", 100 ); } function wave() { if ( str > 23 || str < 1 ) updown = !updown; if ( updown ) str++; else str--; wft.filters( "wave" ).phase = str * 20; wft.filters( "wave" ).strength = str; } // --> </script> </head> <body onload = "start()"> <h1>Background Audio via the embed Element</h1> <p>Click the text to stop the script.</p>
Outline

51 52 53 54 55 56 57 58 59
<p class = "big" align = "center"> <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>
Outline
60 </html>

28.5 Adding Audio or Video with the embed Element
Play
Pause
Stop
Mute
Volume
1 2 3 4 5 6 7 8 9 10 11
<?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
EmbeddedVideo .html (1 of 2)
12 13 14 15 16 17 18 19 20 21 22

23 24 25 26
This page plays the video once.<br /> Use the controls on the embedded video player to play the video again. </body>
Outline
EmbeddedVideo .html (2 of 2)
27 </html>

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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  </script> </head> --> 
Outline
MediaPlayer.html (1 of 3)
25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<body> <h1> Audio and video through embedded Media Player objects </h1> <hr /> <table> <tr><td valign = "top" align = "center"> <object id = "VideoPlayer" width = "200" height = "225" classid = "CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"> <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" value = "true" /> <param name = "Loop" value = "true" />
Outline

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

28.7 Microsoft Agent Control Interactive animated characters Speaks Supports speech recognition
1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <object id = "agent" width = "0" height = "0" classid = "CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F" codebase = "#VERSION = 2, 0, 0, 0"> </object>  <object width = "0" height = "0" classid = "CLSID:B8F2846E-CE36-11D0-AC83-00C04FD97575" codebase = "#VERSION = 6, 0, 0, 0"> </object> -->
Outline
tutorial.html (1 of 12)
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 36 37 38 39 40 41 42 43 44 45 46 47 48
 <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", "gui", "ept", "cpe" ]; var tipNames = [ "Good Programming Practice", "Software Engineering Observation", "Performance Tip", "Portability Tip", "Look-and-Feel Observation", "Error-Prevention Tip", "Common Programming Error" ]; var voiceTips = [ "Good [Programming Practice]", "Software [Engineering Observation]", "Performance [Tip]", "Portability [Tip]",
Outline

49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
"Look-and-Feel [Observation]", "Error-Prevention [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.", // Look-and-Feel Observation text "Look-and-Feel Observations highlight graphical " +
Outline

74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
"user interface conventions. These observations " + "help students design their own graphical user " + "interfaces in conformance with industry " + "standards.", // Error-Prevention Tip text "Error-Prevention 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 " + "the same errors. It also helps reduce the long " + "lines outside instructors' offices during " + "office hours!" ];
Outline

95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
function loadAgent() { agent.Connected = true; agent.Characters.Load( "Peedy", "C:\\WINNT\\msagent\\chars\\Peedy.acs" ); actor = agent.Characters.Character( "Peedy" ); actor.LanguageID = 0x0409; // sometimes needed // get states from server actor.Get( "state", "Showing" ); actor.Get( "state", "Speaking" ); actor.Get( "state", "Hiding" ); // get Greet animation and do Peedy introduction actor.Get( "animation", "Greet" ); actor.MoveTo( screenLeft, screenTop - 90); actor.Show(); actor.Play( "Greet" ); actor.Speak( "Hello. " + "If you would like me to tell you about a " + "programming tip, click its icon, or, press " + "the 'Scroll Lock' key, and speak the name " + "of the tip, into your microphone." );
Outline

119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 }
// get other animations actor.Get( "animation", "Idling" ); actor.Get( "animation", "MoveDown" ); actor.Get( "animation", "MoveUp" ); actor.Get( "animation", "MoveLeft" ); actor.Get( "animation", "MoveRight" ); actor.Get( "animation", "GetAttention" ); actor.Get( "animation", "GetAttentionReturn" ); // set up voice commands for ( var i = 0; i < tips.length; ++i ) actor.Commands.Add( tips[ i ], tipNames[ i ], voiceTips[ i ], true, true ); actor.Commands.Caption = "Programming Tips"; actor.Commands.Voice = "Programming Tips"; actor.Commands.Visible = true;
Outline
function imageSelectTip( tip ) { actor.Stop(); for ( i = 0; i < document.images.length; i++) { document.images[ i ].style.background = "lemonchiffon"; currentImage = null;

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 } }
} for ( var i = 0; i < document.images.length; ++i ) if ( document.images( i ) == tip ) tellMeAboutIt( i );
Outline
function voiceSelectTip( cmd ) { var found = false; for ( var i = 0; i < tips.length; ++i ) if ( cmd.Name == tips[ i ] ) { found = true; break; } if ( found ) tellMeAboutIt( i );
function tellMeAboutIt( element ) { currentImage = document.images( element ); currentImage.style.background = "red"; spanId = document.images( element ).id + "Span";

169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 } }
spanObject = document.getElementById( spanId ); actor.MoveTo( screenLeft + parseInt( spanObject.style.left ) - 18, screenTop + parseInt( spanObject.style.top )- 103 ); actor.Speak( explanations[ element ] ); // --> </script> <script type = "text/javascript" for = "agent" event = "Command( cmd )"> <!-voiceSelectTip( cmd ); // --> </script> <script type = "text/javascript" for = "agent" event = "BalloonShow"> <!-if ( currentImage != null ) { currentImage.style.background = "lemonchiffon"; currentImage = null; // --> </script>
Outline

194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 </tr> <tr> <td align = "center" valign = "top" width = "120"> <span id = "gppSpan" style = "position : absolute; left : 30; top : 80; width : 130;"> </th> <body style = "background-color: lemonchiffon" onload = "loadAgent()"> <table border = "0"> <tr> <th colspan = "4"> <h1 style = "color: blue"> Deitel Programming Tips </h1> <script type = "text/javascript" for = "agent" event = "Click"> <!-actor.Play( "GetAttention" ); actor.Speak( "Stop poking me with that pointer!" ); actor.Play( "GetAttentionReturn" ); // --> </script> </head>
Outline

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
<img id = "gpp" src = "GPP_100h.gif" alt = "Good Programming Practice" border = "0" onclick = "imageSelectTip( this )" /> Good Programming Practices</span></td> <td align = "center" valign = "top" width = "120"> <span id = "seoSpan" style = "position : absolute; left : 180; top : 80; width : 130;"> <img id = "seo" src = "SEO_100h.gif" alt = "Software Engineering Observation" border = "0" onclick = "imageSelectTip( this )" /> Software Engineering Observations</span></td> <td align = "center" valign = "top" width = "120"> <span id = "perfSpan" style = "position : absolute; left : 330; top : 80; width : 130;"> <img id = "perf" src = "PERF_100h.gif" alt = "Performance Tip" border = "0" onclick = "imageSelectTip( this )" /> Performance Tips</span></td> <td align = "center" valign = "top" width = "120"> <span id = "portSpan" style = "position : absolute; left : 480; top : 80; width : 130;"> <img id = "port" src = "PORT_100h.gif" alt = "Portability Tip" border = "0" onclick = "imageSelectTip( this )" />
Outline

244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 </tr> </tr> <tr>
Portability Tips</span></td>
Outline
<span id = "guiSpan" style = "position : absolute; left : 30; top : 260; width : 130;"> <img id = "gui" src = "GUI_100h.gif" alt = "Look-and-Feel Observation" border = "0" onclick = "imageSelectTip( this )" /> Look-and-Feel Observations</span></td>
<td align = "center" valign = "top" width = "120">
<td align = "center" valign = "top" width = "120"> <span id = "eptSpan" style = "position : absolute; left : 180; top : 260; width : 130;"> <img id = "ept" src = "EPT_100h.gif" alt = "Error-Prevention Tip" border = "0" onclick = "imageSelectTip( this )" /> Error-Prevention Tips</span></td> <td align = "center" valign = "top" width = "12"> <span id = "cpeSpan" style = "position : absolute; left : 330; top : 260; width : 130;"> <img id = "cpe" src = "CPE_100h.gif" alt = "Common Programming Error" border = "0" onclick = "imageSelectTip( this )" /> Common Programming Errors</span></td>

269 270 271 272
</table> <img src = "agent_button.gif" style = "position: absolute; bottom: 10px; right: 10px" /> </body>
Outline
273 </html>

28.7 Microsoft Agent Control
Fig. 28.7
Peedy finishing introduction.
Fig. 28.8
Peedy ready to receive voice commands.
Fig. 28.9
Peedy receiving voice command.
Fig. 28.10
Peedy discussing Good Programming Practices.

Description Called when the text balloon for a character is hidden. Called when the text balloon for a character is BalloonShow shown. Called when a character is hidden. Hide Called when a character is moved on the screen. Move Called when a character is displayed on the Show screen. Called when a characters size is changed. Size Fig. 28.11 Other events for the Microsoft Agent control. Event BalloonHide

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

Description Specifies the tone of the voice. Possible values for string are Normal (the default) for a normal tone of voice, Monotone for a monotone voice or Whisper for a whispered voice. Emphasizes the next spoken word. \Emp\ Repeats the last statement spoken by the character. This tag must \Lst\ be the only content of the string in the Speak method call. Pauses speech for number milliseconds. \Pau = number\ Changes the pitch of the characters voice. This value must be \Pit = number\ within the range 50 to 400 hertz for the Microsoft Agent speech engine. Changes the speech speed to a value in the range 50 to 250. \Spd = number\ Changes the volume to a value in the range 0 (silent) to 65,535 \Vol = number\ (maximum volume). Fig. 28.13 Speech output tags. Tag \Chr = string\
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
1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  </script> </head> --> 
Outline
StreamingMedia .html (1 of 3)
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <br /> <embed id = "videoControl" src = "" type = "audio/x-pn-realaudio-plugin" width = "275" height = "200" controls = "ImageWindow" console = "streamingAudio" autostart = "false" /> <br /> <embed id = "audioControl" src = "" type = "audio/x-pn-realaudio-plugin" width = "275" height = "40" controls = "ControlPanel" console = "streamingAudio" autostart = "false" /> <select id = "streamSelect" onchange = "change( this.value )"> <option value = "">Select a station</option> <option value = "0">NOAA</option> <option value = "1">NASA</option> </select></p> <p>Pick from my favorite video streams: <body>
Outline

50 51 </body> 52 </html>
Outline

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
1 2 3 4 5 6 7 8 9
<smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">  
Outline
exampleSMIL.smil (1 of 3)
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<transition id = "crossFade" type = "fade" subtype = "crossfade" dur = "2s" /> </head> <body> <seq> <par> <img src = "book1.jpg" region = "image1" transIn = "wipeForward" transOut = "wipeForward" alt = "book1" dur = "6s" fill = "transition" fit = "fill" /> <audio src = "bounce.au" dur = ".5s" /> </par> <par> <img src = "book2.jpg" region = "image1" transIn = "fadeIn" transOut = "fadeOut" alt = "book2" dur = "6s" fit = "fill" fill = "transition" /> <audio src = "bounce.au" dur = ".5s" /> </par> <par> <img src = "book3.jpg" region = "image1" transIn = "wipeBackward" transOut = "fadeOut" alt = "book3" dur = "6s" fit = "fill" fill = "transition" /> <audio src = "bounce.au" dur = ".5s" />
Outline

50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
</par> <par> <img src = "book4.jpg" region = "image1" transIn = "crossFade" transOut = "fadeOut" alt = "book4" dur = "6s" fit = "fill" fill = "transition" /> <audio src = "bounce.au" dur = ".5s" /> </par> <par> <img src = "book5.jpg" region = "image1" transIn = "wipeForward" transOut = "wipeBackward" alt = "book5" dur = "6s" fit = "fill" fill = "transition" /> <audio src = "bounce.au" dur = ".5s" /> </par> <par> <img src = "book6.jpg" region = "image1" transIn = "crossFade" alt = "book6" dur = "6s" fit = "fill" fill = "transition" /> <audio src = "bounce.au" dur = ".5s" /> </par> </seq> </body>
Outline
73 </smil>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<?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
SMILexample.html (1 of 1)
21 </html>

28.10 Scalable Vector Graphics (SVG) Describes vector graphic data for JPEG, GIF, and PNG formats Vector graphics
Produced by mathematical equations
XML vocabulary
1 2 3 4 5 6 7 8 9 10 11
<?xml version = "1.0"?>   <g> <path style = "fill: #eebb99" d = "M0,0 h300 v300 h-300 z"/> </g> -->
Outline
shapes.svg (1 of 2)
12 13 14 15 16 17 18 19 20 21 22 23 24 25 <rect style = "fill: blue; stroke: white" x = "50" y = "0" width = "100" height = "100">  <circle style = "fill:green;" cx = "150" cy = "150" r = "50"> <animate attributeName = "opacity" attributeType = "CSS" from = "0" to = "1" dur = "6s" </circle> />  <g>

26 27 28 29 30 31 32 33 34 35 36 37 38 </g> 39 </svg>
<animate attributeName = "y" begin = "mouseover" dur = "2s" values = "0; -50; 0; 20; 0; -10; 0; 5; 0; -3; 0; 1; 0" /> </rect>  <text style = "fill: red; font-size: 24pt" x = "25" y = "250"> Welcome to SVG! <animateColor attributeName = "fill" attributeType = "CSS" values = "red;blue;yellow;green;red" dur = "10s" repeatCount = "indefinite"/> </text>
Outline
shapes.svg (2 of 2)

1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?>  
Outline
planet.svg (1 of 2)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 </g> </g>
<animateTransform attributeName = "transform" type = "rotate" dur = "20s" from = "360" to = "0" repeatCount = "indefinite" /> </circle>
Outline
planet.svg (2 of 2)
32 </svg>

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

3.1 Audio, Video, Speech Synthesis and Recognition

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

3.1 Audio, Video, Speech Synthesis and Recognition

Загружено:

Авторское право:

Доступные форматы

Multimedia: Audio, Video, Speech Synthesis and Recognition

2004 Prentice Hall, Inc. All rights reserved.

Objectives In this lesson, you will learn:

28.1 Introduction Multimedia

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

28.3 Adding Background Sounds with the bgsound Element

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

28.4 Adding Video with the img Elements dynsrc Property

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

26 27 28 29 30 31 32 </tr> </table> </body>

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

28.5 Adding Audio or Video with the embed Element

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

28.6 Using the Windows Media Player ActiveX Control

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

} for ( var i = 0; i < document.images.length; ++i ) if ( document.images( i ) == tip ) tellMeAboutIt( i );

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

<td align = "center" valign = "top" width = "120">

tutorial.html (11 of 12)

2004 Prentice Hall, Inc.

269 270 271 272

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

28.7 Microsoft Agent Control

Peedy finishing introduction.

2004 Prentice Hall, Inc. All rights reserved.

28.7 Microsoft Agent Control

Peedy ready to receive voice commands.

2004 Prentice Hall, Inc. All rights reserved.

28.7 Microsoft Agent Control

Peedy receiving voice command.

2004 Prentice Hall, Inc. All rights reserved.

28.7 Microsoft Agent Control

Peedy discussing Good Programming Practices.

2004 Prentice Hall, Inc. All rights reserved.

28.7 Microsoft Agent Control

2004 Prentice Hall, Inc. All rights reserved.

28.7 Microsoft Agent Control