Custom 1-button player with HTML5 audio tag
-
28-09-2019 - |
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>