In this tutorial we will show you the solution of background music HTML autoplay, in HTML there are many tags with the help of which you are able to play music as background music with the property of autoplay.
Some websites use this kind of method to show their creativity and for impressive effect on user. Most times, website having music background use the music files for their background.
These files may be hidden sometimes. And many times are displayed in very creative way with the help of css.
Step By Step Guide On Background Music HTML Autoplay :-
Now, as we know that there are many ways with the help of which you are able to add music in background. We have already done some articles of music files.
But this time, we have to play music as background which is autoplay and may be looped or not.
For hide it, you only have to use display none in CSS or also can apply hidden attribute, if you know how to use it.
<!DOCTYPE html> <html> <head> <title> Title of the document</title> </head> <body> <embed src="music_file.mp3" loop="true" autostart="true" width="20" height="10"> <audio controls autoplay> <source src="file.mp3" type="audio/mpeg"> <source src="file.org" type="audio/org"> Your browser does not support the audio element. </audio> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we show you an example of insert audio files. For reference we use here two tags. The first one used here is embed tag whereas the other one is audio tag. Let us understand embed first and after this audio.
- In embed tag, we use src, loop, autostart, width and height. Src is used for location of source file, loop is used for continuously playing. Width and height for dimensions. And autostart for auto playing.
- The next tag used in body is audio tag which act as parent tag and under this we use source tag. Source tag is child tag of audio tag.
- First in source tag, we define source of file with one other attribute that is type. In which we define the type of document linked. Now, in audio tag we use attribute like controls and autoplay which are used to show controls and make audio file autoplay respectively.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that now you are able to play background music in html with the property of autoplay. I hope this tutorial on background music HTML autoplay helps you.
About Amruta
