Adding background music to a page

Hi everyone,

I’m a student and a newbie to Github. I’m trying to create a website using Github. I’m a beginner to coding, but I know some basic HTML and markdown like the basic <h1>, <p> etc.

I followed an online tutorial to set up my basic page, which is working, but have a question:

I’d like to add a mp3 file so that there will be a background music that plays immediately when someone clicks on my website. Is that possible? (Also, I’m aware some people avoid adding auto-play music because it may be annoying, but  the music I intend to add is a soft instrumental music and this is for a school assignment so I would really hope to be able to add it.)

Thanks so much in advance, and I really appreciate any help!

The problem with embedding background music is that the different browsers out there have their own methods of implementing embedded music files.

For all versions of Netscape, as well as Internet Explorer (“IE”) 3.0 and above, you can use the following code:

<embed src="yourmusicfile.mid" autostart="true" loop="true"
width="2" height="0">
</embed>

The width and height attribute given above causes the player to be invisible. If you do not want it to be invisible, you can specify your own dimensions to suit your site decor.

For Opera and all IE versions, the following code works:

<bgsound src="yourmusicfile.mid" loop="infinite">

As you probably have noticed, IE 3.0 and above support both methods, so you cannot simply put both those tags into your web document in the hope of supporting all browsers. It will work on Netscape and early versions of IE, but the newer versions of IE will recognize both tags, leading to problems when IE tries to load the music file twice.

The workaround that I’ve seen on some sites, that seems to work for me, is to enclose the BGSOUND tag inside NOEMBED tags, thus preventing IE from interpreting the second tag.

<embed src="yourmusicfile.mid" autostart="true" loop="true"
width="2" height="0">
</embed>
<noembed>
<bgsound src="yourmusicfile.mid" loop="infinite">
</noembed>

This code appears to be compatible with all versions of IE, Netscape, Safari, Chrome, Mozilla and Opera.

<audio controls autostart="true">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

1 Like