OggPlayer

OggPlayer
Information
Type	JavaScript (See more >)
Description	Adds a single-button audio player and initializes all Ogg players.
Author(s)	Nanaki
Scope	Unknown
Updated	January 28, 2016
Code	OggPlayer.js
Language support	English, Dutch, German, Polish, Spanish add more...

OggPlayers 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 IE, Edge or Safari).

Installation

To import the script on your wiki just add the line below to MediaWiki:ImportJS on your wiki. (more info...)

dev:OggPlayer.js

Players

By default, all files in the Ogg format that are inserted like images ([[File:Some file.ogv]]) 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="http://.../Some_sound.ogg"></span> // a direct link

Note: You can use {{filepath:Some_sound.ogg}} in the data-src parameter.

Note: Only files hosted on Wikia 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 ofc
• 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 click-parent class to make the button play sound when the parent element is clicked (like the whole table cell).
• Everything inside the .audio-button will be removed.

i18n

See talk page.