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

Example

Modify the code below, then click "Update". See below for attributes.

Source CodeResult

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 <audio> Element

The <audio> element supports a number of attributes - both global and local. To see a list of these, along with a description, visit the HTML5 <audio> tag page.

Using the <embed> Tag

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

Copy to Clipboard
<embed name="lostmojo" src="/web_design/lostmojo.wav" 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").

CodeResult

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad
Webydo Banner Ad