You are currently viewing Top 5 Methods to Add Background Music in HTML
  • Post category:HTML

Top 5 Methods to Add Background Music in HTML

How to Add Background Music in HTML

  You can add background music using an audio tag, embed tag, and iframe tag. In this article, I will tell you, which of these three tags to use, which tag is best to add background music and how to add background music in HTML from YouTube. You can add audio to HTML in the same way you add a video to HTML

Which tag is used to add background music in HTML

  There is no separate tag for adding background music. So, if you add your audio using the <audio> or <iframe> tag and then add the "hidden" attribute, it will appear as background music. For example, <embed hidden src="feelthebgm.mp3" ></embed>.

  If you are using an audio tag then you don’t need to add a “hidden” attribute. Because if you use the audio tag, the audio controls will be hidden by default, you only know the audio’s controls if you add an attribute called “controls”.

3 Methods to Add Background Music in HTML

You can add background music to your HTML using these 3 easy methods. And the other is 2 methods for how to add bg-music from youtube are given below

1. Audio element

 We can use the audio element to put audio files on a webpage. The HTML is quite simple and is similar to the image element with a few differences. Unlike the image, the audio element has both an opening and a closing tag. And just like the image element, we use an ‘SRC’ attribute (the source attribute) to provide the URL to the file. In this case, an audio file. The audio element also accepts other audio file formats like mp3, Wav, and Ogg. Then, the audio element is also written with a few more attributes.

The below code shows how to add background music using an audio tag.

<html>
<head>
<title>Background music</title>
</head>
<body>
<!--Single background music-->
<audio src="your audio file path.mp3" loop autoplay ></audio>

<!--Multiple background music-->
<audio loop autoplay >
<source src="your audio file path.mp3" type="audio/mp3">
<source src="your audio file path.mp3" type="audio/mp3">
</audio>
</body>
</html>
  1. You first type the HTML general syntax in your HTML file.
  2. Then add the <audio> element inside the bodyelement.
  3. If you want to add multiple background music, then enter the URL or path of your audio file in the ‘SRC’ attribute of the ‘source’ tag in the audio tag., like the code below. Or If you want to add only single background music, enter the URL or path of your audio file only in the ‘SRC’ attribute of the audio tag. Then you need to give your audio file format, Forex: feel.mp3.
  4. If you want your BGM to play automatically, add the ‘autoplay’ attribute to the audio tag.
  5. If you want, add a ‘loop’ attribute to the audio tag like the code below to play it back when finished.
READ ALSO  How to Change Font Color in an HTML Table

2. Iframe element

You can even add background music from youtube using an iframe tag, Let’s see how to do it next.

<html>
<head>
<title>Background music</title>
</style>
</head>
<body>
<iframe hidden src="your audio file path.mp3"
              allow="autoplay" ></iframe>
</body>
</html>
  1. First, you add the iframe tag inside the body tag
  2. Give your audio file path in the ‘SRC’ attribute in the iframe tag as you did in the audio tag method. Don’t forget to add your audio format to the end of the “SRC” attribute
  3. And the “hidden” attribute to the Iframe tag, If added, the frame will disappear and it will be like background music.
  4. If you want your audio to autoplay you need to give the allow="autoplay" attribute

3. Embed element

<embed src="your audio file path.mp3" width="0" autostart="true" ></embed>
  1. Add the embed tag between the body tag in HTML.
  2. Give your audio file path and audio file format in “SRC” Attribute here as you did in an iframe and embed tag
  3. Since it doesn’t have a hidden attribute, so we have to use the width attribute and give the value “0” to hide the frame
  4. If you want your audio to play automatically, use the "autostart" attribute and give it a value of “true".

How to Add Background Music from Youtube Online

 If you want to add BGM from youtube you must have an internet connection, Because in both these methods your YouTube video is running in the background. I don’t recommend adding BGM from youtube, because your site will be slow, BGM will take some time to play and you will need internet. So if you download audio from youtube and add BGM using an audio tag or iframe tag your site will be speed and the internet is not required in this method.

READ ALSO  How to Create a Dotted Line in HTML.

1. Add bg-music from youtube

If you want to add background music from youtube, follow these simple steps:

  1. First, go to youtube and select your video.
  2. Click share below the video and then click Embed.
  3. how to add background music in htmlCopy the given iframe tag code and paste it into the HTML body tag.
  4. how to add background music in htmlJust Paste the code “?autoplay=1” at the end of the youtube link in the “SRC” attribute in the iframe tag given by them, like the below code. Only if you do this correctly will your music play automatically.
  5. And add the “hidden” attribute to the iframe tag. If you add it, the video will disappear and it will look like background music.
<iframe hidden src="https://www.youtube.com/embed/q0fLF0XHGTc?autoplay=1" >
</iframe>

2. Add bg-music from Youtube Repeater

  1. Go to youtube repeater and select your video.
  2. Copy your video URL.

how to add background music in html

3. And add the “hidden” attribute to the iframe tag. If you add it, the video will disappear and it will look like background music.

<iframe hidden src="https://www.youtuberepeater.com/watch?v=5xwM12SOXEE#gsc.tab=0">
</iframe>

Solved Chrome AutoPlay not Working

I want to talk a little bit today about the autoplay policy in google chrome and why it actually is so critical to know if you want to use the web audio API correctly. You see the developers at Google decided to implement this new autoplay policy in order to help deliver a better user experience. A lot of us would probably agree if you went to a website and all of a sudden just got an unexpected blast of the sound coming at you you’d probably be really annoyed and that’s the whole purpose of this autoplay policy in google chrome. TO prevent that bad user experience. This ultimately really got launched and implemented in browsers at the end of 2018.

  Although they tried to implement it a little bit earlier and a lot of developers ended up getting annoyed because it actually went and broke their code o then they went and reverted back to the old way for a little while so developers could have more time to prepare and adjust their code accordingly.

Conclusion

In these 5 ways, you can add background music to your HTML. BGM doesn’t autoplay in the google chrome browser Because there is something called google autoplay policies in which they have disabled the autoplay option. These 5 methods will work in all other browsers like firefox, internet explorer, opera, and Microsoft edge.

This Post Has 2 Comments

  1. Yashraj April 30, 2023 Reply

    Not working tried everything but background music playback is not working unless you add controls to it!

    Thats Sad i am using chrome

Leave a Reply