audio player
1.0.0
مطلوب 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 ).
هذا المشروع تحت رخصة معهد ماساتشوستس للتكنولوجيا ، لذا كن حرا للتحقق من ذلك والمساهمة!
