Avisos
Vaciar todo

Colocar Botón de Audio .mp3 en home  

Página 1 / 2
 
Amaia
 Amaia
Usuario activo

Hola,

Necesito colocar un botón en mi home, que reproduzca un audio en .mp3.

En la home tengo un video que se reproduce sólo sin sonido y quiero ponerle sonido

por medio de ese botón que reproducirá un archivo .mp3 que no tiene nada que ver con el video.

¿Hay algún plugin que lo haga?

También he leído algo sobre SOUNDMANAGER 2 que facilita la reproducción de audio con Javascript,

pero no controlo nada de esto.

Gracias

Contenido solo visible a usuarios registrados

Citar
Respondido : 27/05/2021 3:20 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Amaia,

De forma general donde necesitas agregar dicho botón? veo que tienes un video en la parte superior de tu sitio pero no veo espacio para el botón, este sonido es parte de una música de fondo para la web?

Puedes agregar un botón de sonido directamente con las opciones de edición de wordpress:

image

Luego seleccione directamente el audio .mp3 que has subido a tu sitio y se agrega un botón que permite reproducir el sonido.

Comentanos para poder verificar a detalle si no es esto lo que necesitas.

Un saludo 🖐️ 

ResponderCitar
Respondido : 27/05/2021 3:32 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Amaia
 Amaia
Usuario activo

@argenis

Hola,

Me gustaría colocarlo encima del video,

te puedo pasar  una foto de como quiero que quede el botón?

Al pincharlo quiero que se reproduzca un archivo mp3 y al volver a darle que se pare.

No sé si es posible hacerlo como tú dices.

ResponderCitar
Respondido : 27/05/2021 3:39 am
Amaia
 Amaia
Usuario activo

Te paso una url de una página que tiene lo mismo que quiero yo,

aunque creo que no le funciona bien.

https://www.saddle-madrid.com/

Gracias

ResponderCitar
Respondido : 27/05/2021 3:53 am

Cursos Gratuitos WordPress

Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Amaia,

Veo que utilizas visual composer para gestionar tu sitio, puedes ver esto según su documentación:

image

Este módulo que te comparto es el que puedes agregar para que se visualice la opción de reproducir un mp3, debes agregarlo directamente donde tienes el espacio del video en tu constructor, verificalo y nos comentas si a esto te refieres.

Un saludo 🖐️ 

ResponderCitar
Respondido : 27/05/2021 3:54 am
Amaia
 Amaia
Usuario activo

Lo he colocado, pero necesito bajarlo a la esquina derecha.

Pero al pinchar en el se abre el reproductor y desaparece el video,

lo que necesito es que al pinchar suene la música y el video siga reproduciéndose igual.

Gracias

ResponderCitar
Respondido : 27/05/2021 4:03 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Amaia
 Amaia
Usuario activo

No me sirve porque al pinchar quiero que suene la canción sóla, no que desaparezca el video 

y me aparezca el reproductor del audio.

ResponderCitar
Respondido : 27/05/2021 4:14 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Amala,

Entiendo que has seleccionado el modulo y lo has dejado por defecto? compartenos una captura de la configuración, según especifican en su pagina deberia verse de la siguiente forma:

image

Es decir una barra negra con el audio que permite activar y desactivar, en tu caso veo que no esta asi es por esto que si quieres puedes agregar nuevamente el módulo y únicamente seleccionar el archivo de audio, este debe ser .mp3 y actualizar el sitio.

Un saludo 🖐️ 

ResponderCitar
Respondido : 27/05/2021 4:33 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Amaia
 Amaia
Usuario activo

@argenis

Hola,

Tampoco es lo que quiero así.

Yo no quiero una barra de reproducción, sino un sólo botón para activar el sonido.

Te paso foto de un ejemplo de lo que quiero, he puesto un círculo al botón que activaría el sonido sin aparecer nada sólo el sonido

y también te paso un pantallazo de la configuración que he hecho al audio.

La url es: http://amaialai-cp500.wordpresstemporal.com/tabernaherrerias/

Gracias

configuracion audio
ejemploboton

 

Esta publicación ha sido modificada el hace 5 meses por Amaia
ResponderCitar
Respondido : 27/05/2021 11:33 am
Amaia
 Amaia
Usuario activo

Hola,

Estoy viendo diferentes aspectos de la edición y puede que sí me sirva esta opción.

Lo único que necesito situar el botón en la parte de abajo derecha de la pantalla,

y necesito hacerlo un poco más grande y cambiar el tipo de icono, quiero poner el que

lleva el pantallazo que te adjunto.

¿Es posible?

Gracias

ejemploboton

 

ResponderCitar
Respondido : 27/05/2021 11:55 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Pepe
 Pepe
Soporte CMS Webempresa Moderator

Hola Amala.

.- Edita la entrada donde quieres añadir el boton.

.- Añade un modulo HTML 

screenshot joomlero cp95.webjoomla.es 2021.05.27 12 56 48

.- Añade lo siguiente al modulo:

<audio id="testAudio" hidden src="https://api.twilio.com/cowbell.mp3" type="audio/mpeg">
</audio>

<button id="playAudio">Play</button>

<script type="text/javascript">
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}

});
</script>

 

Tienes que modificar " https://api.twilio.com/cowbell.mp3 " por la URL de tu archivo de audio.

 

Un saludo

ResponderCitar
Respondido : 27/05/2021 11:59 am
Amaia
 Amaia
Usuario activo

Hola,

Acabo de insertar el módulo de html, no sé si lo he hecho bien, te paso pantallazo,

porque lo que me aparece no es lo que quiero, a parte de que ahora aparecen los dos iconos.

Mi idea es que aparezca el icono para activar el audio abajo a la derecha, te envío un pantallazo y te pongo un círculo rojo en el icono del audio

que quiero, quiero ese  icono y en esa posición.

Gracias

html
ejemploboton

 

 

 

ResponderCitar
Respondido : 27/05/2021 12:33 pm

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa Moderator

Hola Amaia

Por favor indica la URL donde lo tienes añadido.

El tema del icono es otra cosa ya que tendras que instalar alguna fuente como puede ser Font Awesome:

-> https://fontawesome.com/

 

Un saludo

ResponderCitar
Respondido : 27/05/2021 12:56 pm
Amaia
 Amaia
Usuario activo

La URL: http://amaialai-cp500.wordpresstemporal.com/tabernaherrerias/?preview_id=54948&preview_nonce=4c67fb8deb&_thumbnail_id=-1&preview=true

 

Y dónde coloco esa fuente?

Gracias

ResponderCitar
Respondido : 27/05/2021 12:58 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Amaia,

Veo que el modulo que usas añade estilos específicos para su ubicación, en este caso solo podrás moverlo a una posición para ello puedes probar solo dejar un icono de audio por el ejemplo el icono con el botón de play y moverlo a la parte inferior con el siguiente código CSS

.main-container .row-container .row-parent .uncont > :first-child {
margin-top: 80% !important;
}
Screenshot

Este código debes agregarlo en el apartado Apariencia -> Personalizar -> CSS Adicional, añadeloy verifica si con ello logras configurar lo que deseas

Un Saludo

ResponderCitar
Respondido : 27/05/2021 1:10 pm
Página 1 / 2