audio player

React/Nextjs 오디오 플레이어

데모 : https://audioplayer.madza.dev

---

요구 사항

node.js 18.x / 20+가 필요합니다.

React 18.2.0 및 Nextjs 14.1.0에서 테스트.

설치

 npm install @ madzadev / audio - player 

용법

 import Player from "@madzadev/audio-player" ;
import "@madzadev/audio-player/dist/index.css" ; 

 const tracks = [
  {
    url : "https://audioplayer.madza.dev/Madza-Chords_of_Life.mp3" ,
    title : "Madza - Chords of Life" ,
    tags : [ "house" ] ,
  } ,
  {
    url : "https://audioplayer.madza.dev/Madza-Late_Night_Drive.mp3" ,
    title : "Madza - Late Night Drive" ,
    tags : [ "dnb" ] ,
  } ,
  {
    url : "https://audioplayer.madza.dev/Madza-Persistence.mp3" ,
    title : "Madza - Persistence" ,
    tags : [ "dubstep" ] ,
  } ,
] ; 

 < Player trackList = { tracks } />

유일한 필수 소스는 오디오 소스를위한 trackList 입니다.

url , title 및 tags 키가있는 객체로 구성된 배열을 전달해야합니다.

옵션

플레이어를 구성하는 데 사용할 수있는 여러 옵션 소품이 있습니다.

그 기본값은 아래에 표시됩니다.

 < Player
  trackList = { tracks }
  includeTags = { true }
  includeSearch = { true }
  showPlaylist = { true }
  sortTracks = { true }
  autoPlayNextTrack = { true }
/> 

색 구성표

아래의 colors 객체를 편집하여 플레이어의 디자인을 사용자 정의 할 수 있습니다.

사용자 정의하려는 속성 만 포함하십시오.

 const colors = {
  tagsBackground : "#3e32e4" ,
  tagsText : "#ffffff" ,
  tagsBackgroundHoverActive : "#6e65f1" ,
  tagsTextHoverActive : "#ffffff" ,
  searchBackground : "#18191f" ,
  searchText : "#ffffff" ,
  searchPlaceHolder : "#575a77" ,
  playerBackground : "#18191f" ,
  titleColor : "#ffffff" ,
  timeColor : "#ffffff" ,
  progressSlider : "#3e32e4" ,
  progressUsed : "#ffffff" ,
  progressLeft : "#151616" ,
  bufferLoaded : "#1f212b" ,
  volumeSlider : "#3e32e4" ,
  volumeUsed : "#ffffff" ,
  volumeLeft : "#151616" ,
  playlistBackground : "#18191f" ,
  playlistText : "#575a77" ,
  playlistBackgroundHoverActive : "#18191f" ,
  playlistTextHoverActive : "#ffffff" ,
} ; 

 < Player trackList = { tracks } customColorScheme = { colors } /> 

최종 노트

오디오 파일은 파일 경로 (예 : public/yourtrack.mp3 )를 통해 프로젝트에서 로컬로 로컬로 저장 및 액세스 할 수 있으며 외부 호스트를 사용하고 소스 (예 : https://website.com/yourtrack.mp3 )에 직접 URL을 제공 할 수 있습니다.

이 프로젝트는 MIT 라이센스하에 있으므로 자유롭게 확인하고 기여하십시오!