Presentation is loading. Please wait.

Presentation is loading. Please wait.

INF 240 - Web Design Using Multimedia on the Web Sound - Part 1 Mmm … Music, Mmm … Motion, Mmm … Megabytes!

Similar presentations

Presentation on theme: "INF 240 - Web Design Using Multimedia on the Web Sound - Part 1 Mmm … Music, Mmm … Motion, Mmm … Megabytes!"— Presentation transcript:


2 INF 240 - Web Design Using Multimedia on the Web Sound - Part 1 Mmm … Music, Mmm … Motion, Mmm … Megabytes!

3 A powerful aspect of computing technology is the ability to combine text, graphics, sounds, and moving images in meaningful ways. In today’s Web environment, multimedia is firmly established as a viable means for delivering content.

4 The Web supports multimedia-based Web pages - Multimedia allows you to communicate your message in different and, perhaps, more appropriate ways. >> Text >> Image >> Sound >> Video >> Animation >> Virtual Reality - 3-D exploration - an immersive, sensory experience of a synthetic, i.e. virtual world.

5 Multimedia comes with a relatively high “price” tag, though, for both preparation and delivery, and should be used purposefully. Too often Web authors include visual or moving elements on the page just to grab the user’s attention. This approach is based on the assumption that Web users have short attention spans (which in many cases may be true!).

6 However, the solution is not to add gratuitous “eye candy” to your Web presentation, which may, in fact, command too much of your users’ attention and detract them from the main content of your page. Use images, animations, video, and sound only when they are relevant to your message.




10 Bear in mind, too, that there are technical limitations to the delivery of audio-visual content via the Web. For example, both long-duration video, and video that requires smooth motion or clear details, require large amounts of bandwidth (i.e. very fast Internet connections) to deliver, and may also tax the capacity of the user’s computer. Also, a significant amount of compression may be required to create a file that is small enough to be delivered quickly via the Web.

11 Web Multimedia Strategies Simply because we can stream hours of video out over the Web does not mean that we should! The value of having the text of, say, John Milton’s Paradise Lost, online is not in making it available for reading - many people prefer to read the work in print. We digitize texts in order to use the strengths of computing, such as searching and linking, to enhance our understanding of the material.

12 This holds true for multimedia, too: - We need to consider how best to use the computer, and not simply translate video and audio content to the computer screen. The key to successful Web multimedia is to tailor your content for Web delivery.

13 With the advent of Web 2.0, other technologies such as podcasts and webinars are also being actively used in Web pages. But remember Web content accessibility ! - This is now an important design issue.

14 Beware! Multimedia files can be very large ! Apart from Internet bandwidth (i.e. connection speed) considerations, a major drawback to the addition of multimedia elements to a Web page is a greater demand on memory, processor and operating system resources pf the user’s computer. A slow or oldish computer may not be able to play clever multimedia effects properly, or may play them out of synchronization. E.g. a button that does not react until several seconds after it has been clicked.

15 Sound

16 Types of sound available for a Web page: - voice - music - sound effects Sound can help you get ideas across in ways not possible with text and images.

17 Using Sound on a Web Site Sound can serve a variety of purpose on a Web page: - Conveying information, e.g. click on a word to hear it pronounced. - Setting a mood. - Capturing attention. - Explaining a process. - Providing personal contact.

18 Downloading versus Streaming Two main ways to “deliver” a sound (and video) file to a Web page:  Non-streamed - the complete file is first downloaded to browser from the Web server, then it is played.  Streamed - “stream” file to browser - user listens in “real” time as multimedia data stream arrives in the browser: the browser does not wait for file to be downloaded completely before playing. E.g. YouTube. These are created and saved in two totally different ways.

19 Streaming is more complex, for both the server and browser. Use streaming when - Presenting live events. - Any sound that requires a very large file. - Need to save time - prevent user from waiting. We will look at steaming in next section – part 2.

20 File Formats There are ( numerous ) different file formats (= recording standards) for sound (and video). E.g. Sound files: Waveform audio format (.wav) Compressed audio format (.mp3) Etc. Video files:QuickTime (.mov) Audio-Video Interleaved (.avi) Etc.

21 Common Audio File Types.mp3 MPEG-1 Audio Layer-3 The most popular format for storing and delivering audio on the web. It compression algorithm reduces file size up to 12 times, yet retaining almost the same fidelity..ogg Ogg Vorbis This sound file format uses a relatively new audio compression format that is comparable to MP3. It is open source and free to use. Popular as an HTML 5 format..m4a MPEG-4 Audio This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPod/iPad.

22 Helper Applications and Plug-ins Helper Application –A program that can be designated to handle a particular multimedia file type (such as.wav or.mp3) to allow the user to view or otherwise utilize the special file. –The helper application runs in a separate window from the browser. Plugin –A more common method. –Plugins run in the browser window so that media objects can be integrated directly into the Web page.

23 Complex animations, video, sound and interactive games require browser plugins (or “helper” programs) such as RealPlayer, QuickTime, and Shockwave-Flash in order to “display” these effects. Popular plugins for Web browsers include - Flash for interactive animated content. - RealPlayer for video and audio. - QuickTime for a variety of video and audio content. Also, Microsoft’s Windows Media Player.

24 A number of media players such as Quicktime, RealPlayer and Winamp are banned at AUBG! The OCC recommends the VLC player instead.

25 Interactivity Communication of ideas is richer and more effective, but more complex, when it is interactive. Older forms of modern mass communication are one way in nature - Audience have little influence over the experience. Multimedia and the Web offer the possibility of presenting interactive communication - An interface that visually and audibly responds to viewers’ actions should be easier for them to pick up and understand.

26 Simple sound files were used on the Web since its earliest days - They could be linked to, and downloaded like any other file. The drawback was that audio files are relatively large, and this was problematic in the days of slow Internet connections. But as the Web evolved, some major breakthroughs have been made in terms of the delivery of sound files...

27 First, streaming audio made long-playing audio and even live broadcasts possible. - We will look at streaming later. Then the MP3 format exploded into popularity, around 1999. - MP3's ability to compress sound files to about 1/10th of their original size, while maintaining very good quality, made it a perfect solution for delivering audio over the Internet. We will also look a different formats for sound files.

28 Before sound and the Web, some basic principles of sound... Human Perception of Sound Sound is heard due to variations in air pressure, perceived by a person’s eardrums. Sound derives from a continuous pressure wave that travels through the air from the sound source to a person’s eardrum.

29 A continuous wave example Frequency – so many cycles per second Amplitude Amplitude of sound wave is a measure of its loudness. Frequency of sound wave is a measure of its pitch.

30 Lower wave has a higher frequency (more cycles per second) compared to upper wave



33 Sound phenomena Natural sounds are a combination (aka superposition) of many waves, and are not composed of just one wave. Any sound has a fundamental (i.e. basic) frequency. Other waves of different frequencies are added to it to create richer sounds E.g. Musical instruments typically have fundamental frquency plus overtones at multiples of the fundamental frequency.

34 Wave components Sound wave

35 Sound spectra Frequency content of sounds - varies over time Time-varying waveform from the end of a clarinet note

36 Digitization Problem: Computers cannot directly record a voice, store an image or capture a movement. Some media, e.g. sound wave, are analog in form - naturally represented by a continuous wave motion. - But computers deal with digital data – binary format – discrete waveform representing 0s and 1s. A process known as digitization is the key to use of analog media in computer. - Conversion of media from analog form to digital.

37 Analog media must be digitized by the computer: - Converted to a discrete digital (binary) signal (0s and 1s):  Text - each character represented by 1 - 2 bytes (8 - 16 bits)  Image - each “dot” is represented by a pixel (4 bytes - 32 bits) Digitized media can be manipulated by the computer. - Natural sounds need to be digitized.

38 1 1 00 Sound - analog waveform Sound - digital waveform Natural sound

39 Sampled Sound – sounds produced naturally. In nature, sound is a continuous wave - analog wave. But computers deal with discrete digital values, i.e. 0s and 1s. Must digitize (i.e. encode) sound to convert sound wave from continuous form to digital form: - Similar idea for images - computer cannot store the image itself so it divides it into an array of pixels, storing the colour and brightness of each separate pixel in memory.

40 Digitization of sound takes form of sampling - The computer “samples” (or measures) the loudness (i.e. amplitude) of the sound wave, typically 44,000 times a second (CD quality). - Each of these samples typically comprises 16 bits. E.g. 1 second of sound requires 16 * 44,000 bits = 704,000 bits = 176,000 bytes.

41 Typically the sampling rate and bit size of sample can vary. The higher the sampling rate and the bigger the sample size, the more faithful the sound reproduction. - But also the bigger the file size!

42 Analog Audio Source Sampling Stage = Sample 44 kHz (44,000 Samples/Sec)

43 Stage 1 Quantizing Stage Express sample values as binary values, e.g. 100100111011001

44 Few samples per second Many samples per second

45 MIDI Sound – Musical Interface Digital Instrument Used for representing sounds produced by electronic musical instruments - Produces much smaller files than sampled sound files. Such instruments do not produce analog sounds, but a sequence of values that represent the note being played, its loudness, time duration and type of instrument. (Compare a vector graphics image.) The sequence of values is then sent to a synthesizer. - Either transforms values into sound and/or stores the values in a file.

46 MIDI music may be combined and edited using a program known as a sequencer. Existing music files cannot be converted to MIDI format - Can only create MIDI music via MIDI instruments or sequencers.

47 MIDI files can be used in a Web site and converted to audible sound using appropriate browser plugin, e.g. QuickTime Player - Plugin acts as a synthesizer, re-creating sounds of various musical instruments from the MIDI code. MIDI files must be saved in the proper format, but they need not be compressed. MIDI can only be used for music, not for voice. MIDI is popular for mobile-phone ring tones.

48 Data compression is also important for audio and video on the Web. Compression techniques rely on - Removing repetition, e.g GIF format - Averaging, e.g. JPEG format, sound and video - Range reduction, e.g. volume of sound - Selectivity, e.g. colours, frequencies, movement - Frame difference, e.g. video

49 Compression Methods Sound-compression codecs are used - special software (or devices) to compress/decompress sound. - Repetition and Patterns - Averaging - Selectivity - Range Reduction E.g..mp3 - originated in a scheme to compress soundtracks of films. Aside: Codec - more accurately: coder/decoder

50 Audio on the Web The simplest way to add audio to a Web site is to use existing music, sound effects, or other resources. But, it is important to be aware of copyright issues! If the audio is copyrighted, then you need to get permission of the copyright owner. And to get permission, you usually need to pay licensing fees! The most common browser players for non-streamed audio are QuickTime and Windows Media Player. - But there are others!

51 Alternative: Preparing Your Own Audio The preparation of original audio requires a number of standard steps: - Recording the sound. - Basic sound editing. - Optimization for Web delivery.

52 Sound editing software  Audacity ( ) – Free!  Cubase ( ) - multitrack recording environment offers both MIDI and audio editing.  ProTools ( ) - multitrack recording environment.  Sound Forge ( ) - limited to editing stereo files.  Audition ( ) – professional package.

53 Adding Sound to a Web Page – Non-Streaming There are a few of ways to add sound to a Web page. A Simple Link You can link to a sound file from a Web page using the simple anchor ( a ) HTML element. The href attribute refers to the audio file. Play the song or Hyperlinks

54 When we do this, we have no control over how a user's Web browser will play the sound. It might open an external application (i.e. helper) in a new window, such as RealMedia Player or Winamp, or play the sound within the browser.

55 Embedded Sound It is possible to embed a sound file in a Web page so that the sound starts playing automatically when the page loads. But some Web design purists do not recommend it! - The problem with background sounds is that browser users have to turn the sound off (or adjust the volume) if they do not like it. - Furthermore, background music on a Web page is many times unnecessary and may appear as a distraction.

56 All browsers seem to be in a state of flux (aka chaotic!) at the moment with regard to supporting sound and video and, in particular, their support for the HTML 4 recommendation for multimedia, the element, is rather patchy. HTML multimedia markup that works in Firefox, for example, may not work in Internet explorer! HTML 5 has sorted things out somewhat.

57 Multimedia HTML elements HTML 4 embed Deprecated object HTML 5 embed Resurrected! audio video

58 In earlier versions of HTML, there was a (non- standard) element that worked well for embedded audio (and video). But the element was deprecated (i.e. made redundant) in HTML 4 (in favour of the element). - However, the is still supported by many browsers. Moreover, the element has been resurrected (in a new form!) in HTML 5, and browsers such as IE, Firefox and Chrome support it.

59 The embed element Any HTML embedded sound element causes a sound file to be downloaded into the browser, and then it starts playing. To do this, the browser looks for a plugin player to play the sound file. - Internet Explorer will use the Windows Media Player plugin for sound files. - Firefox and other browsers require you to install a suitable plugin such as the QuickTime player. It should be noted that the sound stops playing when the user leaves the page.

60 Example – use of the “HTML4” embed element By default, the embedded sound plays as soon as the page loads, and also the browser may display a “sound controller”. embed1.htm Firefox, chrome, IE Note: the appearance of the sound controller varies depending on audio player, e.g. Quicktime, Windows Media, etc. Note: The src attribute which identifies the audio file containing the sound is compulsory! Note!

61 The embed element is a non-standard, but well- supported element that is used to embed multimedia content in a Web page. The embed element has a number of attributes to control how the sound is played. See for an explanation of some of these attributes. However, the support for some of these attributes is patchy across all browsers.

62 Attributes

63 The main attributes for the embed element are src – media file name width – width of media player icon height – height of media player icon hidden – hide media player autostart – play immediately loop – play repeatedly

64 For controller slider bar The sound controller visual representation may be turned off by setting the height and width attributes to zero. Example embed2.htm Firefox, Chrome, IE

65 Example The sound controller visual representation may be turned off by setting the hidden attribute to true. embed2a.htm Firefox, Chrome, IE

66 object element Another option for embedded multimedia is to use the object HTML element. The element is the W3C HTML 4 recommended way to include objects such as images, audio, videos, Flash animations, etc. in a Web page. The object element allows you to specify the data and parameters for objects inserted into HTML documents, and the code that can be used to display/manipulate that data. Syntax...

67 The object element has a number of attributes.

68 Object element One important attribute is the name of the sound file – the data attribute Another is the type attribute which specifies the type (format) of the sound file. Also height and width attributes are available. embed5.htm Firefox, Chrome

69 The param element Depending on the media type and plug-in or player to be used, additional configuration values are required. The HTML element defines run-time settings for the multimedia object that is referred to by the element. It is nested inside the object element. Note

70 The object and param elements { "@context": "", "@type": "ImageObject", "contentUrl": "", "name": "The object and param elements

71 Unfortunately, Internet Explorer needs more configuration to properly render the object element. - IE requires the classid attribute for a specified player. The classid attribute is a hexadecimal code that uniquely identifies the media player, whether Windows Media Player, Quicktime, …

72 Example – embedding audio Windows Media Player Internet Explorer requires the classid attribute and the param attribute src ! This HTML works for IE, but not other browsers because it explicitly references the Windows player. object1.htm IE

73 Note that the previous HTML markup puts a Windows Media Player controller object on the Web page. Unless a browser has a Windows Media Player plugin, this HTML will only play in IE. It is also possible to use a different classid to embed a different player, such as the Quicktime player,... But cannot be demonstrated because of OCC restrictions!

74 A possible solution is to have two object tags: - One for IE - One for other browsers This approach IE conditional comments which are embedded in the HTML: --> HTML for non-IE browsers

75 Example --> object7.htm Firefox, Chrome IE

76 Others recommend nesting the embed element within the object element – the object element satisfies IE, and the embed element satisfies non-IE browsers. { "@context": "", "@type": "ImageObject", "contentUrl": "", "name": "Others recommend nesting the embed element within the object element – the object element satisfies IE, and the embed element satisfies non-IE browsers.", "description": "

77 Example object3.htm Firefox, Chrome IE

78 A good discussion is given here …

79 New HTML multimedia elements for HTML 5 References: examples-web-designers.html

80 The embed element - HTML 5 The element defines (any) embedded content for a Web page. This element was in early versions of HTML, and then removed in HTML 4. A revised version has now been introduced in HTML 5!

81 Attributes

82 Example – use of the HTML 5 embed element embed4.htm Firefox, Chrome IE Specifies HTML5 document

83 The audio element - HTML 5 The HTML5 audio element allows you to play sound through the browser. It is supported by all modern browsers. The audio element has various attributes to control it’s behaviour, such as whether or not to show sound controls; whether to auto-play; to play the sound a set amount of times or to have the sound play indefinitely, etc. Using the audio element, developers can provide sound content without the need for extra plugins.

84 Attributes

85 Currently, there are 3 supported file formats for the element: mp3, wav, and ogg

86 In conjunction with the element, the element may be used to specify multiple media resources. The tag allows you to specify alternative audio files which the browser may choose from, based on its media type or codec support.

87 Example Your browser does not support the audio element.

88 The next example is a great example of this element in action, combined with Twitter posts about HTML5. - The Web page loads 100 tweets related to HTML5, and displays them as “particles” using a JavaScript-based “particle engine”. - Each particle represents a tweet – clicking on one of them makes the tweet text appear on the screen.

89 The demo also uses the canvas HTML5 element. The element can be used to draw graphics using scripts (usually JavaScript). It can, for instance, be used to draw graphs, make photo compositions or do simple (and not so simple) animations. Check out the tutorial (and links) at

90 Web site: Explanation at

91 Questions?

Download ppt "INF 240 - Web Design Using Multimedia on the Web Sound - Part 1 Mmm … Music, Mmm … Motion, Mmm … Megabytes!"

Similar presentations

Ads by Google