Skip to main content
se añadieron 871 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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

Es muy simple:

  • 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á

Referencias

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

Origen Enlace
user128299
user128299

Es muy simple:

  • 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á

Referencias