audio player

React/NextJS Audio Player

ตัวอย่าง: 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 ) หรือใช้โฮสต์ภายนอกและให้ URL โดยตรงไปยังแหล่งที่มา (เช่น https://website.com/yourtrack.mp3 )

โครงการนี้อยู่ภายใต้ใบอนุญาต MIT ดังนั้นโปรดตรวจสอบและมีส่วนร่วม!