• Видаляє клавішу та ініціалізує всі плеєри для файлів Ogg (як аудіо, так і відео), доданих за допомогою вікі-синтаксису
• Дозволяє додати компактний аудіоплеєр з однією кнопкою для таких речей, як укуси звуку.

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

Installation

Програвачі

За замовчуванням усі файли у форматі Ogg, які вставляються як зображення ([[File:Якийсь звук.ogg]]) створюють клавішу, яка ініціалізує програвач, та ескіз, якщо це відео. Скрипт усуває необхідність натискати клавішу, щоб програвач відображався (а в деяких випадках переставляв макет). Він також видаляє посилання «⧼ogg-more⧽».

Автоініціалізація програвача необов’язкова і її можна вимкнути, якщо вам потрібна лише клавіша, описана нижче. Для цього просто додайте це у свою MediaWiki:Common.js:

var oggPlayerButtonOnly = false;

Клавіша

Це дозволяє зробити одну клавішу, яка після натискання відтворить звук і зупиниться і може бути зупинена повторним клацанням. Якщо на одній сторінці з’являється кілька клавіш, натискання однієї зупинить проходження будь-якої іншої кнопки.

Є кілька способів вставити його, залежно від того, який із них найкраще працює.

<span class="audio-button">[[File:Якийсь звук.ogg]]</span> <!-- гравець -->
<span class="audio-button">[[Media:Якийсь звук.ogg]]</span> <!-- посилання на медіа -->
<span class="audio-button" data-src="https://.../Якийсь_звук.ogg"></span> <!-- пряме посилання -->

Примітка: Ви можете використовувати {{filepath:Якийсь звук.ogg}} у параметрі data-src. Використання цього методу не спричинить трекер «Файл, який використовується».

Примітка: Тільки файли, розміщені на серверах Фандому та Вікімедіа із розширенням .ogg, .oga або .ogv.

Укладання

Якщо ви хочете змінити вигляд клавіши, ви можете використовувати як вбудований стиль, так і класи CSS:

audio-button

зазвичай усі клавіші це мають

now-playing

коли кнопка нині відтворює звук

no-audio

коли для кнопки немає звуку або браузер не підтримує формат ogg.

Інші примітки

• Ви можете додати клас click-parent, щоб клавіша відтворювала звук при натисканні на батьківський елемент (як ціла комірка таблиці).
• 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');
}