Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Inserting Audio : Page 3

In this section, you'll learn how to insert audio into your site.


advertisement

Embedding Sound
Embedding sound into your Web site allows you to hear sound when the page is loading or after its loaded. You can also control how long the sound plays for, and whether the sound "loops" so you hear the same sound over and over again.

<embed>

The embed tag allows you to insert audio into your Web page. It also allows you to define an audio console—or control box—so your readers can control the sound. You should see an audio console on this very page. Audio consoles do not seem to appear with IE 4.0 for the Macintosh, however.

The newer versions (4.0 and above) of both Netscape and IE support this tag. It tells the browser it is encountering a plug-in of some sort. You may use the embed tag to display the plug-in—a sound file in this case—within a rectangular block or you may choose to hide the plug-in's visual representation. When the reader clicks on the embedded sound it either downloads, then launches and plays, or the page begins to start and then the sound plays.



We've embedded a sound file, complete with an audio console, on this very page. Refresh or Reload this page to hear the sound again.

The code embeds a file called "8990.mid" into the page, starts it automatically as soon as the browser parses the embed tag, plays it only one time, and states there is an audio console.

The code in our page looks like this:

<embed src="../assets/devx/8990.mid" autostart=true loop=false height=62 width=144 controls="console">

  • The "embed src=" portion of the code refers to the location of our sound file.

  • The "autostart=true" command tells the browser to start playing the sound file immediately.

  • The loop=false command tells the browser to only play the file once.

  • The rest of the code refers to the audio console. The "CONTROLS="console" tells the browser to display an audio console, and the rest of the code defines the height and width of the console.

We also placed a background sound function into this page, for cross platform browser compatibility.

You use two types of switches when you embed audio: switches that define the source of your sound clip and tell your browser how to play it (general switches); and audio console switches, which determine what your console looks like.

General Switches:
src=URLname is the name of your sound file

loop=true/false/X tells the browser how many times to play the sound file. True has it loop infinitely. False has it play just once. The number 2,3,4, etc. tell the sound to loop a specified number of times. Do not use the values 0 or 1 as different browsers do not use these values in the same way. Loop="-1" plays the sound file infinitely.

autostart=true starts the sound playing automatically when the page loads. If you leave out the autostart switch, the sound will start playing only when the reader uses the sound controls to start it playing.

Console Switches:
To insert an audio console into your Web page, you use the controls= switch. This switch embeds the visible audio player (or console). Readers can stop, pause, reverse, rewind, and re-play the sound depending on how many controls you give your audio console. Make sure to test audio consoles on different browsers. Different browsers display consoles differently, and some browsers won't display consoles at all.

The following is a list of several different types of consoles you can embed into your Web page:

  • CONSOLE
    This embeds a "full" console, which displays a stop button, a play button, a volume button and a pause button.
  • SMALLCONSOLE
    The smallconsole displays a play button, a stop button and a volume slider. This command sometimes works, and only with Netscape Navigator.
  • STOPBUTTON
    This command embeds a player with only a stop button. This command works with Netscape Navigator.
  • VOLUMELEVER
    Only a volume lever will show on this console. This command only works with Netscape Navigator.

You can also define whether the console is visible or not, it's height and width, whether it has a border around it or not, and it's alignment in relation to the text of your Web page. The following switches are used within the <Embed> command:

hidden=true hides the sound file player. Your readers won't be able to see any visual sign of the file. When people are embedding sound for background music, they'll typically hide the file. If you want to displays the sound file player, leave out the hidden= switch and use the controls, height, width, and align tags to place the sound player in the browser window.

height=XX defines the depth of the block, in pixels, in which you want the sound player to appear.

Width=XX define the width of the block in pixels, in which you want the sound player to appear.

frameborder=no removes the border from the sound player window.

border=XX sets a width for the sound player window border. This command doesn't appear to work in IE 4.0.

Align= This command determines where where the console is located. It's based upon the text that follows the Embed command.

Some of the switches you can use with the Align command include:

  • TOP: This command should align the player along the top edge of the text that follows the command. Unfortunately, it doesn't work on all browsers.
  • BOTTOM: This command should align the sound player to the bottom edge of the text that follows the command. Again, this command doesn't work on all browsers.
  • BASELINE: This command aligns the console along the bottom edge of the text.
  • LEFT: The console will appear to the left of the following text. This command works with Netscape 3.0 and above, and I.E. 4.0 and above.
  • RIGHT: The console will appear to he right of the following text. This command works with Netscape 3.0 and above, and Internet Explorer 4.0 and above.
  • ABSMIDDLE: The command places the console to the absolute center of the text.

When using the embed tag:

  • If you place the embed tag at the beginning of the HTML file, the sound will start playing first, then the rest of the page will load.

  • If you place the tag in the middle of the HTML file, the page will start loading, the sound will begin playing, then the rest of the page will load.

  • If you place the tag at the end of the HTML file, the page will load and then the sound will play.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date