หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

เครื่องเล่น mixmotion

เครื่องเล่นเพลงที่ดื่มด่ำพร้อมการรวม Mixcloud และเอฟเฟกต์ภาพแบบไดนามิก

คลิกที่ภาพเพื่อลองใช้แอป

วิธีใช้

สำหรับผู้ใช้ทั่วไปที่ต้องการค้นพบเพลงใหม่ด้วยภาพแบบเต็มหน้าจอ กดที่ภาพด้านบนหรือลิงก์ด้านล่างเพื่อเปิดแอปเว็บ mixmotion บนมือถือ เดสก์ท็อป หรืออุปกรณ์ทีวีของคุณ

ลองแอพดูไหม?

https://lewhunt.github.io/mixmotion

ในการเล่น คุณจะเข้าสู่โหมดเอนหลังที่ดื่มด่ำ โดยมีพื้นหลังไดนามิกที่หลากหลายปรากฏขึ้นหลังจากไม่มีการใช้งานของผู้ใช้เพียงไม่กี่วินาที ด้านล่างนี้เป็นวิดีโอสั้นๆ ของแอปที่เปลี่ยนระหว่างโหมดการเล่น:

ภาพหน้าจอและวิดีโอเพิ่มเติมท้ายเอกสารนี้

การติดตั้ง

นักพัฒนายังสามารถติดตั้ง mixmotion Player เป็นส่วนประกอบโอเพ่นซอร์สเพื่อใช้ในแอป React วิธีการติดตั้งที่เร็วที่สุดคือผ่านคำสั่ง npm i ด้านล่าง หรืออีกทางหนึ่ง ให้รวมเข้าด้วยกันด้วยตนเองโดยคว้าโฟลเดอร์ lib ใน repo นี้พร้อมกับการอ้างอิงที่เกี่ยวข้อง 

npm install mixmotion -player

การใช้งานขั้นพื้นฐาน

นำเข้าเครื่องเล่นและแสดงผล mixmotion Player ในแอปของคุณเองด้วย URL Mixcloud โดยจะใช้การตั้งค่าเริ่มต้นสำหรับอุปกรณ์ประกอบฉากอื่นๆ ที่ไม่ได้ประกาศไว้

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;">
 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 ;

การใช้งานขั้นสูง

การสาธิตขั้นสูงและเว็บแอปอย่างเป็นทางการจะแสดงให้เห็นว่าสามารถปรับแต่งส่วนประกอบเพิ่มเติมได้อย่างไร มีการระบุอุปกรณ์ประกอบฉากสำหรับปุ่มที่กำหนดเอง พื้นหลังวิดีโอ และข้อมูลในเครื่อง (รายการที่บันทึกไว้) รายการอุปกรณ์ประกอบฉากทั้งหมดมีรายละเอียดเพิ่มเติมในหน้านี้

mixmotionPlayer url={url} showsData={getSavedData} customButtons={customButtons} backdropVideoList={backdropVideoList} enableBackdropVideo={true} ></ mixmotion Player>">
 < mixmotion Player
  url = { url }
  showsData = { getSavedData }
  customButtons = { customButtons }
  backdropVideoList = { backdropVideoList }
  enableBackdropVideo = { true }
> </ mixmotion Player >

ทำไมต้องเป็นเครื่องเล่นเพลงอื่น?

มีเครื่องเล่นเว็บและวิดเจ็ตมากมายให้เลือกใช้งานแล้ว เช่น Soundcloud และ Mixcloud ที่คุณสามารถรวมเข้ากับแอปของคุณได้

mixmotion นำเสนอสิ่งที่แตกต่างออกไป ประสบการณ์การเล่นแบบเต็มหน้าจอที่ดื่มด่ำพร้อมเอฟเฟกต์ภาพที่เป็นเอกลักษณ์ ในขณะที่ยังคงให้สิทธิ์เข้าถึงแคตตาล็อกเพลงมากมายของ Mixcloud ได้ฟรี

อะไรทำให้มันแตกต่าง?

  • การบูรณาการ Mixcloud : การเข้าถึงเนื้อหา Mixcloud ที่เรียบง่ายแต่หลากหลาย ซึ่งนอกเหนือไปจากวิดเจ็ตอย่างเป็นทางการ เข้าถึงเพลย์ลิสต์ ชุดผู้ใช้ ประเภท แท็ก และรายการแต่ละรายการ ด้วยความสามารถในการบันทึกรายการโปรดแบบส่วนตัวผ่านที่จัดเก็บในเครื่องและแบ่งปันมิกซ์
  • ภาพแบบไดนามิก : งานศิลปะที่ผสมผสานกับเอฟเฟกต์แคนวาสและพื้นหลังภาพเคลื่อนไหวของวิดีโอทำให้เกิดการผสมผสานที่น่าดึงดูดของภาพภายในเครื่องเล่นเพลงที่เต็มอิ่มและดื่มด่ำ
  • รองรับอุปกรณ์ได้หลากหลาย : ออกแบบมาสำหรับอุปกรณ์พกพา เดสก์ท็อป และทีวี ระบบนำทางแบบสัมผัส เคอร์เซอร์ และปุ่มลูกศรช่วยทำให้ประสบการณ์ผู้ใช้ราบรื่นในทุกแพลตฟอร์ม
  • ข้อพิจารณาในอนาคต : การบูรณาการกับเส้นทางไฟล์ในเครื่อง สตรีมเสียง และบริการเพลงอื่นๆ เช่น Soundcloud การแสดงภาพเสียงแบบเรียลไทม์และการตรวจจับจังหวะก็กำลังได้รับการพิจารณาเช่นกัน

มันทำงานอย่างไร?

ภายใต้ประทุน ส่วนประกอบนี้สร้างขึ้นจาก Mixcloud API และ Mixcloud Widget อย่างเป็นทางการ

นอกจากนี้ยังใช้องค์ประกอบที่กำหนดเองอีกอย่างของฉัน - ฉากหลังแบบไดนามิก - เพื่อสร้างการผสมผสานของวิดีโอที่มีเลเยอร์ด้วยเอฟเฟกต์ภาพเคลื่อนไหว CSS และ Canvas วิดีโอจะได้รับ 'โหมดผสมผสาน' แบบสุ่ม ดังนั้นจึงรวมเข้ากับพื้นหลังแคนวาสเพื่อให้เอฟเฟกต์สีต่างๆ

อุปกรณ์ประกอบฉาก

ข้อเสนอ คำอธิบาย ค่าเริ่มต้น
url URL Mixcloud ของเนื้อหาที่จะเล่น
◦ URL ส่วนใหญ่ได้รับการสนับสนุน เช่น เพลย์ลิสต์ ผู้ใช้ ประเภท แท็ก และรายการ/ชุดแต่ละรายการ
◦ นี่อาจเป็น URL แบบเต็มหรือคีย์ Mixcloud บางส่วน		 โมฆะ
showsData อาร์เรย์ที่จัดเก็บไว้ในเครื่องจะแสดงข้อมูลที่สามารถใช้แทน URL ได้
app แอพใช้สิ่งนี้สำหรับรายการที่บันทึกไว้ในที่จัดเก็บในตัวเครื่อง		 โมฆะ
backdropVideoList อาร์เรย์สตริงของ URL วิดีโอพื้นหลังซึ่งปรากฏในลำดับแบบสุ่มระหว่างโหมดการเล่นเมื่อไม่มีกิจกรรมของผู้ใช้ โมฆะ
enableBackdropVideo ตั้งค่าเป็น true เพื่อแสดงวิดีโอพื้นหลังด้านบนเมื่อไม่มีกิจกรรมของผู้ใช้
◦ ปุ่มสลับวิดีโอใน UI (และแฟล็กที่เก็บข้อมูลในเครื่อง) จะแทนที่สิ่งนี้		 false
enableUserLink ตั้งค่าเป็น true เพื่อเปลี่ยนชื่อย่อยของผู้ใช้/ศิลปินให้เป็นลิงก์รีแอคเตอร์ (ใช้ในแอปที่ปรับใช้) false
collapsed ตั้งค่าเป็น true เพื่อลดข้อมูลเมตาและการควบคุมของโปรแกรมเล่น เพื่อเพิ่มพื้นที่สำหรับเนื้อหาอื่นๆ
◦ ใช้ในแอปสำหรับเนื้อหาหน้าแรกและหน้าการค้นหา		 false
activityTimeout แทนที่ช่วงหมดเวลาของการไม่ใช้งานของผู้ใช้ ซึ่งจะทริกเกอร์ 'โหมดไม่ใช้งาน' ในระหว่างการเล่นเพื่อแสดงภาพไดนามิกเต็มรูปแบบ
◦ ใช้ในแอปเพื่อให้ระยะหมดเวลานานขึ้นในหน้าแรกและหน้าการค้นหา		 4000
showWidget แสดงวิดเจ็ต Mixcloud อย่างเป็นทางการที่ด้านล่างของหน้า - ด้วยการควบคุมและแถบความคืบหน้าของตัวเอง - แทนที่จะเป็นแถบความคืบหน้าแบบกำหนดเอง
Widget วิดเจ็ตอย่างเป็นทางการไม่รองรับการนำทางด้วยปุ่มลูกศรสำหรับอุปกรณ์ทีวี		 false
width แทนที่ความกว้างของเครื่องเล่น
◦ หมายเหตุ: แบบเต็มหน้าจอเป็นประสบการณ์การใช้งานของผู้ใช้ โดยมีเนื้อหาซ้อนทับอยู่
◦ คุณอาจต้องแก้ไข CSS หากคุณแทนที่ความกว้าง		 100%
height แทนที่ความสูงของผู้เล่น
◦ หมายเหตุ: แบบเต็มหน้าจอเป็นประสบการณ์การใช้งานของผู้ใช้ โดยมีเนื้อหาซ้อนทับอยู่
◦ คุณอาจต้องแก้ไข CSS หากคุณแทนที่ความสูง		 100%
customButtons ระบุชุดปุ่มที่กำหนดเองสำหรับ UI ของผู้เล่น
— ชุดปุ่มเริ่มต้นจะถูกใช้หากไม่มีการระบุ		 null
autoplay ตั้งค่าเป็น false เพื่อปิดใช้งานความพยายามในการเล่นเนื้อหาอัตโนมัติ true
withExclusives ตั้งค่าเป็น true เพื่อรวมเนื้อหาพิเศษจาก Mixcloud API
— หมายเหตุ: เนื้อหาพิเศษไม่น่าจะเล่นได้หากไม่มีการพัฒนาเพิ่มเติมเพื่อรองรับการตรวจสอบสิทธิ์การลงชื่อเข้าใช้ของผู้ใช้ Mixcloud		 false
listIndex ตั้ง number ดัชนีสื่อเริ่มต้นหากคุณมีหลายรายการ/ชุดใน URL ที่ร้องขอหรืออาร์เรย์ showData ในเครื่อง 0
style เพิ่มสไตล์ CSS แบบอินไลน์ให้กับเครื่องเล่น null

อุปกรณ์ประกอบฉากโทรกลับ

พร็อพโทรกลับจะเริ่มทำงานในกิจกรรมของผู้เล่นต่างๆ ดังนั้นคุณจึงสามารถดำเนินการเพิ่มเติมได้เมื่อเกิดขึ้น:

ข้อเสนอ คำอธิบาย
onReady เรียกเมื่อโหลดมีเดียและพร้อมที่จะเล่น
onPlay เรียกว่าเมื่อสื่อเริ่มเล่นหรือเล่นต่อหลังจากหยุดชั่วคราวหรือบัฟเฟอร์
onPause โทรเมื่อสื่อถูกหยุดชั่วคราว
onBuffering เรียกว่าเมื่อสื่อเริ่มบัฟเฟอร์
onEnded โทรมาเมื่อสื่อเล่นจบ
&nbsp
onError เรียกว่าเมื่อมีข้อผิดพลาดเกิดขึ้นขณะพยายามเล่นสื่อ

ปุ่มแบบกำหนดเอง

ดังที่แสดงในการสาธิตขั้นสูง ผู้เล่นสามารถแทนที่ด้วยปุ่มที่กำหนดเองได้ มีประเภทการกระทำที่สร้างไว้ล่วงหน้าให้เลือกมากมายพร้อมไอคอนและลักษณะการทำงานของตนเอง หรือคุณสามารถเพิ่มประเภทการกระทำของคุณเองด้วยประเภทการกระทำ "กำหนดเอง" ได้

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} />; }">
 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 อนุญาตให้รองรับพฤติกรรมการสลับ (ในรูปแบบของการเติมปุ่ม) เมื่อตั้งค่าเป็นจริง
disable ป้องกันการทำงานของปุ่มเมื่อตั้งค่าเป็นจริง

useSavedItems Hook

เบ็ดแบบกำหนดเองนี้ใช้เพื่ออัปเดตและเรียกค้นรายการที่ผู้ใช้ชื่นชอบ/ชื่นชอบ ตัวอย่างด้านล่างจากการสาธิตขั้นสูงแสดงวิธีการโหลดโปรแกรมเล่นด้วยข้อมูลที่บันทึกไว้ในเครื่อง

mixmotionPlayer, 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} /> ); } ">
 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 }
    />
  ) ;
}

ใช้Store Hook

เพื่อการควบคุมที่มากขึ้น คุณสามารถนำเข้า hook แบบกำหนดเองของ useStore เพื่อเข้าถึงสถานะของผู้เล่นได้ทั่วโลก ดูส่วนประกอบภายในเช่น mixmotion PlayerUI สำหรับตัวอย่างการใช้งาน ตัวอย่างด้านล่างแสดงการใช้งานพื้นฐานเพื่อรับชื่อรายการปัจจุบันและสถานะการเล่น:

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 ... />;">
 // 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


สนับสนุน

ฉันหวังว่านี่จะเป็นการแนะนำแอปและส่วนประกอบที่ดี

แสดงความคิดเห็นหากคุณมีข้อเสนอแนะคำขอหรือปัญหาใด ๆ

ให้คะแนนดาวถ้าคุณชอบส่วนประกอบหรือต้องการบุ๊กมาร์กไว้


ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด