• Around The HomeToggle Menu

    • Entertainment
    • Productivity
    • Smart Home
  • FamilyToggle Menu

    • Parenting
    • Toys
    • Pets
    • Travel
  • Product ReviewsToggle Menu

    • Phones
    • Tablets
    • Laptops
    • Desktops
    • Wearables
    • Audio
    • Cameras
    • Headphones
    • Printers
    • Smart Home
    • TVs
    • Gaming and Video
  • One Cool ThingToggle Menu

    • Frugal Tech
    • Kickstarters
    • Videos
Techwalla
  1. Home
  2. Around The Home
  3. Productivity
  4. How to Add a Background HTML Music Code

How to Add a Background HTML Music Code

March 31, 2015
By: Michael Carroll
  • Share
  • Share on Facebook

Various methods of embedding music in a Web page have become popular since the early days of the World Wide Web. Notably, the "embed" tag in HTML, Java-based audio players and Flash-based players are all possible options for adding background music to a Web page, but no one solution has been universally embraced or is fully compatible with all browsers and platforms. The newer HTML5 standard includes the "audio" tag, which is specifically defined for embedded audio playback.

Video of the Day

...
Add background music to your website for users to enjoy as they browse.

Step

Add the following code anywhere in the body of your HTML document to embed a music file and play it automatically when a visitor browses your website.

Change the "src" attribute so that it contains the path and filename of the music file that you want to embed.

Step

Add the "loop" attribute if you want the music file to play over and over:

Step

Use multiple "source" tags instead of the "src" attribute of the "audio" tag if you want to offer the user's browser a choice of multiple file formats:

In this example, the user's browser will decide whether to play the MP3 file or the OGG file. This technique can be useful for targeting mobile devices that can only play certain audio formats.

Step

Nest the "embed" tag within the "audio" tag to provide support for older browsers that lack HTML5 support. Note that this use of the "embed" tag is deprecated (meaning it's no longer officially required to be supported), so only experiment with this technique if you suspect your users will be using outdated Web browsers. Here is an example:

Show Comments

Related Articles

How to Embed Flv Video in HTML

How to Embed Flv Video in HTML

Around The Home
Productivity
By: Brandy Alexander
How to Embed .M4V in HTML

How to Embed .M4V in HTML

Around The Home
Productivity
By: Robert Allen
How to Use Javascript to Play an MP3 File

How to Use Javascript to Play an MP3 File

Around The Home
Productivity
By: Michael Carroll
How to Create an HTML Login Page

How to Create an HTML Login Page

Around The Home
Productivity
By: Tim Searles
How to Convert an Image to HTML Code

How to Convert an Image to HTML Code

Around The Home
Productivity
By: Will Conley
How to Embed RTMP in HTML

How to Embed RTMP in HTML

Around The Home
Productivity
By: Willa Dunn
  • HOW WE SCORE
  • ABOUT US
  • CONTACT US
  • TERMS
  • PRIVACY POLICY
  • COPYRIGHT POLICY
  • Advertise

An error occurred. Try again later.

Thanks for signing up!
© 2018 Leaf Group Ltd. Leaf Group Media

Get great tech advice delivered to your inbox.

Keep your family productive, connected, entertained, and safe.

Please enter a valid email.