Fandom Developers Wiki
Advertisement

OggPlayer es un script que facilita la reproducción de archivos Ogg. Tiene dos características:

  • Elimina el botón e inicializa todos los reproductores para archivos Ogg (tanto de audio como de video) agregados a través de la sintaxis wiki
  • Le permite agregar un reproductor de audio compacto de un botón para cosas como fragmentos de sonido.

Nota: no soluciona la falta de compatibilidad con el formato Ogg en algunos navegadores (como Safari).

Instalación[]

Música[]

De forma predeterminada, todos los archivos en formato Ogg que se insertan como imágenes ([[File:Algún archivo.ogg]]) producen un botón que inicializa el reproductor y una miniatura si es un video. La secuencia de comandos elimina la necesidad de hacer clic en el botón para que aparezca la música (y en algunos casos reorganizar el diseño). También elimina el enlace "⧼ogg-more⧽".

La inicialización automática del reproductor es opcional y se puede desactivar si solo desea el botón que se describe a continuación. Para hacer eso, simplemente agregue esto a su MediaWiki:Common.js:

var oggPlayerButtonOnly = false;

Botón[]

Esto le permite crear un solo botón que después de hacer clic reproducirá un sonido y se detendrá y se puede detener haciendo clic de nuevo. Si aparecen varios botones en la misma página, al hacer clic en uno se detendrá la reproducción de cualquier otro botón.

Hay varias formas de insertarlo, la que funcione mejor.

<span class="audio-button">[[File:Algún archivo.ogg]]</span> <!-- una música -->
<span class="audio-button">[[Media:Algún archivo.ogg]]</span> <!-- a media link -->
<span class="audio-button" data-src="https://.../Algún_archivo.ogg"></span> <!-- a direct link -->
Nota: Puede usar {{filepath:Algún archivo.ogg}} en el parámetro data-src.
Nota: Solo archivos alojados en servidores Fandom y Wikimedia con extensión .ogg, .oga o .ogv.

Styling[]

Si desea cambiar la apariencia del botón, puede usar clases de estilo en línea y CSS:

audio-button
todos los botones lo tienen
now-playing
cuando el botón está reproduciendo el sonido actualmente
no-audio
cuando no hay sonido para el botón o el navegador no admite el formato Ogg.

Otras notas[]

  • Puede agregar la clase click-parent para hacer que el botón suene cuando se hace clic en el elemento principal (como toda la celda de la tabla).
  • You can add the focusable class to make the button be focusable when navigating with the Tab key and press the Space or Enter keys to play/pause.
  • Everything inside the .audio-button will be removed.

Alternative[]

The javascript is not functional on mobile skin due to customization restrictions. If mobile-compatibility is desired, the extension AudioButton can be requested to be enabled via contacting staffs. In order to achieve the same design as the OggPlayer, copy-paste the following CSS to both the desktop CSS page (MediaWiki:Common.css) and the mobile CSS page (MediaWiki:FandomMobile.css) of the wiki.

.ext-audiobutton::before {
	display: none;
}

/*
  Forked from OggPlayer on Fandom Developers Wiki
  https://dev.fandom.com/wiki/OggPlayer
*/

/* Used files: [[File:OggPlayer play.svg]] [[File:OggPlayer stop.svg]] [[File:OggPlayer mute.svg]] */

.ext-audiobutton {
    display: inline-block;
    vertical-align: -0.1em;
    width: 1em;
    height: 1em;
    overflow: hidden;
    border-radius: 3px;
    background-color: #006cb0;
    transition: background-color .2s;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('https://vignette.wikia.nocookie.net/dev/images/d/d6/OggPlayer_play.svg');
}
.ext-audiobutton[data-state="pause"],
.ext-audiobutton:hover {
    background-color: #b30000;
}
.ext-audiobutton[data-state="pause"] {
    background-image: url('https://vignette.wikia.nocookie.net/dev/images/a/a9/OggPlayer_stop.svg');
}
.ext-audiobutton[data-state="error"] {
    cursor: help;
    background-color: #b30000;
    background-image: url('https://vignette.wikia.nocookie.net/dev/images/a/ae/OggPlayer_mute.svg');
}
Advertisement