Es muy simple:OPCIÓN 1
- Al botón recuperalo por medio de una variable
- A la variable que representa al botón dale un listener al evento
click
- Por dentro de la función vamos a crear un nuevo elemento en el DOM el cual será una etiqueta de
audio
- A la etiqueta de audio necesitamos establecerle el valor al atributo
src
que es de donde va a leer el navegador el audio que planeas reproducir - A la variable que tiene asignada la creacíon del audio dale acceso al método
play()
Código
<button class="reproductor">Reproduce tu audio</button>
<script>
let boton = document.querySelector(".reproductor")
boton.addEventListener("click", () => {
let etiquetaAudio = document.createElement("audio")
etiquetaAudio.setAttribute("src", "ubicación de tu archivo de audio")
etiquetaAudio.play()
})
</script>
Entonces cada vez que presiones el botón el audio se reproducirá
OPCIÓN 2
Estuve checando y considero que estar creando un elemento para el DOM cada vez que se presiona el botón puede no ser la mejor opción.
Entonces:
- Declaramos una etiqueta audio son el atributo
src
vacío - Recuperamos a dicha etiqueta en una variable
- Por dentro de la función recuperamos a la variable y le asignamos un valor a su atributo
src
<button class="reproductor">Reproduce tu audio</button>
<audio src=""></audio>
<script>
let boton = document.querySelector(".reproductor")
let audioEtiqueta = document.querySelector("audio")
boton.addEventListener("click", () => {
audioEtiqueta.setAttribute("src", "ruta_a_tu_archivo")
audioEtiqueta.play()
console.log(`Reproduciendo: ${audioEtiqueta.src}`)
})
</script>
Referencias