Виниловый проигрыватель. Проигрыватель поддерживает, на данный момент, mp3 и музыкальный хостинг https://zaycev.net/ , если смогу что то еще дёрнуть добавлю в поддержку. Создан с помощью ChatGPT.

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

Особенности:
- сброс, выбранной обложки пользователем, происходит при редактировании.

Первая часть. Ставить в НТМЛ верх:

<!-- =========================================================
     ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ
     
     Часть 1 — HTML Верх
	 
     Формат:
     [audio=https://site.ru/song.mp3]Название песни[/audio]
	 
	 Создан с помощью ChatGPT Kolobdur74.
     ========================================================= -->
<!-- Стиль. Часть 1 — БЫСТРЫЕ НАСТРОЙКИ ОСНОВНОЙ ТЕМЫ -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/99644.css">
<!-- Стиль. Часть 2 — ДОПОЛНИТЕЛЬНЫЕ ТЕМЫ -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/19230.css">
<!-- Стиль. Часть 3 — ОБЩАЯ СТРУКТУРА -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/60751.css">
<script>
/* =========================================================
   НАСТРОЙКИ ПЛЕЕРА
   ========================================================= */

window.AUDIO_PLAYER_CONFIG = {

    /*
     * КАРТИНКА ПЛАСТИНКИ
     *
     * Например:
     * recordImage: 'https://forumstatic.ru/files/.../record.png'
     *
     * Если оставить пустым — используется CSS-винил.
     */

    recordImage: 'https://forumstatic.ru/files/000d/8d/19/40871.png',
	
	/* Количество вариантов обложки. */
    coverThemes: 4,
	
	/* Какая тема по умолчанию. */
	defaultTheme: 3,

    /*
     * Максимальный угол перемещения звукоснимателя.
     *
     * Если в твоей картинке звукосниматель должен
     * ходить больше/меньше — меняется это число.
     */

    armStartAngle: 12,
    armEndAngle: 49,


    /* Скорость вращения пластинки. */

    recordRotationSeconds: 2.4
};
</script>
<!-- ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ. Скрипт. Запасные значки и тексты, кнопка в редакторе + ББ-код -->
<script src="https://forumstatic.ru/files/001a/ad/c5/50160.js?v=1"></script>

Вторая часть. Ставить в НТМЛ низ (если присутствует конфликт скриптов, ставить в самый низ НТМЛ низ):

<!-- =========================================================
     ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ
     
     Часть 2 — HTML Низ

     Формат:
     [audio=https://site.ru/song.mp3]Название песни[/audio]
	 
	 Создан с помощью ChatGPT Kolobdur74.
     ========================================================= -->
<!-- ДОПОЛНЕНИЕ К ВИНИЛОВОМУ ПРОИГРЫВАТЕЛЮ. Поддержка: Zaycev.net -->
<script src="https://forumstatic.ru/files/001a/ad/c5/77290.js"></script>
<!-- ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ. ПАРСЕР -->
<script src="https://forumstatic.ru/files/001a/ad/c5/61336.js"></script>

В принципе, я постарался всё подписать. НТМЛ низ не трогаем. НТМЛ верх, 1 файл стиля - это основная обложка (нулевой стиль), вынес специально отдельно, если нужен только один плеер, он обязателен. Переменные в нем именно так и сохраняем:

Второй файл - это дополнительные обложки, можно брать как пример, так же как и в первом файле. Третий стилевой файл лучше не трогать. Далее идут стилевые настройки:
- recordImage: 'https://forumstatic.ru/files/000d/8d/19/40871.png', - картинка пластинки для нулевого стиля, настройка оставлена на всякий случай, основная настройка пластинки нулевого стиля в первом файле.
- coverThemes: 4, - количество обложек, считается вместе с нулевым. То есть сейчас установлено нулевая обложка + 3 дополнительных обложек = 4.
- defaultTheme: 3, - какая обложка установлена по умолчанию. 0 - это нулевая обложка, 1, 2, 3 - дополнительные обложки.
- armStartAngle: 12, armEndAngle: 49, - угол перемещения, быстрее медленнее двигается звукосниматель.
- recordRotationSeconds: 2.4 - скорость вращения пластинки.

Файл скрипт значки и тексты трогаем, если надо поменять тексты/подсказки в плеере, значки оставлены на всякий случай, меняются значки в первом стилевом файле для нулевой темы.

Не скажу, что проигрыватель получился простой, но мне он понравился))

Посмотреть (первое переключение обложек здесь может быть заторможено, на форуме тормозов не должно быть):

[html]
<!-- =========================================================
     ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ
     
     Часть 1 — HTML Верх

     Формат:
     [audio=https://site.ru/song.mp3]Название песни[/audio]

Создан с помощью ChatGPT Kolobdur74.
     ========================================================= -->
<!-- Стиль. Часть 1 — БЫСТРЫЕ НАСТРОЙКИ ОСНОВНОЙ ТЕМЫ -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/99644.css">
<!-- Стиль. Часть 2 — ДОПОЛНИТЕЛЬНЫЕ ТЕМЫ -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/19230.css">
<!-- Стиль. Часть 3 — ОБЩАЯ СТРУКТУРА -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/60751.css">
<script>
/* =========================================================
   НАСТРОЙКИ ПЛЕЕРА
   ========================================================= */

window.AUDIO_PLAYER_CONFIG = {

    /*
     * КАРТИНКА ПЛАСТИНКИ
     *
     * Например:
     * recordImage: 'https://forumstatic.ru/files/.../record.png'
     *
     * Если оставить пустым — используется CSS-винил.
     */

    recordImage: 'https://forumstatic.ru/files/000d/8d/19/40871.png',

/* Количество вариантов обложки. */
    coverThemes: 4,

/* Какая тема по умолчанию. */
defaultTheme: 3,

    /*
     * Максимальный угол перемещения звукоснимателя.
     *
     * Если в твоей картинке звукосниматель должен
     * ходить больше/меньше — меняется это число.
     */

    armStartAngle: 12,
    armEndAngle: 49,

    /* Скорость вращения пластинки. */

    recordRotationSeconds: 2.4
};
</script>
<!-- ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ. Скрипт. Запасные значки и тексты, кнопка в редакторе + ББ-код -->
<script src="https://forumstatic.ru/files/001a/ad/c5/50160.js?v=1"></script>
<!-- =========================================================
     ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ
     
     Часть 2 — HTML Низ

     Формат:
     [audio=https://site.ru/song.mp3]Название песни[/audio]

Создан с помощью ChatGPT Kolobdur74.
     ========================================================= -->
<!-- ДОПОЛНЕНИЕ К ВИНИЛОВОМУ ПРОИГРЫВАТЕЛЮ. Поддержка: Zaycev.net -->
<script src="https://forumstatic.ru/files/001a/ad/c5/77290.js"></script>
<!-- ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ. ПАРСЕР -->
<script src="https://forumstatic.ru/files/001a/ad/c5/61336.js"></script>

[audio=https://zaycev.net/pages/175778/17577806.shtml||https://upforme.ru/uploads/001c/08/23/2/139747.png||Николай Расторгуев]Позови меня тихо по имени[/audio]
<br>
[audio=https://zaycev.net/pages/175778/17577806.shtml||||Николай Расторгуев]Позови меня тихо по имени[/audio]
[/html]