Welcome to Bucaro TecHelp!

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

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

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.

More Java Script Code:
• Easy Java Script Code to Fill Array With Random Numbers
• JavaScript 24-Hour Trainer
• JavaScript Cookbook
• Easy Code to Add Mouse Trails to Your Webpage
• Easy Rollovers
• What is a Regular Expression?
• Easy Java Script Timer Code
• Prevent Automated Form Submissions With Java Script
• JavaScript to Set Checkbox to Readonly
• Easy Slide Show Code

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



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