VirtualMV/HTML/Basic/Multimedia/Audio

Introduction

Overview

Vaughan (1993), states that sound is perhaps the most sensuous element of multimedia. It is meaningful "Speech" in any language from a whisper to a scream. It can provide the listening pleasure of music, the startling accent of special effects, or the ambience of a mood-setting background. How you use the power of sound can make the difference between an ordinary multimedia presentation and a professionally spectacular one.

Sound can be included in a web site in several ways.

• As a background sound (added to the body tag)
• As a hyperlink, (usually the safest as the sound will play in the users default media player (e.g. Windows Media Player, Apple Quicktime)
• Embedded in a web page.
  • Using the default media plug-in (this is actually quite risky and often creates a blank box if the player is not active in the browser, or the format is not recognised by the player)
  • As a flash file. This will require a flash player, or a knowledge of flash so you can create a flash movie containing the audio file.
  • Using the HTML-5 <audio> tag. This is not yet (2009) widely supported.

On the web there are several sound formats. The most common being wav, mp3 and midi. These are supported in Windows via the Windows Media Player. Other formats that have their roots in other operating systems (Unix, Apple Mac) are supported via plug-ins, such as Real Audio (.ram).

Video without the pictures are also used as sound files, This includes avi , mpeg (or mpg), Apple Quicktime files (mov) and Windows Media Video (wma).

• Click here for some sample audio files

: Audio/Sound By the end of this page you will be able to: describe in-page and background sound create a web page using the <embed> tag

Link to a sound file

To link to a sound file

<a href="mmedia/tada.wav">tada.wav </a> (28KB)

This will bring up a media player and the sound will play.

Example Play audio_tada.wav (28KB) Notes: It is accepted practice to add the file size. This can be attached to a graphic.

Background sound

Background sounds can be added to web pages. You should keep the file size small to minimise download time, so MIDI or looping wave sounds are best. Be aware that in a page frequently visited, like a home page, background sound can become irritating. Also surfers are often listening to CDs or Internet radio stations, so keep the sounds short and relatively quiet. If you can add a sound of control.

Internet Explorer supports the tag, e.g.

<bgsound src="noise.wav" loop=1>

or

<bgsound src="noise.wav" loop=infinite>

Supported formats

Not all sound formats can be used as a background sound. The following list shows supported sounds and the Browsers (please update if you can)

• wav (all)
• midi (all)

Audio support in different browsers can be found at http://html5test.com/

• Chrome 14 (2011-09-30) PCM, MP3, AAC, Ogg Vorbis, WebM

Embedded sound in the Browser

HTML-5 proposes a new <audio> tag (HTML 5 <audio> Tag, 2009). This should greatly simplify audio (and video) in web browsers. Firefox and Chrome introduced support in 2009.

<audio src="cellphone.ogg" controls="controls">
Your browser does not support the audio playback.
</audio>

Embedded sound with player

Rather than using the IE specific tag, or having the Windows media player pop-up when you want to play a sound, it is possible to place a sound on your web page that is supported by both IE and Netscape, can be set to autostart and will support a sound player control box. This is the <embed> tag. This tag is used for inserting all types of multimedia in web pages, i.e. video, Flash animations, etc. as well as sounds. For example Wave (with control - using <embed> tag)

<embed> tag

When used for a background sound, the <embed> tag actually adds a sound player control box on the screen. So:

<embed src="noise.wav" autostart = "false" border=1 width=160 height=45>

adds a 160x45 pixel sound player control box with a 1 pixel border. The sound in this case will not start playing automatically.

However:

  <embed src="noise.wav" autostart="true" loop="yes">

will add a player box of default size and make the sound file start playing automatically. It is possible to hide the sound player control box, using:

<embed src="noise.wav" autostart="true" hidden="true">

Using the object tag

Windows media player

This will make sure windows media player is used to play the sound. (Not too sure how this is handled in Mac/Unix environments).

<object ID="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
  CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab# Version=5,1,52,701" 
  STANDBY="Loading Microsoft Windows® Media Player components..." 
  TYPE="application/x-oleobject" width="280" height="46">
  <param name="fileName" value="music.wma"></param>
  <param name="animationatStart" value="true"></param>
  <param name="transparentatStart" value="true"></param>
  <param name="autoStart" value="false"></param>
  <param name="showControls" value="true"></param>
  <param name="Volume" value="-300"></param>
  <embed type="application/x-mplayer2" 
       pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
       src="music.wma" name="MediaPlayer1" width=280 height=46
       autostart=0 showcontrols=1 volume=-300>
  </embed>
</object>

(Apple) QuickTime

This will make sure the apple QuickTime player is used to play the sound. (Not too sure how this is handled in Mac/Unix environments)(Playing QuickTime Movies, 2009).

<object width="160" height="144"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="music.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
 
<embed src="music.mov" width="160" height="144"
autoplay="true" controller="false"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>

mp3 players

• 10 Easy To Implement Flash Based Mp3 Players For Your Website
• PIMP3 {JAVASCRIPT MP3 PLAYER}

Web audio format support

• Google Chrome 3.x
  • <audio> tag - Native support for Ogg Theora video, Ogg Vorbis audio, H.264 video, AAC and MP3 audio
• Firefox 3.5
  • <audio> tag - Currently supported. Ogg Theora, Ogg Vorbis, and WAV.

Comment

Hesperides(3 months ago)Reply HideBlockApprove Christian Heilmanns Blog entry about HTML5 Audio and Video. http://www.wait-till-i.com/2011/01/16/lecturing-at-mit-about-html5-video-slides-and-lots-of-notes/

Add comments here (use -~~~~~)

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/HTML/Basic/Multimedia/Audio. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 21, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Multimedia/Audio    (zotero)