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

Code to Add Music to Your Webpage

Previous to html5, to play sound on your webpage required that the webpage load a codec, a piece of software that decompressed streaming digital audio data. The problem was that the links to the specific codecs required for a given audio file format often didn't work, so sound was unreliable. With html5, support for some audio file formats is built into the browser. To access it, use the audio element.

<audio src="SugarplumFairy.mp3" autoplay></audio>

One of the supported formats is the popular mp3 format. The code above shows how to play the music file "SugarplumFairy.mp3" in the background as soon as the webpage has loaded. When the sound file is in the same directory as the webpage all that is required is the music file name. If the sound file is NOT the same directory as the webpage, you'll need a relative or absolute path to the music file. The autoplay attribute causes the sound to play immediately.

<audio src="panther.mp3" controls></audio>

Configuring the sound to play automatically is discourteous to your website's visitors. Replacing the autoplay attribute with the controls attribute, as shown above, causes the audio element to display controls that allow your website's visitors to adjust the loudness, or to stop the sound. Of course you can use both the autoplay attribute and the controls attribute together.

Audio Control
Audio Control

<audio src="SugarplumFairy.mp3" controls loop></audio>

Since you've added controls, allowing your website's visitors to stop the sound, it would not be discourteous to add the loop attribute, as shown above, which causes the sound to continuously repeat, at least until the visitors uses the control to stop it.

Music Buttons
Music Buttons

One cool thing you can do is provide your own buttons to allow your website's visitors to play, pause, and adjust the volume of your music, as shown above. Here I've used code for the most basic buttons. With style code or graphic image buttons you can make your sound controls much more interesting.

<audio id="player" src="bundy.mp3"></audio>
<div>
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button>
  <button onclick="document.getElementById('player').volume += 0.1">Vol+</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol-</button>
</div>

Another cool thing you can do is allow your website's visitors to select a song from a list. The code shown below uses an html select elements onChange event to change the src attribute of the audio element, and then executes the audio element's play() function. Anytime the visitor clicks on the name of a song in the list, it begins playing. Plus controls are provided so the visitor has complete control.

<audio id="myaudio" controls></audio><br />

<select id="mylist" size="4" onChange="playAudio();">
<option value="0" style="font-weight: bold;">Select a Song</option>
<option value="adams.mp3">Adams Family</option>
<option value="bundy.mp3">Love and Marriage</option>
<option value="panther.mp3">Pink Panther</option>
</select>

<script>

function playAudio()
{
   var oAudio = document.getElementById("myaudio");
   var selects = document.getElementById("mylist");
   var selectedText = selects.options[selects.selectedIndex].value;
   if(selectedText != 0)
   {
      oAudio.src = selectedText;
      oAudio.play();
   }
}

</script>

Music List
Music List

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-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268