Mootzproductions logo



JDM Blog

How To Add Background Audio To A Webpage HTML5

Friday, October 24, 2014

How To Add Background Audio To A Webpage HTML5

We can add background audio to a webpage by simply adding just one or two lines of code.

It is simular to our first Code Talk articleabout The HTML5 Audio tag but we just replace the " <controls>" tag with the <autoplay>" tag.

Here is an 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.

There are some limitations when using this example more information can be seen in our article here.

Basic Web Audio Player HTML5

Monday, October 20, 2014

Basic Web Audio Player HTML5

In my opinion, to add audio to your website we should all be using HTML5.

With just a few lines of code we can have a basic audio player. My Article here.

I want to concentrate primarily on audio and keep to the basics to try to make it as easy as possible for beginners or for those that are new to this.

HTML5 is the next major version of HTML, the primary standard that determines how web content interacts with browsers. HTML5 supports audio and video playback natively in the browser, importantly without requiring a plug-in. With HTML5, you can add media to a webpage with just a line or two of code.


<audio> tag makes it simple to add your media to your website. Just include the <audio> element, use the src attribute to identify the media source, and include the controls attribute. For example.

<audio src="mysong.mp3" controls></audio>

The Result should look like this. View an example on a page


This player should play in Safari,Chrome and Firefox at this time of writing. (See browser support) We can add further support for more browsers by adding more audio file types. We discuss this further in my article and more details about this subject which can be seen here.