2

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?

1

2 respuestas 2

5

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

5
  • 1
    Bonito, simple y bien realizado, deben haber mas respuestas asi por parte de la comunidad, muy bien beta.
    – Layer
    Commented el 11 may. 2020 a las 22:57
  • ¿Por qué definir el audio con src vacío? El audio debería tener una fuente, de lo contrario, al pulsar el botón puede haber un retraso la primera vez que se pulse (ya que al no especificar el fichero, éste no se habrá descargado y antes de reproducirse tendrá que descargarse). Si quieres asegurarte que no se va a reproducir, puedes ponerle el atributo 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).
    – Alvaro Montoro
    Commented el 11 may. 2020 a las 23:42
  • Agradezco la observación @AlvaroMontoro solo que colocaré que el atributo será autostart=0 ya que con autoplay lo seguía reproduciendo aún con el valor de false
    – user128299
    Commented el 11 may. 2020 a las 23:55
  • Hmmm.... eso puede ser porque 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.
    – Alvaro Montoro
    Commented el 11 may. 2020 a las 23:59
  • Y si quiero que sean 2 o más botones ¿Cómo le hago?
    – Enrique
    Commented el 28 feb. 2021 a las 1:08
1

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>

1

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.