Reproductor personalizado de 1 botón con etiqueta de audio HTML5

Question

Trabajando con la etiqueta <audio> en algún desarrollo web que he estado haciendo últimamente, y una cosa que intento hacer es usarlo para compilar una lista de palabras y proporcionar una muestra de pronunciación al lado de cada palabra en la lista. Configurarlo no es difícil en absoluto, sin embargo, este tipo de aplicación no requiere el conjunto completo de controles; solo un botón de reproducción.

El elemento controls de la etiqueta <audio> no parece estar del todo bien documentado; todo lo que puedo encontrar en él es "poner siempre" aquí, a menos que quieras construir tu propio jugador ". No quiero construir mi propio reproductor, sin embargo, solo quiero una interfaz de juego simple de 1 botón con nada más, idealmente sin requerir JavaScript o Flash.

Answer 1

Es bastante simple. Solo necesita llamar al método de reproducción en el objeto DOM audio cuando se hace clic en algo. El algo podría ser una imagen, texto, enlace o lo que sea que se adapte.

Aquí hay una manera posible:

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

See an example