Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Play Music on Your HTML5 Web Page

In the past it was difficult to set your webpage to play music. Only Internet Explorer could play music without a plugin. Not many of your webpage visitors are going to go through the trouble to install a plugin in order to hear your music. Today newer versions of Internet Explorer, Firefox, Opera, Chrome, and Safari support the HTML5 <audio> element, which provides a standard way to embed an audio file on your webpage.

If you just want to play background music with your webpage, use the code shown below.

<audio src="filepath/filename.mp3" autoplay loop></audio>

In this code, the src attribute defines the path to your music file on your web server. The autoplay attribute causes the music to start playing immediately, and the loop attribute causes the music to loop continuously.

If you want to display some controls, which allows your visitor to stop the music and control the volume, use the code shown below.

<audio src="filepath/filename.mp3" autoplay controls></audio>

If you want to display the controls, but don't want the music to start playing immediately, instead giving your visitor the option to start the music, use the code shown below.

<audio src="filepath/filename.mp3" preload="auto" controls>
</audio>

Although the code shown above does not start the music playing immediately, the preload attribute set to auto causes the music to start loading immediately. Why increase your webpage's load time if your visitor may choose not to paly the music? Instead, set the preload attribute set to none, which causes the music to load only when your visitor clicks on the Play button. The code for this is shown below.

<audio src="filepath/filename.mp3" preload="none" controls>
</audio>

If you want to allow your visitor to select background music from a play list, you can use a drop-down list.

Background Music

music is "Cosmic" by Frank Nova, "Maestro" by Brian Boyko, and "Jashands" by Peter Gresser. All downloaded from freepd.com

The html code for a drop-down list and the javascript code to make it work is shown below.

<script language="javascript">
function Play()
{
   if(choice.options.selectedIndex == 0)
   {
      document.getElementById('music').pause();
      document.getElementById('music').src = "cosmic.mp3"
      document.getElementById('music').play();
   }
   if (choice.options.selectedIndex == 1)
   {
      document.getElementById('music').pause();
      document.getElementById('music').src = "maestro.mp3"
      document.getElementById('music').play();
   }
   if (choice.options.selectedIndex == 2)
   {
      document.getElementById('music').pause();
      document.getElementById('music').src = "jazzhands.mp3"
      document.getElementById('music').play();
   }
   if (choice.options.selectedIndex == 3)
   {
      document.getElementById('music').pause();
   }
}
</script>

<audio id="music" src="cosmic.mp3" autoplay loop></audio>

<select id="choice" onChange="Play()">
    <option value="cosmic.mp3">Cosmic</option>
    <option value="maestro.mp3">Maestro</option>
    <option value="jazzhands.mp3">Jazzhands</option>
    <option value="no background music">No Backgroud Music</option>
</select>

Note this code uses the audio elements play and pause methods, along with setting its src property.

By using the audio elements play, pause and volume methods, you can design your own control. Example code for this is shown below.

<audio id="demo" src="SugarplumFairy.mp3"></audio>

<span style="border-style:solid; padding:6px; background-color:blue;">
  <button onclick="document.getElementById('demo').play()">> Play</button>
  <button onclick="document.getElementById('demo').pause()">= Pause</button>
  <button onclick="document.getElementById('demo').volume += 0.1">+ Volume</button>
  <button onclick="document.getElementById('demo').volume -= 0.1">- Volume</button>
</span>

You can improve on this greatly by using images for buttons and combining it with play list drop-down list described above. I could show you exactly how to do that, but I wouldn't want to ruin your fun.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268