Quiero hacer un botón que reproduzca un audio en HTML, pero no sé cómo hacerlo.
He intentado hacer esto:
<button style="" onclick="<audio src="miaudio.mp3"></audio>"></button>
¿Alguien me puede decir como se hace?
Quiero hacer un botón que reproduzca un audio en HTML, pero no sé cómo hacerlo.
He intentado hacer esto:
<button style="" onclick="<audio src="miaudio.mp3"></audio>"></button>
¿Alguien me puede decir como se hace?
OPCIÓN 1
click
audio
src
que es de donde va a leer el navegador el audio que planeas reproducirplay()
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:
src
vacíosrc
<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
autoplay
con valor false
. Pero de ese modo, el archivo se descargará al principio y te asegurarás que no habrá lag (o no será tan malo como podría ser).
autostart=0
ya que con autoplay
lo seguía reproduciendo aún con el valor de false
autoplay
es un valor booleano (si lo pones, incluso con el valor "false", será verdadero porque la cadena "false" es truthy). Me imagino que el valor por defecto es falso y si no lo pones, no debería sonar. autostart
no es un atributo válido para audio
.
O simplemente con el evento play() puedes usar para reproducir el audio:
<audio id="m" src="miaudio.mp3" controls=""></audio>
<br>
<button onclick="document.getElementById('m').play()">Play</button>