Transcript 11Sound1

INF 240 - Web Design
Using Multimedia on the Web
Sound - Part 1
Mmm … Music, Mmm … Motion, Mmm … Megabytes!
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.
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.
>>
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!).
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.
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.
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.
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.
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.
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.
Sound
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.
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.
Downloading versus Streaming
Two main ways to “deliver” a sound (and video) file to a
Web page:

Non-streamed - the complete file is first

Streamed - “stream” file to browser - user listens
downloaded to browser from the Web server, then it is
played.
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.
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.
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.
Common Audio File Types
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.
.mp3
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.
.ogg
.m4a
MPEG-4 Audio
This audio-only MPEG-4 format is
supported by Quicktime, iTunes, and iPod/iPad.
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.
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.
A number of media players such as Quicktime,
RealPlayer and Winamp are banned at AUBG!
The OCC recommends the VLC player instead.
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.
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 ...
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.
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.
A continuous wave example
Amplitude
Frequency – so many cycles per second
Amplitude of sound wave is a measure of its loudness.
Frequency of sound wave is a measure of its pitch.
Lower wave has a higher frequency
(more cycles per second) compared
to upper wave
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.
Sound wave
Wave
components
Sound spectra
Frequency content of sounds - varies over time
Time-varying waveform from the end of a clarinet note
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.
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.
Sound
- analog
waveform
Sound
- digital
waveform
Natural sound
1
1
0
0
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.
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).
bits.
- Each of these samples typically comprises 16
E.g. 1 second of sound requires 16 * 44,000 bits =
704,000 bits = 176,000 bytes.
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!
Analog Audio Source
Sampling Stage
= Sample
44 kHz (44,000 Samples/Sec)
Stage 1
Quantizing Stage
Express sample values as binary values,
e.g. 100100111011001
Few samples
per second
Many samples
per second
MIDI Sound – Musical Interface Digital Instrument
Used for representing sounds produced by electronic
musical instruments
files.
- Produces much smaller files than sampled sound
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.
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.
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.
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
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
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!
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.
Sound editing software

Audacity (audacity.sourceforge.net) – Free!
Cubase (www.steinberg.net) - multitrack recording
environment offers both MIDI and audio editing.

ProTools (www.digidesign.com) - multitrack
recording environment.

Sound Forge (www.sonicfoundry.com) - limited to
editing stereo files.

Audition (www.adobe.com/products/audition) –
professional package.

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.
<a href="audio/song.mp3"> Play the song </a>
or
Hyperlinks
<a href="groovy.mp3">
<img src="buttons/playme.gif"> </a>
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.
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.
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
<object> 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.
Multimedia HTML elements
HTML 4
embed
Deprecated
object
HTML 5
embed
audio
video
Resurrected!
In earlier versions of HTML, there was a (nonstandard) <embed> element that worked well for
embedded audio (and video).
But the <embed> element was deprecated (i.e. made
redundant) in HTML 4 (in favour of the <object>
element).
- However, the <embed> is still supported by
many browsers.
Moreover, the <embed> element has been resurrected
(in a new form!) in HTML 5, and browsers such as IE,
Firefox and Chrome support it.
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.
Example – use of the “HTML4” embed element
Note!
embed1.htm
<embed src="jazz.mp3" >
Firefox, chrome,
IE
Note: The src attribute which identifies the audio file
containing the sound is compulsory!
By default, the embedded sound plays as soon as the
page loads, and also the browser may display a “sound
controller”.
Note: the appearance of the sound controller varies depending on
audio player, e.g. Quicktime, Windows Media, etc.
The embed element is a non-standard, but wellsupported 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
http://reference.sitepoint.com/html/embed
for an explanation of some of these attributes.
However, the support for some of these attributes is
patchy across all browsers.
Attributes
http://www.htmlcodetutorial.com/embeddedobjects/_EMBED.html
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
Example
The sound controller visual representation may be
turned off by setting the height and width attributes
to zero.
For controller slider bar
<embed src="jazz.mp3" height="0" width="0" >
embed2.htm
Firefox, Chrome,
IE
Example
The sound controller visual representation may be
turned off by setting the hidden attribute to true.
<embed src="jazz.mp3" hidden=“true”>
embed2a.htm
Firefox, Chrome,
IE
object element
Another option for embedded multimedia is to use the
object HTML element.
The <object> 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
<object> ... </object>
The object element has a number of attributes.
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.
<object data=“jazz.mp3" type="audio/mpeg">
</object>
Also height and width attributes
are available.
embed5.htm
Firefox, Chrome
The param element
Depending on the media type and plug-in or player to
be used, additional configuration values are required.
The <param> HTML element defines run-time settings
for the multimedia object that is referred to by the
<object> element.
It is nested inside the object element.
<param name=“…" value=“…" />
Note
The object and param elements
<object …
<param … />
<param … />
…
…
</object>
Example
<object data="jazz.mp3" type="audio/mpeg">
<param name="autostart" value="true" />
</object>
Object1a.htm
Chrome
Firefox – no controller
Not IE
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, …
Example – embedding audio
Windows Media Player
<object data=“jazz.mp3" type="audio/mpeg"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name=“autostart" value=“true" />
<param name=“src" value=" jazz.mp3 " />
</object>
object1.htm
IE
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.
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!
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:
<!--[if !IE]>-->
HTML for non-IE browsers
<!--<![endif]-->
Example
<object data="jazz.mp3" type="audio/mpeg" classid="clsid:22D6F312B0F6-11D0-94AB-0080C74C7E95">
<param name="src" value="jazz.mp3" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object data="jazz.mp3" type="audio/mpeg">
<param name="autostart" value="true" />
</object>
<!--<![endif]-->
</object>
object7.htm
Firefox, Chrome
IE
Others recommend nesting the embed element within
the object element – the object element satisfies IE,
and the embed element satisfies non-IE browsers.
<object …
<param … />
<param … />
<embed … />
</object>
Example
<object data=“jazz.mp3" type="audio/mpeg"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name=“autostart" value=“true" />
<param name=“src" value=" jazz.mp3 " />
<embed src="jazz.mp3" autostart="true">
</object>
object3.htm
Firefox, Chrome
IE
A good discussion is given here …
http://alistapart.com/article/byebyeembed
New HTML multimedia elements for HTML 5
References:
http://www.alistapart.com/articles/previewofhtml5/
http://www.crearedesign.co.uk/blog/web-designers/html5examples-web-designers.html
http://html5doctor.com/
The embed element - HTML 5
The <embed> 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!
Attributes
http://www.w3schools.com/tags/tag_embed.asp
Example – use of the HTML 5 embed element
<!DOCTYPE html>
<html>
<body>
Specifies HTML5 document
<embed src="jazz.wav" >
</body>
</html>
embed4.htm
Firefox, Chrome
IE
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.
Attributes
http://www.w3schools.com/tags/tag_audio.asp
Currently, there are 3 supported file formats for the
<audio> element:
mp3, wav, and ogg
In conjunction with the <audio> element, the <source>
element may be used to specify multiple media
resources.
The <source> tag allows you to specify alternative
audio files which the browser may choose from, based
on its media type or codec support.
Example
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
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.
The demo also uses the canvas HTML5 element.
The <canvas> 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
https://developer.mozilla.org/en/Canvas_tutorial
Web site:
http://9elements.com/io/projects/html5/canvas/
Explanation at
http://9elements.com/io/?p=153
Questions?