Combine HTML Boilerplate and Twitter Bootstrap

They both are great ways to get you up and running but they are not competing boilerplates. In fact, they work quite well together. I would like SASS to be brought into Twitter Bootstrap instead of LESS but I’m sure that will soon be on its way. But for now the easy way to combine these two great boilerplates is to use http://www.initializr.com/.

It is fairly straightforward and once you arrive on the site you can click what you need. Pretty cool stuff. Big time saver. This article talks about the two boilerplates in more depth:

How do I use HTML5 audio on my web site?

Unfortunately, HTML5’s support for sound is not great. They are working on it and if you just want to play some songs on your site, it won’t be a problem. But if you are building a powerful game, you’ll have to use Flash still.

Here’s the code you’ll need to use:

[prettify]

[/prettify]

You can use the boolean ‘autoplay’ (handle with care as autoplaying video might tick off your site users) as well as the ‘controls‘ to let the person scroll through the audio and play and pause it (remember both autoplay and controls are optional). The player is native to the browser and will look different depending on which browser you are viewing it in.

What formats are supported by which browsers? Check out the chart below:

chart displaying current support for audio by all major browers
chart displaying current support for audio by all major browers (http://www.findmebyip.com/litmus/)

You’re going to need to convert your .mp3 files into .ogg files and you can do that for free here.

If you need a free program to create .mp3 files, use audacity.

My other blog shows you how similar adding video with HTML5 is.