Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom 1-button player with HTML5 audio tag

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.

like image 612
Kaji Avatar asked Aug 12 '10 22:08

Kaji


1 Answers

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

like image 55
Anurag Avatar answered Oct 06 '22 01:10

Anurag