SCP Foundation

Аудиоплеер Мити — это современный, удобный и широко кастомизируемый аудиоплеер для ваших великолепных треков.

Описание

Компонент предоставляет минимально необходимый функционал полноценного аудиоплеера, такой как остановка и возобновление воспроизведения, изменение уровня громкости, повтор трека и отображение текущего прогресса. Для успешной работы достаточно предоставить в параметр audio-file ссылку на валидный аудиофайл.

Основное предназначение данного аудиоплеера — даль пользователям возможность применять свои собственные стили CSS и тем самым расширить возможности кастомизации. По умолчанию используется слегка модифицированный дизайн, созданный графическим дизайнером и участником англоязычного филиала SCP Foundation Woedenaz для его же аудиоплеера.

Без дополнительных стилей аудиоплеер выглядит так:

Заметьте, что включается не эта страница, а страница с исходником аудиоплеера.

В отличие от плеера-предшественника, кастомизация которого является минималистичной и ограниченной цветами
элементов и скруглениями, этот позволяет менять каждый отображаемый элемент, при том не только цвета, но и положение элементов относительно друг друга, тени, эффекты при наведении и так далее.

Для добавления пользовательских стилей необходимо передать в параметр user-defined-stylesheet ссылку на ваш файл стилей. Очевидно, в таком случае вам придётся выносить всё в отдельный файл. Этот файл вы можете загрузить у себя в черновиках или в своей статье. Внедрённые таким образом стили перезапишут стандартные независимо от специфичности используемых селекторов.

Все иконки можно заменить на собственные изображения. Поддерживаются как SVG, так и обычные изображения, однако использование первых является более желательным — они загружаются быстрее и к ним намного проще применять стили CSS. В случае SVG-изображений они вставляются как тег svg напрямую, в то время как изображения — как тег img.

Поскольку некоторые иконки имеют больше одного состояния (например, кнопка воспроизведения), то для каждого состояния потребуется своя иконка.

Ниже представлен пример «перекрашенной» версии стандартного плеера, подражающего эстетике Темы Y2K:

Классы и стили

Ниже перечислены классы, которые могут меняться в процессе использования плеера. Статичные классы вы можете увидеть самостоятельно, осмотрев HTML-код плеера.

#audio-player может иметь три класса:

• .not-loaded — стандартное состояние при включении компонента. Плеер начинает загрузку аудиофайла и будет находиться в этом состоянии до тех пор, пока не наткнётся на одно из двух следующих состояний.
• .loaded — состояние, сообщающее об успешной загрузке плеера и готовности к работе.
• .failed — состояние, сообщающее о произошедшей ошибке, не позволяющей запустить плеер.

Некоторые кнопки имеют состояния, отраженные в их классах.

#play-pause может иметь два класса:

• .pause — кнопка находится в состоянии «Пауза».
• .start — кнопка находится в состоянии «Воспроизведение».

#loop может иметь два класса:

• .unloop — кнопка находится в состоянии «Без возобновления воспроизведения».
• .loop — кнопка находится в состоянии «Возобновление воспроизведения».

#mute может иметь два класса:

• .unmute — кнопка находится в состоянии «Не заглушать трек».
• .mute — кнопка находится в состоянии «Заглушать трек».

Каждый тег button, а также блок #volume, могут иметь внутри себя в качестве первых прямых наследников либо тег svg, либо тег img — в зависимости от того, какой формат иконок был загружен.