감사합니다! 완벽하게 작동합니다. 한 가지 조언이 필요한 부분은 iPhone용 UI입니다. iPhone으로 접속했을 때 "Player icon"이 화면 밖으로 나가서 사용자가 음악 플레이어를 닫을 수 없었습니다. 이 문제를 수정할 수 있는 코드 줄을 알려주실 수 있을까요?
안녕하세요 ![]()
감사합니다. 수정 사항을 병합하고 iPhone(푸터 내비게이션) 등 지원 기능을 추가했습니다: 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 - Pull Request #2 - VaperinaDEV/soundcloud-music-player - GitHub

이 테마 컴포넌트를 지속적으로 개선하고 있는 중인데, UI 개선에 도움을 주실 분이 있을까요? @Don은 이 컴포넌트의 최초 작성자로, 정말 훌륭한 작업을 해주셨습니다!
아래와 같이 ‘듣기’ 버튼이 음악 플레이어 형태로 표시되고, 사용자가 이 새로운 음악 플레이어를 여전히 숨길 수 있으면 좋겠습니다. 참고로 이는 데스크톱 및 태블릿 버전에만 적용될 예정입니다. 모바일 버전에서도 여전히 깔끔하게 보일 수 있는 방법이 알고 계신다면 예외가 될 수 있겠습니다.
음악 플레이어 예시
- 재생/일시정지
- 무작위 재생
- 앞/뒤로 건너뛰기
- 곡명과 아티스트 이름
- 화면 왼쪽에 위치
- 음악 플레이어를 숨기는 화살표
현재 버전
링크하신 테마 컴포넌트로 할 수 있는 일은 제한적입니다. 이는 SoundCloud 임베드 코드를 감싸는 래퍼이기 때문입니다. 따라서 UI는 다음과 같은 수준으로만 제한됩니다(플레이리스트의 경우):
요청하신 내용 중 일부는 기존 테마 컴포넌트로 구현할 수 있지만, 실제 음악 플레이어 자체를 수정하는 것은 불가능합니다. 이를 위해서는 SoundCloud API에 요청을 보내는 테마 컴포넌트가 필요합니다: API - Guide - SoundCloud Developers.
해당 API는 자격 증명이 필요하므로, 브라우저에 해당 정보가 노출될 수 있으므로 테마 컴포넌트로 배포하는 것은 권장하지 않습니다. 대신 플러그인으로 만들어 백엔드에서 해당 연결을 비공개로 처리하는 것이 가장 좋습니다.
인증된 요청을 수행하려면 플러그인이 필요하지만, SoundCloud API는 CLIENT_ID만 제공하면 인증되지 않은 요청으로도 많은 작업을 수행할 수 있습니다. SoundCloud 플레이어는 테마 컴포넌트 하나만으로 만들 수 있습니다. 사이트 소유자는 SoundCloud에서 앱을 등록하고 CLIENT_ID를 테마 설정으로 제공해야 합니다.
SoundCloud 플러그인은 정말 흥미로울 것입니다. 사용자가 플레이리스트에 트랙을 업로드하거나, Discourse에서 직접 트랙을 녹음하는 등의 작업을 수행할 수 있겠죠.
결론적으로, PUT, POST, DELETE 요청을 보내려면 인증이 필요합니다. GET 요청을 보내려면 인증이 필요하지 않습니다.
수정: 위 내용들은 모두 훌륭하지만, 앱 등록 과정이 쉽지가 않습니다:
여기저기 검색해 보니 이메일을 보내면 앱 등록이 가능한 것 같지만, 사이트 소유자가 앱을 등록해야 하는 테마 컴포넌트나 플러그인에는 그 정도 신뢰성이 부족합니다. API 신청 절차가 변경되면 다시 이 주제를 다뤄보겠습니다.
이 컴포넌트는 정말 훌륭하고 좋습니다. 수고하신 점 감사드립니다.
이 덕분에 포럼이 훨씬 더 즐거워졌어요…
한 가지 제안이 있는데요,
현재 설정에 하드코딩되어 있어 목록이 하나만 지원됩니다.
여러 개의 재생 목록을 지원하도록 개선할 수 있을지 궁금합니다.
설정에서 재생 목록 목록을 추가할 수 있게 하면, {list id, list name} 형식으로 관리할 수 있겠죠.
그리고 UI에서 사용자가 목록을 선택할 수 있는 옵션을 제공하면 정말 정말 좋을 것 같습니다 ![]()
예를 들어, 슬라이드 패널 상단에 드롭다운을 추가해서 재생 목록을 선택할 수 있게 하는 거예요.
정말 감사합니다… 이 개선 사항을 고려해 주시길 바랍니다…
안녕하세요 @fbpbdmin ![]()
이 문제에 대한 업데이트를 병합했습니다. 이제 플레이어에 더 많은 사용자/재생 목록을 추가할 수 있습니다. 새로운 설정이 포함되어 있습니다.
여기서 각 재생 목록에 대한 임베드 유형을 선택할 수 있습니다. users 또는 playlists
예를 들어
![]()
더 많은 재생 목록…
hey @Don
정말 감사해요, 너무 좋아요!
![]()
hey @Don
더 재미있게 즐기려면 ![]()
이 멋진 라디오 컴포넌트에 스포티파이를 통합할 수도 있을 것 같아요.
예를 들어, 스포티파이 플레이리스트를 비슷한 플레이어 형태로 렌더링/임베드할 수 있죠.
(먼저 설정에서 허용된 iframe 목록에 https://open.spotify.com/embed/를 추가해야 합니다)
<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>
이렇게 렌더링됩니다.
이 멋진 컴포넌트를 만들어 주셔서 다시 한번 감사드립니다. 즐거운 휴가 보내세요!
Don, 정말 멋진 테마 컴포넌트네요 ![]()
비슷한 테마 컴포넌트를 개발하여 비디오를 표시하고 비디오 플레이어 역할을 할 수 있을지 궁금합니다. 이러한 추가 기능은 포럼 사용자들이 비디오 튜토리얼 등 다양한 콘텐츠를 호스팅하는 데 매우 유용할 것입니다. 비디오 소스는 YouTube, Vimeo 및 유사한 플랫폼을 포함할 수 있습니다.




