Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Play Music on Your HTML5 Web Page

By Stephen Bucaro

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.

More Java Script Code:
• A JavaScript Function That Returns a Function
• JavaScript Variable Scope
• Java Script Code to Calculate Speed / Distance of Falling Object
• Easy Java Script Windows
• Java Script Math Object Trigonometric Methods
• Let Your Web site Visitors Set Font Size
• Easy Expanding Banner Code
• Easy Java Script Form Validation
• Creating Basic Java Script Functions
• Create Your Own Database Using Only Notepad : CDV