Book Top Rank with Contact Details visibility for your Business, Profession, Products or Services

How to Add Background Music in HTML

Question by Saravana s On 12 July 2022, 09:07:06

(Page Views: 174)
Report This Question

Business educational posts are for free. Please pay us INR 1000 or USD 20 before posting marketing content otherwise we will delete your account without any notice.

Submit

Answer by Saravana s On 12 July 2022, 09:10:01

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

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.

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.

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​

Click here to read more