Fandom Developers Wiki
Advertisement

OggPlayer is a script that makes playing Ogg files easier. It has two features:

  • Removes the button and initializes all players for Ogg files (both audio and video) added through wiki-syntax
  • Allows you to add a compact one-button audio player for things like sound bites.

Note: it doesn't fix the lack of support for Ogg format in some browsers (like Safari).

Installation

Players

By default, all files in the Ogg format that are inserted like images ([[File:Some file.ogg]]) produce a button that initializes the player and a thumbnail if it's a video. The script removes the necessity to click the button for the player to show up (and in some cases rearrange the layout). It also removes the link "⧼ogg-more⧽".

Player auto-initialization is optional and can be turned off if you only want the button described below. To do that just add this to your MediaWiki:Common.js:

var oggPlayerButtonOnly = false;

Button

This allows you to make a single button that after clicking will play a sound and stop and can be stopped by clicking again. If multiple buttons appear on the same page, clicking one will stop the playthrough of any other button.

There are multiple ways to insert it, whichever works best:

<span class="audio-button">[[File:Some sound.ogg]]</span> <!-- a player -->
<span class="audio-button">[[Media:Some sound.ogg]]</span> <!-- a media link -->
<span class="audio-button" data-src="https://.../Some_sound.ogg"></span> <!-- a direct link -->
Note: You can use {{filepath:Some sound.ogg}} in the data-src parameter. Using this method will not trigger the "File Used By" tracker.
Note: Only files hosted on Fandom and Wikimedia servers with .ogg, .oga or .ogv extension.

Styling

If you want to change the appearance of the button you can use both inline style and CSS classes:

audio-button
all buttons have it
now-playing
when the button is currently playing the sound
no-audio
when there's no sound for the button or the browser doesn't support Ogg format.

Other notes

  • You can add the click-parent class to make the button play sound when the parent element is clicked (like the whole table cell).
  • 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');
}
Text above can be found here (edit)
Advertisement