0 Llamaradas 0 Llamaradas ×

Qué es WavePlayer?

WavePlayer es totalmente personalizable, respuesta HTML5 audio plugin para WordPress. Su interfaz está construida alrededor de la forma de onda el archivo de audio reproduce.

Aquí está una lista de las principales características:

  • interfaz sensible, con un estilo moderno y aspecto
  • Soporte de HTML5
  • cuatro tamaños diferentes que se adaptan automáticamente a la página
  • integración completa con el WordPress Media Manager
  • Visual Editor en Editor de Post de WordPress
  • Archiving de archivos para un acceso instantáneo a las formas de onda de pico

Cómo instalarlo?

Cómo instalar WavePlayer

para una guía visual HAGA CLIC AQUÍ

Paso 1 – En WordPress Plugins sección, Haga clic en el Agregar nuevo botón, justo al lado de la Plugins título de la página.

Paso 2 – Haga clic en el Cargar Plugin botón, justo al lado de la Añadir Plugins título de la página.

Paso 3 – Haga clic en el Seleccione Archivo botón para seleccionar la ubicación de su Waveplayer.zip archivo.

Paso 4a – Vaya a la ubicación donde se descargó el Waveplayer.zip archivo.

Paso 4b – Haga clic en el Abierto botón.

Paso 5 – El plugin está ahora activo. Usted puede hacer clic en el Configuración enlace de la derecha debajo de su nombre o ir a Configuración-> WavePlayer para configurar sus opciones.

Paso 6 – Una vez que WordPress ha terminado de cargar los archivos de plugin, Haga clic en el Activar Plugin enlace.

Paso 7 – El plugin está ahora activo. Usted puede hacer clic en el Configuración enlace de la derecha debajo de su nombre o ir a Configuración-> WavePlayer para configurar sus opciones.

Instrucciones para el uso?

WordPress Media Manager

A partir de Versión 3.9, WordPress permite crear listas de reproducción de audio directamente desde el WordPress Media Manager. WavePlayer aprovecha al máximo esta capacidad de introducir un waveplayer código corto que se extiende por defecto playlist shortcode. Este nuevo código ofrece a los usuarios una interfaz más moderna para sus pistas de audio, manteniendo la misma facilidad de operación en sus listas de reproducción favoritas. Además de eso, WavePlayer reemplaza también el integrado audio shortcode, para que automáticamente se encuentra una sola instancia de WavePlayer donde ya tienes un audio código en tus páginas. Incluso en el backend!

wvpl-wpmediamanager

Cómo crear una nueva instancia de WavePlayer

para una guía visual HAGA CLIC AQUÍ

Paso 1 – Para crear una nueva instancia de WavePlayer, simplemente crear o editar el Post o la página donde desea agregar el WavePlayer y haga clic en el Añadir los medios de comunicación botón, por encima de las barras de herramientas del Editor de Visual.

Paso 2 – En la barra lateral izquierda, junto con todos los demás elementos WordPress te permite crear, usted encontrará un menú para crear una nueva instancia de WavePlayer. Haga clic en Crear Waveplayer.

Paso 3 – Si ya han subido algunos archivos de audio, Usted puede seleccionar aquí. De lo contrario, Haga clic en el Subir archivos ficha, para cargar nuevos archivos de audio.
(WordPress permite adjuntar una imagen recomendada para las pistas de audio, así como a cualquier otro tipo de post. Al ajustar la imagen característica de una pista de audio, WavePlayer a usarlo como la miniatura de esa canción en el reproductor).

Paso 4 – Subir tus pistas de audio arrastrándolos a WordPress área de colocación o Selección de archivos de las unidades locales.

Paso 5 – Los archivos subidos mientras estás en proceso de crear una nueva instancia de Waveplayer Haz seleccionados automáticamente para lista de reproducción de la instancia.

Paso 6a – Mientras que la carga está procesando aún, puede seleccionar más pistas ya presentes en su biblioteca de medios

Paso 6b – Cuando se completa la carga y está satisfecho con su selección, Finalmente puede crear una nueva instancia de WavePlayer clic en el Crear un nuevo WavePlayer botón.

Paso 7a – Ahora, puede editar una instancia de WavePlayer, a partir de la orden de las pistas. Para cambiar el orden de, simplemente arrastre y suelte sus miniaturas alrededor de.

Paso 7b – En Configuración de WavePlayer panel, Usted puede cambiar la configuración predeterminada del reproductor, alterará el aspecto de esta instancia en la página.

Paso 7c – Cuando esté satisfecho con su configuración, Haga clic en el Insertar WavePlayer botón para insertar la instancia que acaba de crear en su página o post.

Paso 8 – Inmediatamente puedes escuchar la instancia que sólo ha insertado en el editor de post. Usted puede incluso reproducir las pistas de audio!

WavePlayer le permite trabajar con una copia visualmente completa y totalmente interactiva de la derecha del jugador en el editor de post, así te ahorro el tiempo para ir y venir entre el editor de post y la página en la parte delantera.

Si desea realizar cambios en la instancia seleccionada, simplemente haga clic en el botón.

Paso 9 – Si desea añadir más pistas a la lista de reproducción, Haga clic en el Añadir a Waveplayer elemento de menú.

Paso 10a – Al modificar una instancia de WavePlayer que ha insertado previamente en tu post, usted todavía puede añadir más pistas de audio, selección de la biblioteca de los medios de comunicación o incluso subir nuevos archivos, la exacta misma manera que hiciste al crear inicialmente el jugador.

Paso 10b – Cuando esté satisfecho con su selección, Haga clic en el Añadir a WavePlayer botón para ver sus nuevos temas añadidos a la lista anterior del jugador.

Paso 11 – Claro, se puede cambiar el orden de las pistas (draggind los archivos en) o el aspecto del reproductor (alterar la configuración de WavePlayer).

Cuando haya terminado con la edición, Haga clic en el Actualización WavePlayer botón para hacer efectivos los cambios.

Paso 12 – Haga clic en el Publicar (para puestos de nueva creación o páginas) o la Actualización botón (para ya publicado posts o páginas) para finalizar los cambios.

Ahora es el momento para visitar la página con el resultado final!

Shortcode

Aunque el waveplayer código corto con todos sus parámetros se crea automáticamente cuando se inserta el Waveplayer a través de la Añadir los medios de comunicación marco de la, es útil entender su estructura que se compone como sigue:

[ Waveplayer ID = "separados por comas los IDs de las pistas seleccionadas" 
             MP3 = "" 
            tamaño = "LG" | "MD" | "SM" | "XS" 
           estilo = "luz" | "oscuro" 
           forma = "Plaza" | "círculo" | "redondeado" 
        AutoPlay = "true" | "falso" 
      repeat_all = "true" | "falso" 
         aleatorio = "true" | "falso" 
      wave_color = "#DDD" 
    wave_color_2 = "#666" 
  progress_color = "#59f" 
progress_color_2 = "#05un" 
   hover_opacity = "0.4" 
    cursor_color = "#EE2" 
  cursor_color_2 = "#D93" 
    cursor_width = "2" 
       wave_mode = "4" 
       gap_width = "1" 
wave_compression = "2" 
  wave_asymmetry = "2" ]
Parámetros

ids – Este es el único parámetro necesario y obtiene rellena automáticamente con los identificadores de las pistas seleccionadas en la Añadir los medios de comunicación marco de la. Si deja en blanco junto con el parámetro siguiente mp3, se ocultará esta instancia de la Waveplayer.

mp3 – Si el ids parámetro se deja en blanco, puede proporcionar una URL a un archivo de mp3 a través de este parámetro. Si el archivo es local, Waveplayer intentará acceder a la información de etiquetas de identificación y mostrar en la barra de información del jugador.

size – Define el tamaño del reproductor. Son valores aceptados: lg, md, sm y xs. Si deja en blanco, el reproductor se mostrará en el valor por defecto size ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

style – Se puede establecer en light o dark y define el color de la zona donde se muestra la información de la pista actual. Además, Waveplayer es totalmente personalizable a través de la Custom CSS opción de Configuración –> Waveplayer. Si deja en blanco, el jugador utilizará el valor predeterminado style ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

shape – Se puede establecer en square, circle o rounded y define la forma de la imagen donde se encuentran los controles de reproducción. Si deja en blanco, el jugador utilizará el valor predeterminado shape ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

autoplay – Si a true, el jugador comenzará a reproducir la pista tan pronto como la página completa la carga. Si a false, el usuario tendrá que iniciar la reproducción manualmente. Si deja en blanco, el jugador utilizará el valor predeterminado autoplay ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

repeat_all – Si a true, el jugador se mantenga reproduce las pistas continuamente, reiniciar desde la primera canción terminada la última de ellas. Si a false, la reproducción se detendrá después de la última canción ha terminado. Si deja en blanco, el jugador utilizará el valor predeterminado repeat_all ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

shuffle – Si a true, el jugador será aleatorio las pistas cada vez que el visitante vuelve a cargar la página. Si a false, el orden de las pistas será el suministrado con el ids parámetro. Si deja en blanco, el jugador utilizará el valor predeterminado shuffle ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

wave_color, wave_color_2 – Define el color de inicio y finalización del gradiente vertical llenar la forma de onda. Si deja en blanco, el jugador utilizará el valor predeterminado wave_color y wave_color_2 Configuración, de acuerdo a la opción correspondiente de Configuración –> Waveplayer. Para una mejor comprensión de la forma de onda para colorear esquema de, por favor, consulte la Sección de opciones de forma de onda de la Configuración.

progress_color, progress_color_2 – Define el inicio y fin color del gradiente vertical relleno la parte realizada de la forma de onda. Si deja en blanco, el jugador utilizará el valor predeterminado progress_color y progress_color_2 Configuración, de acuerdo a la opción correspondiente de Configuración –> Waveplayer. Para una mejor comprensión de la forma de onda para colorear esquema de, por favor, consulte la Sección de opciones de forma de onda de la Configuración.

hover_opacity – Define la opacidad de la superposición de onda cuando el usuario mueve el puntero sobre la onda. Establezca este parámetro en 0 tener una normal forma de onda continua. Si deja en blanco, el jugador utilizará el valor predeterminado hover_opacity ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

cursor_color, cursor_color_2 – Define los colores iniciales y finales de un degradado vertical para el cursor de desplazamiento sobre la forma de onda. Si deja en blanco, el jugador utilizará el valor predeterminado cursor_color y cursor_color_2 Configuración, de acuerdo a la opción correspondiente de Configuración –> Waveplayer. Para una mejor comprensión de la forma de onda para colorear esquema de, por favor, consulte la Sección de opciones de forma de onda de la Configuración.

cursor_width – Define el ancho de las barras muestra la forma de onda. Establezca este parámetro en 0 tener una normal forma de onda continua. Si deja en blanco, el jugador utilizará el valor predeterminado cursor_width ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

wave_mode – Define el modo de visualización de la onda. Si a 0 (' Continua’ en la página de configuración), la forma de onda se mostrará como una forma de onda continua regular. Cualquier otro ajuste de 1 Para 10 representa el ancho a las barras que se utiliza para mostrar la forma de onda en forma de histograma. Si deja en blanco, el jugador utilizará el valor predeterminado wave_mode ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

gap_width – If wave_mode se establece en cualquier valor distinto 0 ('Continua'), Este parámetro define el ancho de la brecha entre las barras que representan la forma de onda. Si deja en blanco, el jugador utilizará el valor predeterminado gap_width ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

wave_compression – Define la compresión de la onda. Esta opción no afecta el archivo de audio, pero sólo lo consigue muestra su forma de onda. Un menor nivel de compresión muestra una diferencia más evidente entre la baja intensidad y alta intensidad en la forma de onda. Por el contrario, un mayor nivel de compresión aplana las diferencias, mostrando una onda más uniforme. Si deja en blanco, el jugador utilizará el valor predeterminado wave_compression ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

wave_asymmetry – Define la relación entre la altura de la mitad superior de la onda y la altura de la parte inferior de las olas. Si deja en blanco, el jugador utilizará el valor predeterminado wave_asymmetry ajuste, de acuerdo a la opción correspondiente de Configuración –> Waveplayer.

Configuración

Configuración de WavePlayer – ubicado en el Configuración –> WavePlayer Página de la zona de administración de WordPress – definir cómo mostrar un código corto sin parámetros, siempre que no sean los identificadores de las pistas de audio quiere incluido en este caso particular del jugador, como la siguiente:

Tenga en cuenta que cambiar cualquiera de estos ajustes afectarán a la forma de cada instancia con CUALQUIER falta el parámetro se mostrará en su sitio de Internet.

Opciones de reproductor por defecto

para una guía visual HAGA CLIC AQUÍ

En el primer panel de la configuración de WavePlayer puede definir las opciones por defecto para la size, style, shape, autoplay, repeat_all y shuffle parámetros. Cuando se inserta una instancia de la Waveplayer sin proporcionar cualquiera de estos parámetros, la instancia se mostrará según estos ajustes.

Esquema de color y opciones de forma de onda predeterminada

para una guía visual HAGA CLIC AQUÍ

En el segundo panel de la configuración de WavePlayer puede establecer todos los valores predeterminados que definen cómo la forma de onda va a ser. Cuando se inserta una instancia de la Waveplayer sin proporcionar cualquiera de estos parámetros en el código, la instancia se mostrará según estos ajustes.

A través de estas opciones puede tener la forma de onda perfectamente congruentes su actual tema de WordPress y gracias a la previsualización en tiempo real, puedes ver el resultado de los cambios sin incluso necesidad de guardar la configuración.

Además, todos estos ajustes pueden agregarse como parámetros a cada código de Waveplayer, Personalización de cada instancia del reproductor de, independientemente de la configuración predeterminada.

HTML & Personalización de CSS

para una guía visual HAGA CLIC AQUÍ

En el último panel se encuentran dos áreas de texto diferentes.

La primera de ellas, Plantilla de la barra de información, le permite personalizar la información que aparece en la info cuando la pista comienza reproducir de la barra. Usted puede utilizar casi cada etiqueta ID3 que sabes se guardan en el archivo de audio que has subido. Simplemente escribir plantilla HTML incluyendo cada etiqueta rodeado por un “%” carácter. Por ejemplo, Si desea mostrar el título de la canción seguido del nombre del artista, puede escribir el siguiente código HTML en textarea:

%title% by %artist%

El segundo componente textarea, Custom CSS, permite añadir tus propias reglas CSS en la hoja de estilo predeterminada que viene con el plugin. Puede personalizar las reglas CSS por defecto o crear su propio conjunto de reglas que se añadan en la plantilla de la barra de información.

Mantenimiento

para una guía visual HAGA CLIC AQUÍ

Un archivo de pico es salvado por WavePlayer en el ‘picos de‘ subcarpeta del plugin, siempre que una pista de audio se carga por primera vez. Esto permite WavePlayer representar la forma de onda de cada archivo de audio mucho más rápido los siguientes tiempos de.

Si elimina una pista de audio que fue utilizada anteriormente en WavePlayer, el archivo peak permanece apagado para siempre en la subcarpeta de pico del plugin. Aunque pico archivos son de tamaño muy pequeños (generalmente alrededor 30 kB), puede ser una pérdida de su espacio de hosting si le toca subir y eliminar archivos adjuntos de audio regularmente. Se recomienda eliminar archivos huérfanos pico haciendo clic en el Eliminar archivos huérfanos de pico botón cada vez que eliminas una enorme cantidad de accesorios de audio de su sitio de Internet.

If, por alguna razón, usted quiere asegurarse de que WavePlayer se regenera todos los archivos de pico, tienes que eliminarlos mediante la Borrar todos los archivos de pico botón.

Créditos

WavePlayer hace uso de los siguientes proyectos:

WaveSurfer.js – La capacidad de diseño de forma de onda en que encuentra WavePlayer se construye alrededor de Waveform.js, por katspaugh, optimizado para una gestión más eficaz de las capacidades de lona y extendido para integrarse como un plugin para WordPress. Usted puede aprender más sobre ese proyecto en el Página oficial WaveSurfer.js o en el WaveSurfer.js GitHub páginap.

WaveSurfer.js está licenciado bajo una Creative Commons Attribution 3.0 Unported License.

Fuente-impresionante – Botones e iconos en WavePlayer son proporcionados por Fuente impresionante, un conjunto de herramientas CSS basado en una fuente icónica. La fuente es liberada bajo una OFL SIL 1.1 Licencia.

El código CSS es publicado bajo una Licencia MIT.

Changelog

v1.0.18
* Primer lanzamiento

0 Llamaradas Twitter 0 Facebook 0 Google 0 PIN comparte 0 LinkedIn 0 Correo electrónico -- 0 Llamaradas ×

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *