1.  2004 Prentice Hall, Inc. All rights reserved. Chapter 28 – Multimedia: Audio, Video, Speech Synthesis and Recognition Outline 28.1 Introduction 28.2 Audio and Video 28.3 Adding Background Sounds with the bgsound Element 28.4 Adding Video with the img Element’s dynsrc Property 28.5 Adding Audio or Video with the embed Element 28.6 Using the Windows Media Player ActiveX Control 28.7 Microsoft Agent Control 28.8 RealOne Player Plug-in 28.9 Synchronized Multimedia Integration Language (SMIL) 28.10 Scalable Vector Graphics (SVG) 28.11 Web Resources

2.  2004 Prentice Hall, Inc. All rights reserved. Objectives In this lesson, you will learn: –To enhance Web pages with sound and video. –To use the bgsound element to add background sounds. –To use the img element’s dynsrc property to incorporate video into Web pages. –To use the embed element to add sound or video. –To use the Windows Media Player ActiveX control to play a variety of media formats in Web pages. –To use the Microsoft Agent ActiveX control to create animated characters that speak to users and respond to spoken commands from users. –To embed RealOne Player™ to include streaming audio and video in a Web page. –To embed video and create graphics in a Web page using SMIL and SVG.

3.  2004 Prentice Hall, Inc. All rights reserved. 28.1 Introduction Multimedia –Use of sound, images, graphics and video –Add sound, video, and animated characters to Web-based applications –Streaming technologies

4.  2004 Prentice Hall, Inc. All rights reserved. 28.2 Audio and Video Can be embedded in Web page Can be downloaded “on-demand” Encoding algorithm or codec –Transforms raw audio or video into a format that Web browsers can display

5.  2004 Prentice Hall, Inc. All rights reserved. 28.3 Adding Background Sounds with the bgsound Element bgsound element –src property Specifies the URL of audio clip to be played –loop property Specifies number of times audio clip will play –balance property Specifies balance between left and right speakers –volume property Determines volume of audio clip

6.  2004 Prentice Hall, Inc. All rights reserved. Outline BackgroundAudio.html (1 of 4)

7.  2004 Prentice Hall, Inc. All rights reserved. Outline BackgroundAudio.html (2 of 4)

8.  2004 Prentice Hall, Inc. All rights reserved. Outline BackgroundAudio.html (3 of 4)

9.  2004 Prentice Hall, Inc. All rights reserved. Outline BackgroundAudio.html (4 of 4)

10.  2004 Prentice Hall, Inc. All rights reserved. 28.4 Adding Video with the img Element’s dynsrc Property img element –Incorporates both images and videos –src property Indicates source is image –dynsrc property Indicates source is video clip –start property Specifies when video should start playing Event fileopen –Video should play as soon as it loads Event mouseover –Video should play when user position mouse over video

11.  2004 Prentice Hall, Inc. All rights reserved. Outline Dynamicimg.html (1 of 2)

12.  2004 Prentice Hall, Inc. All rights reserved. Outline Dynamicimg.html (2 of 2)

13.  2004 Prentice Hall, Inc. All rights reserved. 28.5 Adding Audio or Video with the embed Element Element embed –Embeds media clip into Web page –Displays a graphical user interface (GUI) –Supported by both Microsoft Internet Explorer and Netscape

14.  2004 Prentice Hall, Inc. All rights reserved. Outline EmbeddedAudio.html (1 of 3)

15.  2004 Prentice Hall, Inc. All rights reserved. Outline EmbeddedAudio.html (2 of 3)

16.  2004 Prentice Hall, Inc. All rights reserved. Outline EmbeddedAudio.html (3 of 3)

17.  2004 Prentice Hall, Inc. All rights reserved. 28.5 Adding Audio or Video with the embed Element Play Pause StopMuteVolume

18.  2004 Prentice Hall, Inc. All rights reserved. Outline EmbeddedVideo.html (1 of 2)

19.  2004 Prentice Hall, Inc. All rights reserved. Outline EmbeddedVideo.html (2 of 2)

20.  2004 Prentice Hall, Inc. All rights reserved. 28.6 Using the Windows Media Player ActiveX Control object element –Embed Windows Media Player and ActiveX controls –Property id Specifies scripting name of element –width and height properties Specify width and height in pixels –property classid Specifies ActiveX control ID –Element param Specify parameter –Parameter FileName Specifies file containing media clip –AutoStart (boolean value) –ShowControls (boolean value) –Loop (boolean value)

21.  2004 Prentice Hall, Inc. All rights reserved. Outline MediaPlayer.html (1 of 3)

22.  2004 Prentice Hall, Inc. All rights reserved. Outline MediaPlayer.html (2 of 3)

23.  2004 Prentice Hall, Inc. All rights reserved. Outline MediaPlayer.html (3 of 3)

24.  2004 Prentice Hall, Inc. All rights reserved. 28.7 Microsoft Agent Control Interactive animated characters Speaks Supports speech recognition

25.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (1 of 12)

26.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (2 of 12)

27.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (3 of 12)

28.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (4 of 12)

29.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (5 of 12)

30.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (6 of 12)

31.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (7 of 12)

32.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (8 of 12)

33.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (9 of 12)

34.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (10 of 12)

35.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (11 of 12)

36.  2004 Prentice Hall, Inc. All rights reserved. Outline tutorial.html (12 of 12)

37.  2004 Prentice Hall, Inc. All rights reserved.

39. 28.7 Microsoft Agent Control Fig. 28.7Peedy finishing introduction.

40.  2004 Prentice Hall, Inc. All rights reserved. 28.7 Microsoft Agent Control Fig. 28.8Peedy ready to receive voice commands.

41.  2004 Prentice Hall, Inc. All rights reserved. 28.7 Microsoft Agent Control Fig. 28.9Peedy receiving voice command.

42.  2004 Prentice Hall, Inc. All rights reserved. 28.7 Microsoft Agent Control Fig. 28.10Peedy discussing Good Programming Practices.

43.  2004 Prentice Hall, Inc. All rights reserved. 28.7 Microsoft Agent Control

44.  2004 Prentice Hall, Inc. All rights reserved. 28.7 Microsoft Agent Control

45.  2004 Prentice Hall, Inc. All rights reserved. 28.7 Microsoft Agent Control

46.  2004 Prentice Hall, Inc. All rights reserved. 28.8 RealOne Player Plug-in Element embed –Embed RealOne Player plug-ins for video and audio –Attribute type Specifies MIME type of embedded file –Attributes width and height Specify dimensions of space the control occupies –Attribute autostart Determines whether media start playing when page loads –Attribute controls Specifies which controls users can access –Attribute src Set to location of streaming media

47.  2004 Prentice Hall, Inc. All rights reserved. Outline StreamingMedia.html (1 of 3)

48.  2004 Prentice Hall, Inc. All rights reserved. Outline StreamingMedia.html (2 of 3)

49.  2004 Prentice Hall, Inc. All rights reserved. Outline StreamingMedia.html (3 of 3)

50.  2004 Prentice Hall, Inc. All rights reserved. 28.9 Synchronized Multimedia Integration Language (SMIL) Coordinate wide range of multimedia elements XML-based description language Organize text, audio, video to occur simultaneously or sequentially Provide time reference for all instances of text and media Specifies source and presentation of multimedia

51.  2004 Prentice Hall, Inc. All rights reserved. Outline exampleSMIL.smil (1 of 3)

52.  2004 Prentice Hall, Inc. All rights reserved. Outline exampleSMIL.smil (2 of 3)

53.  2004 Prentice Hall, Inc. All rights reserved. Outline exampleSMIL.smil (3 of 3)

54.  2004 Prentice Hall, Inc. All rights reserved. Outline SMILexample.html (1 of 1)

55.  2004 Prentice Hall, Inc. All rights reserved.

57. 28.10 Scalable Vector Graphics (SVG) Describes vector graphic data for JPEG, GIF, and PNG formats Vector graphics –Produced by mathematical equations XML vocabulary

58.  2004 Prentice Hall, Inc. All rights reserved. Outline shapes.svg (1 of 2)

59.  2004 Prentice Hall, Inc. All rights reserved. Outline shapes.svg (2 of 2)

60.  2004 Prentice Hall, Inc. All rights reserved.

61. Outline planet.svg (1 of 2)

62.  2004 Prentice Hall, Inc. All rights reserved. Outline planet.svg (2 of 2)

63.  2004 Prentice Hall, Inc. All rights reserved. 28.11 Web Resources www.microsoft.com/windows/windowsmedia www.streamingmedia.com www.microsoft.com/msagent/downloads/default.asp msdn.microsoft.com/downloads/default.asp www.real.com www.adobe.com/svg www.service.real.com/help/library/guides/extend/embed.htm www.nasa.gov/gallery/index.html www.speech.cs.cmu.edu/comp.speech/SpeechLinks.html www.mp3.com www.mpeg.org www.winamp.com www.shoutcast.com www.windowsmedia.com www.research.att.com/~rws/Sable.v1_0.htm www.w3.org/AudioVideo smw.internet.com/smil/smilhome.html