The potential for video and audio to augment your site is immerse. However, implementation needs some judicious and careful thinking on how this resource will be consumed by your audience. Thus, the objective of the site or page where the audio files are embeded, will have a significant bearing on how the interface and user interaction are designed.
Audio
Up to now, playing audio in a web browser has been a bit of a black art. Traditionally there are several ways to embed a sound in a web page
— some work better than others, and many only work if you happen to be using the right browser with the right plugin.
The ubiquity of the Flash plugin has helped to a large extent, since Flash makes it easy to embed audio in a way that works with most browsers.
However, this doesn't help with browsers such as Safari on the iPhone and iPad, which don't support Flash at all.
Fortunately, HTML5 looks set to make life easier for us developers, thanks to its audio element. This element lets you embed an audio file in a
web page, as well as control playback of the sound using JavaScript. More importantly, it doesn't require any plugin to work, and is supported
by nearly all modern web browsers.
First and foremost the audio is there to enhance the experience of the user. Thus, they should not be
intrusive. One of the easiest ways to use sound is to trigger the playback of a music file as the page loads - this should not be too evasive as to
be more of a distraction. Current net etiquette strongly advocates that the user should be in control of all aspect of the sound as
demonstrated here. Note the sound file embeded in this page at the top of the right column. You have to click the play control to get it to play.
Prior HTML5, if you wanted to embed an audio file into your web page, you had to use a third-party plug-in such as Flash Player.
For example, to embed an MP3 audio file in your web page and make it available via Flash Player, you might use the following code:
<object type="application/x-shockwave-flash"
data="player.swf?audioURL=myAudio.mp3&autoPlay=true"
height="27" width="320">
<param name="movie"
value="player.swf?audioUrl=myAudio.mp3&autoPlay=true">
</object>
.
Using HTML5, you can be more succinct:
<audio src="myAudio.mp3" controls autoplay></audio>
This snippet of HTML5 code achieves the same result as the more verbose code for Flash Player: It embeds an audio file into a web page to play automatically. You can see just how much easier and neater HTML5 code can be.
Audio codecs:
The HTML5 specification initially had made support for the Ogg Vorbis codec mandatory, but Apple and Nokia's challenge put an end to this. Browsers today support more audio codecs than video codecs, so you have more choices when deciding what to use:
- Firefox supports Ogg Vorbis and WAV.
- Safari supports MP3, AAC, WAV, and MP4.
- Internet Explorer 9 supports MP3, AAC, and MP4.
- Opera supports Ogg Vorbis and WAV.
Using the source element
As noted earlier, you'll need to provide audio files for at least two different codecs to cover all browsers that support HTML5.
You use the source element to accomplish this.
An audio element can contain multiple source elements, so you can provide your audio in multiple formats. Extending the previous example,
you can specify both an Ogg Vorbis and MP3 source for the same audio content as follows:
<audio autoplay controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAudio.mp3" type="audio/mp3">
</audio>
When the browser parses the audio element, it will proceed through the list of source elements sequentially until it finds a file format that it
can play. Once it does, it plays it and ignores any subsequent elements.
In this case, Firefox and Opera would play the Ogg file. Chrome would also play the Ogg file, even though it is also capable of playing the
MP3 file. Safari and Internet Explorer 9 would play the MP3 file.
Legacy fallback:
Not everyone uses a browser that supports HTML5. Older versions of Internet Explorer (version 8 and below), for example, are still quite
popular.
To support users who are using these browsers, you can use a third-party plug-in such as Flash Player to embed audio files, just as
you would have before the arrival of HTML5 and native multimedia.
Browsers disregard what they don't understand, so your HTML5 audio and source elements will be completely ignored by older browsers
such as Internet Explorer 8. For example, you might use the following code to add a link to the audio file:
<audio autoplay controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAudio.mp3" type="audio/mp3">
Older browsers will simply display the "Download the audio file" link and ignore the rest. To add fallback support via Flash Player (as well as the download link) you can use the following code:
<audio autoplay controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAudio.mp3" type="audio/mp3">
<object type="application/x-shockwave-flash"
data="player.swf?audioUrl=myAudio.mp3&autoPlay=true">
<param name="movie" value="player.swf?audioUrl=myAudio.mp3&autoPlay=true">
</object>
</audio>
As you must have seen from above, browser compatibility is still an issue designers should be aware of when using sound on the web.
The problem is as always with the implementation of standards within different browsers. Flash again comes to the rescue if you want all your
audience to play or listen to audio files.
For All You AudioFile Out There
As demonstrated in the preceding section, audio on the web has come a long way. Are you a budding musician who wants to expose his or her tunes
to the public in a format that you have total control i.e. they might be listened to online or be downloaded as MP3 files or any other format you prefer.
Podcasting is another form of expressing yourself on the web. If what you say can be recorded then it can be broadcast on the web to a potential
audience of millions. But that is only the beginning. Host it on a streaming server and you just about start to realise the potential of the web - because
that in essence is radio broadcasting on the internet. Anyone log on to your site from Timbuktu to Tokyo will hear
what you have to say.
Audio on the web just as video has come up in leaps and bounce. One thing that is certain though, is that it is now a lot easier to incorporate video
and audio on web pages without using expensive software. What ever your reasons, we have the expertise to design a bespoke interface to satisfy
your needs. Talk to us
