Custom 1-button player with HTML5 audio tag

Question

Working with the <audio> tag in some web development I've been doing lately, and one thing I'm trying to do is use it to build a word list and provide a pronunciation sample next to each word on the list. Setting this up isn't hard at all, however this sort of application hardly requires the full set of controls; just a play button.

The controls element of the <audio> tag doesn't seem to be that well documented at all, however; all I can find on it is "always put 'on' here, unless you want to build your own player". I don't want to build my own player, however, I just want a simple, 1-button play interface with nothing else, ideally without requiring JavaScript or Flash.

Solution

It's fairly simple. You just need to call the play method on the audio DOM object when something is clicked. The something could be an image, text, link, or whatever suits.

Here's one possible way:

<a onclick="this.firstChild.play()"><audio src=".."></audio></a>

See an example

Comments

[Erin Geyer]

The code sample is great. But the audio sample in your jsfiddle is not exactly pleasant! :)