Code Talk: How can we add background Audio On Webpage HTML5?

Code Talk: How can we add background Audio On Webpage HTML5?

As a continuation about the basic HTML5 <audio> tag from our previous article about this subject here. We had a request from Donald in London to show an basic example of how to add background audio to a webpage.
In this article we show an example of how to add very simple background audio to a webpage in HTML5. It is important to note, that this example is the most basic aproach to this and is not without its limitations. I will explain further in this article.

Here is a code example.

<audio src=”My-Audio.mp3″ autoplay></audio>

As you can see above it is very easy to achieve this in HTML5. Simply copy the code above and paste it to your HTML any where in between the opening “<body>” and closing “</body>” tag, and remember to replace the “My-Audio.mp3” with your audio source and you are good to go.

Fallback Code:

You can add additional audio sources to this codefor browsers that do not support mp3 such as ogg or wav etc. (See here for example) If you do not have these additional audio formats there are many free online audio converters or another way is to download and use Audacity which is a free open source software you can use their “readme” files which will explain how to covert your audio using Audacity.

Limitations:

The above code has its limitations. For example there obviously has no controls for the audio ie. no ‘stop’ or ‘play’ functions and no ‘volume control’ etc. Also some mobile operating systems prevent autoplay function and play has to be initiated by the user. There are probably Javascript workarounds for this but as these mobile operating systems get updated most workarounds will probably cease to work in the near future.

The above code will work on most modern browsers that support HTML5 on a desktop computer.

I hope that this was helpful?
Please contact me if you require any more information or if you have any more comments that you wish to add to this section.

Please add/like us to your Facebook in the tab at the top of the page. and we will add to yours.