HTML Background Music Code
You can add HTML background music code to your website by using the
<audio> element, but omitting the
controls attribute. The
controls attribute specifies that there should be controls (such as a "Play" button, "Pause" button etc) so by removing this attribute, no controls will be displayed.
You can test this using the example below. The example currently contains the
control attribute. Try replacing that attribute with
autoplay, then clicking "Update".
If you can't see the above example, your browser may not yet support the
<audio> element (this element was introduced in HTML5). For browsers that don't support this element, you can nest the
<embed> element inside the
<audio> element. By doing this, incompatible browsers will ignore the
<audio> element and go straight to the
<embed> element. Although this element was also only introduced in HTML5, it has been around for a long time (but just not part of the official HTML specification), and it has widespread support among browsers.
Attributes for the
You can also add HTML background music code to your web page using the
hidden attribute of the
<embed> tag. Again, you might like to nest this tag inside the
<audio> tag for maximum browser compatibility. To do this, see HTML Music Code.
Example Background Music Code
<embed name="GoodEnough" src="/music/good_enough.mp3" loop="false" hidden="true" autostart="true">
This code will run music in the background as soon as the page loads. See/hear the result.
Adding Audio Controls
When using the
<embed> element, if you want your users to be able to control whether the background music plays or not, you can simply remove the hidden attribute (or change it to "false"). You can also add width and height to the controls. It's also a good idea to turn autostart off (
autostart="false"), although this doesn't work in all browsers.
<embed name="lostmojo" src="/web_design/lostmojo.wav" width="150" height="90" loop="false" autostart="false">