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.