Date prisa, las OFERTAS FLASH BLACK FRIDAY terminan en

Days
Hours
Minutes
Seconds
Ohhhh la oferta ha terminado, pero seguimos teniendo unos precios de escándalo.

Reproducir audio clicando un botón

Aprende a Reproducir audio clicando un botón en WordPress

Es probable que quieras comunicar en tu web algo que en texto sería demasiado largo, para eso se ha inventado el podcast, y como bien sabes, existen plataformas para ello.

De hecho, elementor ya incorpora un widget de Soundcloud para que lo hagas sin demasiada complicación.

Aún así, es posible que quieras Reproducir audio en WordPress desde un botón o un link sin tener que recurrir a servicios externos, simplemente subiendo el archivo .mp3 y que suene en tu web.

Te pongo un ejemplo

En mi página de inicio he querido dar un toque de humor, y la comparativa de precios, cuando se clica el botón «WASTE MONEY» hago que se reproduzca un audio divertido (pruébalo).

Compra elementor Pro original muy barato

Por cierto, si aún no tienes elementor pro con licencia oficial y quieres conseguirlo completamente legal y con la licencia activada, este es el momento, cómpralo ahora y ahórrate un buen dinero.

Vamos a lo que interesa, Reproducir audio en WordPress desde un botón

El primer paso es obviamente tener en tu archivo de medios el archivo .mp3 que quieres que suene, yo para mostrarte como funciona, he subido una versión del Pasacaglia de Handel que puedes descargar para hacer la prueba (o usa uno que tu tengas).

Inserta el botón donde quieras usando elementor Pro

Pues eso, simplemente inserta un botón, y le pones el texto que ha de mostrar, pero CUIDADO, asegúrate de que no tenga ningún enlace, ahora verás porqué.

En lugar de un enlace, debes crear una clase .css para ese widget, por ejemplo «pasacaglia«.

Para ello, te vas a la pestaña Avanzado del widget de botón, y en el campo Clases CSS escribes «pasacaglia» o la clase que tu quieras poner.

Ahora unas líneas de html

Símplemente inserta el widget «Editar html» lo mas cerca posible del botón, y pega el siguiente código.

DOS COSAS IMPORTANTES: 

  1. En la linea 2 tienes que sustituir .pasacaglia por la clase CSS que tu hayas puesto.
  2. En la linea 15 debes cambiar la URL que aparece, por la que tiene tu archivo de audio, eso lo puedes hacer desde la biblioteca de medios.
				
					<script>
let audioButton = document.querySelector('.pasacaglia');   // <-- Change CSS Class Here
       audioButton.addEventListener('click', function(){
        var audio = document.getElementById("audio");

         if (audio.paused) {
            audio.play();
        }else{
            audio.pause();
            // audio.currentTime = 0
        }
      });
    </script>

    <audio id="audio" src="https://tuweb.com/carpeta/tuarchivodemedios.mp3"></audio>
				
			

Ahora a Reproducir audio clicando un botón

Ya lo tienes, en este ejemplo simplemente suena una melodía pero puedes usarlo para podcast, para reproducir en audio las instrucciones de un servicio, etc.

¿Aún no tienes elementor Pro?

Share in your social networks

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp

Suscríbete a nuestra Newsletter y consigue un descuento en tu primera compra

Sólo por registrarte, te regalamos un cupón para que consigas elementor Pro aún mas barato.

Suscríbete a nuestra Newsletter para estar informado de todas las novedades y descuentos