As with the video element, in the past the only method of embedding audio files into a web page was to use Flash or another third-party plugin. There simply was no other way. With the introduction of the audio element, this has changed.

Browsers and file types

There are currently three different audio file types that are supported, and (of course) the different browsers each support different formats. The table below illustrates this:

Code

So how do we actually go about adding an audio file to a web page? Well it’s quite simple really, especially if you’ve already used the video element.

Instead of using the <video> element we naturally use its brother, the <audio> element. Like the <video> element, we can use the src attribute to directly specify the audio file to play, but, as shown above, it’s more practical to use the <source> element to indicate a number of possible sources in order to cover all most browsers.

The <audio> element

The audio element takes the following attributes:

So you can easily add a WAV audio file to your website by using the following markup:

<audio src="audioFile.wav" autoplay controls></audio>

Of course, as mentioned above, this can limit your browser compatibility and it’s better to provide different audio sources using the <source> element.

The <source> element

The source element can take the following attributes:

Stacking the audio sources

Combining the <audio> and <source> elments together couldn’t be simpler, as the code below shows:

<audio controls autobuffer>
<source src="audioFile.ogg">
<source src="audioFile.mp3">
<source src="audioFile.wav">
Sorry, your browser does not support the audio element
</audio>

The code above should play the specified audio file in all of the browsers mentioned above (except for the current incarnations of Internet Explorer and Android – which will display the message indicating as much. This could be replaced with a Flash fallback of course).

Feel free to test this code for yourself.

Conclusion

So there it is in its simplest form, adding an audio file to a web page. Of course it depends on the browser the page is being viewed in, and, as usual, we’re still waiting for Internet Explorer to catch up (A beta version of IE9 is due out next month).  Nevertheless, it’s still worth using today. Just don’t set your files to autoplay!

Can I use normal living-room stereo speakers with my PC?

Probably not directly, but essentially yes. There’s no fundamental difference between PC speakers and normal speakers, except that PC speakers have a built-in amplifier. To use standard hi-fi stereo speakers you just need an amplifier to drive them. So, either get yourself a separate hi-fi amp and speakers, or take the cheap option and plug your PC into the stereo in the living room.

How do I do that then?

If you take a look at the back of your stereo or TV surround-sound receiver, you’ll almost certainly see a couple of spare plugs labelled something like ‘Aux’. You can directly attach the audio output of your PC into one of these. Usually, inputs to your hi-fi are RCA (also called phono) connectors, with separate white and red plugs for the left and right stereo channels like this:

The output from your PC is likely to be a single, 3.5mm audio output jack. If you have multi-channel HD audio there will be several jacks but you want the green one, which will probably be labelled with an arrowed icon showing it’s an output like this:

All you need to connect the PC to the stereo is a 3.5mm-to-RCA stereo cable, which costs a few quid from somewhere like Maplin.

I can’t see an ‘Aux’ connector on the back of my stereo

Not the end of the world. You can put your PC’s audio output into almost any analogue input of a hi-fi amplifier. It doesn’t matter if it’s labelled ‘CD’, ‘tape in’, ‘aux’ or something like ‘A/V’. They’re just convenient labels – they all take the same line-level audio signal. As long as there are two RCA plugs, one red and one white, and they’re labelled as an input or grouped in with the other inputs (in other words it’s not an output like ‘tape out’) then you can use it. So for instance on the back of the A/V receiver pictured above, you could use the ‘tape in’ inputs.

There’s only one analogue input you can’t use:

Can I use the phono input?

No, sorry. The phono input of a stereo (sometimes labelled MM or MC, for ‘moving magnet’ and ‘moving coil’) is for a record player, and it’s designed to accept the tiny electrical signal that’s generated by the needle moving in the grooves of a record. If you attach the PC audio output to it, you’re unlikely to do any damage but the sound will be hideously distorted. So don’t. Note that, annoyingly, the word ‘phono’ is also applied to RCA cables. But phono cables and the phono input are different things.

Right, I’ve found a spare input on the back of my stereo.

Good. All you need to do now is plug the 3.5mm audio jack into the green output of your PC, and the Phono connectors into the left and right sockets of your chosen input at the back of the stereo.

Now switch on your stereo and turn the volume down. As in, down to almost zero. That prevents all sorts of issues ranging from spilt tea to burst eardrums if you’re stupid enough to put your ear right next to the speaker (never, ever put your ear right next to a speaker: you’ll end up partially deaf when it suddenly cuts in at full volume). Now press whatever button you need to press on the front of the stereo to select the input you’re using.

Finally, try playing some music on the PC, or clicking the volume slider in Windows to get the ‘bonk’ sound. If you can’t hear anything, increase the volume slowly. If you still can’t hear anything, don’t turn the volume up to full, turn it back down again. It’s probably something simple at fault. Prime candidates are accidentally having the audio muted in Windows, or having the wrong output selected in Windows’ audio properties.

Can I use a digital output?

A hefty proportion of PCs these days have some sort of digital audio output, which will potentially give you better quality than using the analogue output. To make use of it though, you’ll need a stereo with digital inputs that’s able to convert the digital ones and zeroes into an analogue signal that the amplifier can use to drive your speakers. Either that, or an offboard DAC (digital-to-analogue converter) to mediate between the two.

There are two types of digital audio output you might find on your PC. Both use the same digital format (known as S/PDIF for the Sony/Philips digital interface format). But one uses electrical signals while the other uses light. They’re known, not surprisigly, as electrical (sometimes coaxial) S/PDIF, and optical S/PDIF.

If your motherboard has a digital coaxial output, it’ll be coloured yellow. But don’t take that as proof positive because other things like composite video outputs can also be yellow – you’ll need to check in your notherboard manual.

Optical digital outputs will have a little socket with a kind of bung in them. Pull it out and you’ll probably see it glowing red in a terrific sci-fi kind of way. Optical digital connections need a cable called a TOSLINK cable, the name of which is derived from ‘Toshiba Link’ and looks like this:

Laptops

The great thing about optical digital outputs is that they can be integrated into laptops. They’re often disguised as 3.5mm audio jacks, and are actually dual-use. You can plug a 3.5mm electrical audio cable in to get an analogue audio output, or you can get yourself a TOSLINK-to-3.5mm adapter and plug it in like this:

That means that you can use your laptop as a kind of handy media-centre jukebox, ripping all your CDs to it. I did this a few years back and it’s a hell of a lot more convenient than digging CDs out.

If you’re determined to use a digital output from your PC/laptop but your stereo doesn’t have either a coaxial or optical digital input, you can get yourself an offboard DAC like this one.