mixmotion
1.0.0
Mixcloud 통합 및 동적 시각 효과를 갖춘 몰입형 음악 플레이어
이미지를 클릭하여 앱을 사용해 보세요.
전체 화면 영상으로 새로운 음악을 발견하고 싶은 일반 사용자의 경우 위 이미지를 누르거나 아래 링크를 클릭하여 모바일, 데스크톱 또는 TV 장치에서 mixmotion 웹 앱을 실행하세요.
https://lewhunt.github.io/mixmotion
재생 시 사용자가 몇 초 동안 활동하지 않으면 매우 다양한 동적 배경이 나타나는 몰입형 Lean-back 모드로 전환됩니다. 다음은 재생 모드 간 앱 전환에 대한 빠른 비디오입니다.
이 문서 끝에 더 많은 스크린샷과 비디오가 있습니다.
개발자는 React 앱에서 사용할 오픈 소스 구성 요소로 mixmotion Player를 설치할 수도 있습니다. 가장 빠른 설치 방법은 아래 npm i 명령을 사용하는 것입니다. 또는 관련 종속성과 함께 이 저장소의 lib 폴더를 가져와 수동으로 통합하세요.
npm install mixmotion -playerMixcloud URL을 사용하여 플레이어를 가져오고 자신의 앱에서 mixmotion Player를 렌더링합니다. 선언되지 않은 다른 props에 대해서는 기본 설정을 사용합니다.
import { useEffect , useState } from "react" ;
import { mixmotion Player } from " mixmotion -player" ;
function Demo ( ) {
const [ url , setUrl ] = useState ( "" ) ;
useEffect ( ( ) => {
setUrl ( "https://www.mixcloud.com/discover/trance/?order=latest" ) ;
} , [ ] ) ;
return < mixmotion Player url = { url } /> ;
}
export default Demo ;고급 데모 및 공식 웹 앱은 구성 요소를 추가로 사용자 정의할 수 있는 방법을 보여줍니다. 사용자 정의 버튼, 비디오 배경 및 로컬 데이터(저장된 항목)에 대한 소품이 지정됩니다. 소품의 전체 목록은 이 페이지 아래에 자세히 설명되어 있습니다.
< mixmotion Player
url = { url }
showsData = { getSavedData }
customButtons = { customButtons }
backdropVideoList = { backdropVideoList }
enableBackdropVideo = { true }
> </ mixmotion Player > Soundcloud, Mixcloud 등 앱에 통합할 수 있는 웹 플레이어와 위젯이 이미 많이 있습니다.
mixmotion 뭔가 다른 것을 제공합니다. 독특한 시각 효과를 갖춘 몰입형 전체 화면 재생 경험을 제공하는 동시에 Mixcloud의 방대한 음악 카탈로그에 무료로 액세스할 수 있습니다.
내부적으로 구성 요소는 공식 Mixcloud API 및 Mixcloud 위젯 위에 구축되었습니다.
또한 내 또 다른 사용자 정의 구성 요소인 동적 배경을 활용하여 CSS와 캔버스 애니메이션 효과로 계층화된 비디오를 혼합합니다. 비디오에는 무작위 '블렌드 모드'가 제공되므로 캔버스 배경과 병합되어 다양한 색상 효과를 얻을 수 있습니다.
| 소품 | 설명 | 기본 |
|---|---|---|
url | 재생할 콘텐츠의 Mixcloud URL ◦ 재생목록, 사용자, 장르, 태그, 개별 공연/세트 등 대부분의 URL이 지원됩니다. ◦ 전체 URL 또는 부분 Mixcloud 키일 수 있습니다. | null |
showsData | 로컬에 저장된 배열은 URL 대신 사용할 수 있는 데이터를 보여줍니다. ◦ 앱은 로컬 저장 쇼에 대해 이를 활용합니다. | null |
backdropVideoList | 사용자 활동이 없을 때 재생 모드에서 무작위 순서로 나타나는 배경 비디오 URL의 문자열 배열 | null |
enableBackdropVideo | 사용자 활동이 없을 때 위의 배경 비디오를 표시하려면 true 로 설정하십시오.◦ UI의 비디오 토글 버튼(및 로컬 저장소 플래그)이 이 버튼을 재정의합니다. | false |
enableUserLink | 사용자/아티스트 부제목을 반응 라우터 링크로 바꾸려면 true 로 설정하세요. (배포된 앱에서 사용됨) | false |
collapsed | 다른 콘텐츠를 위한 공간을 확보하기 위해 플레이어 메타데이터 및 컨트롤을 최소화하려면 true 로 설정합니다.◦ 홈 및 검색 페이지 콘텐츠를 위해 앱에서 사용됩니다. | false |
activityTimeout | 사용자 비활성의 시간 초과 기간을 재정의하여 재생 중에 '비활성 모드'를 트리거하여 완전히 동적인 영상을 표시합니다. ◦ 홈 및 검색 페이지에서 더 긴 시간 초과 기간을 제공하기 위해 앱에서 사용됩니다. | 4000 |
showWidget | 사용자 정의 진행률 표시줄 대신 자체 컨트롤과 진행률 표시줄이 포함된 공식 Mixcloud 위젯을 페이지 하단에 표시합니다. ◦ 공식 위젯은 TV 장치에 대한 화살표 키 탐색을 지원하지 않습니다. | false |
width | 플레이어의 너비를 재정의합니다. ◦ 참고: 전체 화면은 의도된 사용자 경험이며 콘텐츠가 겹쳐져 있습니다. ◦ 너비를 재정의하는 경우 CSS를 수정해야 할 수도 있습니다. | 100% |
height | 플레이어의 높이를 재정의합니다. ◦ 참고: 전체 화면은 의도된 사용자 경험이며 콘텐츠가 겹쳐져 있습니다. ◦ 높이를 재정의하는 경우 CSS를 수정해야 할 수도 있습니다. | 100% |
customButtons | 플레이어 UI에 대한 사용자 정의 버튼 컬렉션 지정 ◦ 아무 것도 지정하지 않으면 기본 버튼 세트가 사용됩니다. | null |
autoplay | 콘텐츠 자동 재생 시도를 비활성화하려면 false 로 설정하세요. | true |
withExclusives | Mixcloud API의 독점 콘텐츠를 포함하려면 true 로 설정하세요.◦ 참고: Mixcloud 사용자 로그인 인증을 지원하기 위한 추가 개발 없이는 독점 콘텐츠가 재생되지 않을 가능성이 높습니다. | false |
listIndex | 요청된 URL 또는 로컬 showData 배열에 여러 개의 쇼/세트가 있는 경우 초기 미디어 인덱스 number 설정하세요. | 0 |
style | 플레이어에 인라인 CSS 스타일 추가 | null |
콜백 소품은 다양한 플레이어 이벤트에서 실행되므로 이러한 이벤트가 발생할 때 추가 조치를 취할 수 있습니다.
| 소품 | 설명 |
|---|---|
onReady | 미디어가 로드되고 재생할 준비가 되면 호출됩니다. |
onPlay | 일시중지 또는 버퍼링 후 미디어 재생이 시작되거나 재개될 때 호출됩니다. |
onPause | 미디어가 일시중지되면 호출됩니다. |
onBuffering | 미디어 버퍼링이 시작될 때 호출됩니다. |
onEnded | 미디어 재생이 끝나면 호출됩니다.   |
onError | 미디어 재생을 시도하는 동안 오류가 발생하면 호출됩니다. |
고급 데모에서 설명한 것처럼 플레이어는 사용자 정의 버튼으로 재정의될 수 있습니다. 고유한 아이콘과 동작이 포함된 사전 구축된 작업 유형을 선택하거나 "사용자 정의" 작업 유형을 사용하여 직접 추가할 수 있습니다.
import { mixmotion Player , ButtonProps } from " mixmotion -player" ;
import { faBars } from "@fortawesome/free-solid-svg-icons" ;
const customButtons : ButtonProps [ ] = [
{ action : "save" , align : "right" } ,
{ action : "previous" , align : "center" } ,
{ action : "playpause" , align : "center" } ,
{ action : "next" , align : "center" } ,
{
action : "custom" ,
align : "right" ,
label : "Queue" ,
faIcon : faBars ,
onPress : ( ) => {
console . log ( "my custom button pressed" ) ;
} ,
} ,
] ;
function Demo ( ) {
return < mixmotion Player url = { url } customButtons = { customButtons } /> ;
}| 버튼 소품 | 설명 |
|---|---|
action | custom 작업 또는 사전 구축된 작업 중 하나를 선택하세요: collapse , github , mixcloud , mute , next , playpause , previous , save , videos |
align | 버튼 정렬. left , center , right 중에서 선택하세요. |
label | 현재 포커스가 있는 버튼 아래에 표시되는 힌트 텍스트 라벨입니다. 사전 구축된 버튼 작업은 관련 라벨을 사용합니다. |
faIcon | 글꼴이 멋진 아이콘입니다. 사전 구축된 버튼 작업은 관련 아이콘을 사용합니다. |
onPress | 버튼을 눌렀을 때 호출됩니다. 미리 만들어진 버튼 동작에는 고유한 동작이 있습니다. |
onRelease | 버튼을 놓을 때 호출됩니다. 현재 미사용. |
isSelectedFill | true로 설정하면 토글 동작(버튼 채우기 형식)을 지원할 수 있습니다. |
disable | true로 설정하면 버튼 동작을 방지합니다. |
이 사용자 정의 후크는 사용자가 좋아하거나 좋아하는 프로그램을 업데이트하고 검색하는 데 사용됩니다. 아래 고급 데모의 스니펫은 로컬에 저장된 데이터로 플레이어를 로드하는 방법을 보여줍니다.
import { mixmotion Player ,
useSavedItems ,
ShowsDataType
} from "./lib/ mixmotion Player" ;
function Demo ( ) {
const { getSavedItems } = useSavedItems ( ) ;
const getSavedData = useMemo ( ( ) => {
const savedItems = getSavedItems ( ) ;
if ( savedItems . length )
return {
label : "Saved Sets" ,
shows : savedItems . reverse ( ) ,
} as ShowsDataType ;
} , [ getSavedItems ] ) ;
return (
< mixmotion Player
showsData = { getSavedData }
/>
) ;
} 더 많은 제어를 위해 useStore 사용자 정의 후크를 가져와 플레이어 상태에 전역적으로 액세스할 수 있습니다. 사용 예를 보려면 mixmotion PlayerUI 와 같은 내부 구성 요소를 확인하세요. 아래 스니펫은 현재 프로그램 제목과 재생 상태를 가져오는 기본 사용법을 보여줍니다.
// 1. import useStore
import { mixmotion Player , useStore } from " mixmotion -player" ;
// 2. get desired state values
const playing = useStore ( ( s ) => s . playing ) ;
const title = useStore ( ( s ) => s . title ) ;
console . log ( "playing: state " , playing ) ;
console . log ( "Current title: " , title ) ;
< mixmotion Player . . . / > ;| 데스크탑의 플레이어 UI | 모바일에서 |
검색 페이지
재생 모드
재생 모드(예 1)
YouTube에서 비디오 프로모션을 보려면 클릭하세요.
이것이 앱과 구성 요소에 대한 좋은 소개가 되었기를 바랍니다.
피드백, 요청 또는 문제가 있으면 댓글을 달아주세요.
구성 요소가 마음에 들거나 북마크하고 싶다면 별표를 표시하세요.
