HTML Background Music Code

How to add background music to a website using HTML.

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.

Try It

You can try this using the example below. Update control with autoplay, then click Refresh Result.

This will hide the controls and automatically play the music in the background.

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.

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.