Pregunta sobre Compact WP Audio Player de Wordpress:

Reproductor animado – Icono de pausa + AJAX

Un usuario preguntó 👇

Hola,

Quería saber si puedes tener un reproductor animado; pausa el ícono como este tema: https://werkstatt.fuelthemes.net/

¿Y si el reproductor puede seguir funcionando entre las páginas de mi sitio web? ¿Puede AJAX si agrego un plugin en el pie de página?

Sobre él, Soul.

(@mbrsolution)

Hace 2 años

Hola,

Quería saber si es posible tener un jugador animado – pague un icono como este

Lamentablemente no. Esta función no está disponible actualmente en el plugin.

¿Y si el reproductor puede seguir funcionando entre las páginas de mi sitio web?

Lo que tenemos actualmente es la capacidad de reproducir música automáticamente cuando llegan a la página de inicio. ¿Eso funcionaría para ti?

¿Puede AJAX si agrego un plugin en el pie de página?

¿Puede dar un ejemplo de lo que quiere decir?

Gracias por preguntar.

Lanzador de hilos

(@ alex83270)

Hace 2 años

Quiero decir, quiero que su reproductor de audio siga reproduciéndose incluso si cambio la página de mi sitio web, sin cobrar. Porque si estuviera en la página de inicio y vaya, por ejemplo, a la página de contacto, el reproductor de audio Compact WP se ejecutará nuevamente hasta el comienzo de la canción.

Entonces, lo que pregunté antes fue si su reproductor de audio se puede colocar en el pie de página o en el encabezado. Y si no me equivoco, con AJAX cuando cambio la página, el pie de página o el encabezado permanecerá como este sitio (con el menú de encabezados): https://angular.io/features
¿Y tal vez mantener al jugador en funcionamiento?

Perdón por mi pobre inglés, no sabía si entendías lo que quería.

Sobre

(@mbrsolution)

Hace 2 años

Hola, gracias por aclarar más a qué te refieres. Ahora entiendo lo que está tratando de lograr. Por favor revisa lo siguiente documentación. Hay una sección que explica cómo agregar el acceso directo al archivo de plantilla de tema. Avísame si esto es lo que estás buscando.

Tuyo sinceramente

Lanzador de hilos

(@ alex83270)

Hace 2 años

Hola @mbrsolution

¡Encuentro una solución para tu extensión animada!

Quiero compartir mi trabajo con ustedes si pueden ponerlo en el próximo mantenimiento / actualización gratuito, ¡será genial!

Entonces este es el código que ingreso shortcodes-functions.php después de la línea 36

    
	$player_cont .= '<div id="music_audiobar">';
		
	$player_cont .= '<div id="audiobar_off" style="height: 0px; position:relative; bottom:15px;">';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '</div>';
	
	$player_cont .= '<div id="audiobar_on" style="height: 0px; position:relative; bottom:15px; display:none;">';
	$player_cont .= '<span class="bar bar1"></span>';
	$player_cont .= '<span class="bar bar2"></span>';
	$player_cont .= '<span class="bar bar3"></span>';
	$player_cont .= '<span class="bar bar4"></span>';
	$player_cont .= '<span class="bar bar5"></span>';
	$player_cont .= '</div>';
	
	$player_cont .= '</div>';
    
	
	$player_cont .= '</div>';

Agrego algunas lineas sc_audio_player.php líneas 60 a 87

                soundManager.play('btnplay_' + ids, {
                    onfinish: function() {
                        if (loops == 'true') {
                            loopSound('btnplay_' + ids);
                        }
                        else {
                            document.getElementById('btnplay_' + ids).style.display = 'inline';
                            document.getElementById('btnstop_' + ids).style.display = 'none';
						
							document.getElementById('audiobar_off').style.display = 'inline'
							document.getElementById('audiobar_on').style.display = 'none'							
                        }
                    }
                });
            }
            else if (flg == 'stop') {
    //soundManager.stop('btnplay_'+ids);
                soundManager.pause('btnplay_' + ids);
            }
        }
        function show_hide(flag, ids)
        {
            if (flag == 'play') {
                document.getElementById('btnplay_' + ids).style.display = 'none';
                document.getElementById('btnstop_' + ids).style.display = 'inline';
				
					document.getElementById('audiobar_off').style.display = 'none'
					document.getElementById('audiobar_on').style.display = 'inline'				
            }
            else if (flag == 'stop') {
                document.getElementById('btnplay_' + ids).style.display = 'inline';
                document.getElementById('btnstop_' + ids).style.display = 'none';
				
					document.getElementById('audiobar_off').style.display = 'inline'
					document.getElementById('audiobar_on').style.display = 'none'				
            }
        }

Y agregue el siguiente CSS personal:

/* MUSIC BACKGROUND */
#music-player {
	position: fixed;
	z-index: 251;
	right: calc(2em + 6px);
	bottom: 1.5em;
	display: block;
	padding: 1em;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	transition: .2s ease-out all;
}

#music-player.toTop-show {
	-webkit-transform: translateY(-4em);
	transform: translateY(-4em);
	transition: .2s ease-out all;
}

.sc_player_container1 .myButton_play { /*MUSIC OFF*/
background: #404040 !important;
width: 40px !important;
height: 40px !important;
border-radius: 100%;
}

.sc_player_container1 .myButton_play:hover {
background: #ef173b !important;
}

.sc_player_container1 .myButton_stop { /*MUSIC ON*/
background: #ef173b !important;
width: 40px !important;
height: 40px !important;
border-radius: 100%;
}

#music_audiobar {
	position: relative;
	bottom: 20px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#music_audiobar span {
    display: inline-flex;
    margin: 0 1px;
    width: 2px;
    height: 7px;
    background: #fff;
}
	
.bar1 {
   animation: music-bar 2s 1s ease-out alternate infinite;
}

.bar2 {
    animation: music-bar 2s 0.5s ease-out alternate infinite;
}

.bar3 {
    animation: music-bar 2s 1.5s ease-out alternate infinite;
}

.bar4 {
    animation: music-bar 2s 0.25s ease-out alternate infinite;
}

.bar5 {
    animation: music-bar 2s 0.75s ease-out alternate infinite;
}

@keyframes music-bar {
  0% {height: 6px;}
  10% {height: 10px;}
  20% {height: 6px;}
  30% {height: 14px;}
  40% {height: 12px;}
  50% {height: 6px;}
  60% {height: 14px;}
  70% {height: 10px;}
  80% {height: 12px;}
  90% {height: 4px;}
  100% {height: 14px;}
}

Tener el mismo botón de audio es https://werkstatt.fuelthemes.net/

______________________________________________

En cuanto al segundo problema que tengo con AJAX, todavía no lo entiendo.

Espero que les guste y tal vez lo agreguen a mi nombre en su extensión 🙂

En cuanto a Naturaleza, Alexis LAURORA

(@mbrsolution)

Hace 2 años

Gracias por compartir su solución 🙂 Los desarrolladores investigarán más a fondo.

Tuyo sinceramente

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.