Спасибо! Всё работает отлично. Мне нужен совет по поводу интерфейса для iPhone. Когда я захожу с iPhone, я заметил, что «иконка игрока» выходит за пределы экрана, и пользователь не может закрыть музыкальный плеер. Не могли бы вы указать строку кода, которую нужно исправить?
Привет ![]()
Спасибо, я объединил исправление и добавил поддержку iPhone (footer-nav) и т.д.: UX: fix music player height and add iphone (footer-nav) support · VaperinaDEV/soundcloud-music-player@40509c7 · GitHub
Редактирование: также исправлена ширина и положение в настольной версии UX: fixe music player width and position on desktop · VaperinaDEV/soundcloud-music-player@56eb89b · GitHub
Редактирование: ещё одно обновление UX: Add arrow to music player button by VaperinaDEV · Pull Request #2 · VaperinaDEV/soundcloud-music-player · GitHub

Продолжая улучшать этот компонент темы, не мог бы кто-нибудь помочь мне с улучшением интерфейса? @Don — оригинальный автор этого компонента, и он проделал фантастическую работу!
Было бы здорово, если бы кнопка «Слушать» отображалась в виде музыкального плеера, как показано ниже, и пользователи могли бы скрывать этот новый музыкальный плеер. Обратите внимание: это применимо только к десктопной и планшетной версиям. Если вы знаете способ сделать так, чтобы это выглядело хорошо и не создавало беспорядка на мобильной версии — дайте знать.
Пример музыкального плеера
- Воспроизведение / пауза
- Перемешивание
- Переход вперед или назад
- Название трека и имя исполнителя
- Расположение в левой части экрана
- Стрелка для скрытия музыкального плеера
Текущая версия
Возможности использования компонента темы, на который вы ссылались, ограничены, так как он является обёрткой вокруг кода встраивания SoundCloud. Это ограничивает интерфейс пользователя чем-то вроде этого (для плейлиста):
Некоторые из запрашиваемых вами функций можно реализовать с помощью существующего компонента темы, но изменить сам музыкальный плеер не получится. Для этого потребуется компонент темы, который делает запросы к API SoundCloud: API - Wrappers - SoundCloud Developers.
Этот API требует учетные данные, поэтому, вероятно, не стоит развертывать его как компонент темы, так как это раскроет эту информацию в браузере. В таком случае лучше сделать его плагином и обрабатывать это соединение приватно на бэкенде.
Для аутентифицированных запросов потребуется плагин, но SoundCloud API позволяет выполнять множество операций без аутентификации, просто указав CLIENT_ID. Проигрыватель SoundCloud можно реализовать исключительно с помощью компонента темы. Владелец сайта должен будет зарегистрировать приложение в SoundCloud и указать свой CLIENT_ID в настройках темы.
Однако плагин для SoundCloud был бы действительно интересен. Он мог бы, например, позволять пользователям загружать треки в плейлист, записывать треки напрямую из Discourse и многое другое.
В сущности, аутентификация необходима для выполнения запросов PUT, POST и DELETE. Для выполнения GET-запросов она не требуется.
Редактирование: всё это было бы замечательно, но зарегистрировать приложение у них непросто:
Судя по результатам поиска в Google, возможно зарегистрировать приложение, отправив им электронное письмо, но этот метод недостаточно надёжен для компонента темы или плагина, требующих регистрации приложения владельцем сайта. Если процесс подачи заявки на их API изменится, я вернусь к этой теме.
Этот компонент просто чудесный, очень понравился. Спасибо за вашу работу.
Он делает форум таким радостным…
Есть одно предложение:
сейчас в настройках прописана только один список. Не могли бы вы улучшить его, чтобы поддерживались несколько плейлистов?
Можно добавить в настройки список плейлистов: {id списка, название списка}.
А в интерфейсе дать пользователям возможность выбирать список — это было бы очень здорово ![]()
Например, добавить выпадающий список в боковую панель, возможно вверху, чтобы можно было выбрать плейлист.
Огромное спасибо… и надеюсь, вы рассмотрите это предложение…
Привет @fbpbdmin ![]()
Я объединил обновление для этого. Теперь вы можете добавлять больше пользователей / плейлистов в плеер. Оно содержит новую настройку.
Здесь вы можете выбрать тип встраивания для каждого плейлиста. users или playlists
например,
![]()
Больше плейлистов…
Привет, @Don! Это так здорово, большое спасибо!
![]()
Привет, @Don
Для большего удовольствия ![]()
Кажется, можно также интегрировать Spotify в этот отличный компонент радио.
Например, плейлист Spotify можно отобразить/встроить в виде похожего плеера.
(Сначала нужно добавить https://open.spotify.com/embed/ в список разрешённых iframe в настройках)
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/37i9dQZF1E37rs1nnrBO2K?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
Это отображается так:
Ещё раз спасибо за этот отличный компонент и приятных праздников!
Дон, это действительно крутой компонент темы ![]()
Интересно, возможно ли разработать аналогичный компонент темы для отображения видео, функционирующий как видеоплеер? Такое дополнение было бы чрезвычайно полезным для размещения видеоуроков и другого контента для пользователей форума. Источниками видео могут служить такие платформы, как YouTube, Vimeo и подобные ресурсы.
Да, @Aizada_M, думаю в том же направлении.
Песен на SoundCloud не так много, как на других медиа-сайтах, загруженные треки могут быть неверно определены из-за проблем с авторскими правами.
Встраивание плееров в iframe, думаю, должно работать для большинства плееров: YouTube, Spotify и т. д.
И даже для некоторых небольших веб-игр, ха-ха…
Надеюсь, у @Дона найдётся время на это
Спасибо ещё раз!




