Виниловый проигрыватель. Проигрыватель поддерживает, на данный момент, mp3 и музыкальный хостинг https://zaycev.net/ , если смогу что то еще найти, то добавлю в поддержку. Создан с помощью ChatGPT.
Информация об использовании сторонних музыкальных ресурсов - смотрите пост №2
Возможности:
- поддерживает создание своих обложек и пластинок по умолчанию;
- возможность выбрать любую обложку по умолчанию;
- пользователь может добавить свою картинку пластинки, название композиции и автора;
- добавление музыкальных ресурсов отдельным файлом, на основной функционал не влияет.
- выбор обложки пользователем с запоминанием какую он выбрал конкретно для данного проигрывателя в посту.
- можно добавлять в подпись.
- работает так же в препросмотре.
Особенности:
- сброс, выбранной обложки пользователем, происходит при редактировании.
Первая часть. Ставить в НТМЛ верх:
<!-- =========================================================
ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ
Часть 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 файл стиля - это основная обложка (нулевой стиль), вынес специально отдельно, если нужен только один плеер, он обязателен. Переменные в нем именно так и сохраняем:
:root {
ЗДЕСЬ ПЕРЕМЕННЫЕ
}
Второй файл - это дополнительные обложки, можно брать как пример, так же как и в первом файле. Третий стилевой файл лучше не трогать. Далее идут стилевые настройки:
- 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]