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.
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.
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.
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.