Építsen egy egyszerű zenelejátszót reagálással

Sep 16, 2025

kézikönyv

Reagál A népszerű JavaScript könyvtár a felhasználói felületek építéséhez, és ebben a bemutatóban megmutatom, hogyan kell használni egy egyszerű interaktív zenelejátszó építéséhez. Codepenben fogunk dolgozni, és ezt a projektet offline módon is meg lehet írni egy React alkalmazás belsejében, mivel az összes komponens elég könnyen kikapcsolható.

Fedezni fogjuk kellékek , állapot és hogy az alkatrészek együtt dolgoznak és kommunikálnak egymással a reakció ökoszisztémáján belül. Én is használjuk Betűtípus fantasztikus , Tehát győződjön meg róla, hogy a Codepen CSS panel belsejében van.

Ahhoz, hogy felálljon és nagyon gyorsan reagáljon, összeállítottam A kollekció gyűjteménye a Codepen-en , és sértse be a szakaszokat, így bármikor ugorhatsz, villogak a lépést, és menj előre innen. Azt is írtam a CSS-t, így csak a reagálásra koncentrálhat, és hogyan működik.

Hozza létre a reagálási ui-t

Kezdjük el! Először is meg kell hoznunk néhány összetevőt reagálni. Meg fogjuk venni a kódot 1. lépés a mellékelt tollban , és konvertálja komponensekké. Kezdjük úgy, hogy megteremtjük a fő összetevőt, hogy mindent elhelyezünk. Ezt az összetevőt hívjuk Játékos .

A komponens létrehozásához a kód így néz ki:

 Legyen a játékos = reagáljon.Createclass ({
  Render: Funkció () {visszatérés (
      & lt; div osztálynév = "Player" & gt;
        & lt; ChildComponent / & gt; // ez egy gyermekkomponens, beágyazva belül.
      & lt; / div & gt;
  )}
});

Ne feledje, hogy meg kell használnia osztály név mivel osztály JavaScriptben van fenntartva. Menj át a CodePen biztosított, és átalakítani az alap HTML ott található a React alkatrészeket.

Ezután kétre több félelmetes koncepciót fogunk összpontosítani: állapot és kellékek . Még nem fogsz látni semmit, mert nem adtuk meg alkalmazásunkat.

Renderelés, állam, kellékek

Annak érdekében, hogy a reagálunk félelmet adjunk, meg kell mondanunk a szerszámnak, ahol a DOM-ban helyezkednek el. Ehhez ezt használjuk Reagrecom.render () . Megtalálja a kódot a 2. lépésben a Codepen-en.

 reageDom.render (& LT; Player / & gt;, Document.QuerySelector ('Body'));

Ha mindent helyesen tettél, látnod kell, hogy a játékos megjelenik. Következő leszünk építeni kellékek tárgy. kellékek Rövid, hogy a tulajdonságok, és ezek olyan információk, amelyeket átadnak az összetevőinek, hogy használják őket. Meg kell adnunk a játékosnak a pályára vonatkozó információkat, így most meg kell tennünk.

For this demo we've used the artwork from Odesza's 'We Were Young'. Click the image to grab the band's Summer's Gone LP for free — Ehhez a demóhoz az Odesza "Young" művészetét használtuk. Kattintson a képre, hogy megragadja a zenekar nyári elment lp ingyenes

A ti kellékek az objektum belsejében van tárolva getdefaultprops , és így kell kinéznie:

 GetDefaultprops: Funkció () {
  Visszatérés {
    vágány: {
      Név: "Fiatalok voltak",
      Artist: "Odesa",
      Album: "Nyár elment",
      Év: 2012,
      Artwork: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Időtartam: 192,
      Forrás: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Azt is meg kell teremteni a állapot objektum a dal aktuális idejének és a lejátszási / szünet állapotának tárolásához:

 getinitialstate: funkció () {
  Visszatérés {PlayStatus: 'Play', CurrentTime: 0}
}

Az alkalmazás állapota folyamatosan változik, és a állapot tárgy. Ez fontos, hogy emlékezzünk arra, hogy írásban reagáljon, mert az olyan komponensek, amelyek az adott állapotra támaszkodnak, megváltoznak, ha az állam ezt teszi. Mi teszi a reagálást olyan nagyszerűen dolgozni, hogy kiszámítja az Ön módosításait, és a DOM-ot hatékonyan frissíti, ha az oldal megváltozik. Minden szinkronban marad.

Átadási kellékek és államok

Most át fogunk menni kellékek és állapot értékek az összetevőkbe ( 3. lépés ). Mi Játékos Az összetevőnek most úgy néz ki, mint ez:

Render: Funkció () {
  visszatérés (& lt; div osztálynév = "lejátszó" & gt;
    & lt; div osztálynév = "Háttér" stílus = {{'backgroundimage': 'URL (' + this.props.track.artwork + ')'}}}}}}}}}}}
    & lt; div osztálynév = "fejléc" & gt; & lt; div osztálynév = "Cím" & gt; most játszik & lt; / div & gt; & lt; div & gt;
    & lt; div classname = "Artwork" style = {{'backgroundimage': 'URL (' + this.props.track.artwork + ')'}}}}}} & gt; & lt; / div & gt;
    & lt; trackinformation track = {this.props.track} / & gt;
    & lt; scrubber / & gt; kontrollok / & gt;
    & lt; időbélyegzés időtartam = {this.props.track.duration} CurrentTime = {this.state.currentime} / & gt;
    & lt; audio & gt; & lt; forrás src = {this.props.track.source} / & gt; & lt; / audio & gt;
    & lt; / div & gt;
)}

Ezután ezeket az értékeket a gyermekalkatrészek belsejében lehet felvenni. Például:

 var timestamps = reage.createclass ({
  Render: Funkció () {visszatérés (
    & lt; div osztálynév = "Timestamps" & gt;
      & lt; div osztálynév = "Időidő - aktuális" & gt; {this.props.currentime} & lt; / div & gt;
      & lt; div osztálynév = "Time Time - Total" & gt; {this.props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Átnéz 4. lépés a Codepen-en Annak megtekintéséhez, hogy az összes tartalom átadja és használja a gyermekösszetevők.

Időtartam számítás

Az időbélyegek most csak egyszerű számok. Meg kell konvertálnunk őket az időbélyegzőkre, mielőtt alkalmaznánk az alkalmazásunkban. Ezt a komponensünkön belüli funkciót írjuk:

 Convertime: funkció (időbélyegzés) {
    Legyen perc = matematika (időbélyegző / 60);
  Legyen másodperc = időbélyegző - (perc * 60);
    ha (másodpercek és lt; 10) {másodperc = '0' + másodperc; }
    időbélyeg = perc + ':' + másodperc;
    Visszatérő időbélyeg;
}

Ezt követően ezt használhatjuk Időbélyegek összetevő:
{this.converttime (this.props.currenttime)} .

Lejátszás és szünet

Egy funkciót fogunk kötni a kattintásra A lejátszás / szünet gomb eseménye, és adja vissza a fő komponenshez: & lt; kezeli az iSplaying = {this.state.playstatus} onclick = {this.togglePlay} / & gt; .

Váltásunk így néz ki:

 TogglePlay: Funkció () {
  Legyen állapot = ez.State.PlayStatus;
  Legyen audio = document.getElementbyid ("Audio");
  ha (állapot === "Play") {
    állapot = "szünet"; audio.play ();
  } más {
    Állapot = 'Play'; audio.pause ();
  }
  ez.enstate ({PlayStatus: Status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Be kell állítanunk a kódot, hogy az ikon átkapcsoljon egy "PLAY" és két párhuzamos vonalat, amely a "szünet"

Azt is hozzá kell adnunk néhány kódot a Kontrollok Komponens az ikonra a "Play" -re a "PAUSE" -re, és egy másik funkciót, hogy frissítse az időbélyegeket, amikor a dal játszik.

 Render: Funkció () {
  Legyen osztálynevek;
  Ha (ez.props.isplaying == "szünet") {
    osztálynevek = 'fa fa-fw fa-szünet';
  } más {
    osztálynevek = 'fa fa-fw fa-play';
  }
  Visszatérés {...}
}

Meg kell írnunk egy funkciót, hogy kezeljük az időbélyegek frissítését korábban. A legjobb, ha ezt a kódot elválasztja, abban az esetben, ha később másra szeretnénk használni.

 UpdatEtEme: funkció (időbélyegzés) {
  időbélyeg = matematika (időbélyeg);
  ez.enstate ({currentime: timestamp});
}

Write a function to convert your numbers into timestamps — Írjon egy funkciót, hogy számokat konvertáljon az időbélyegzőkké

Végül frissítenünk kell playtoggle funkció a híváshoz UpdatEtEme funkció a setinterval .

 ...
audio.play ();
Legyen _this = ez;
SETInTerval (funkció () {
  .....
  _this.updatescrubber (százalék);
  _this.updatetime (jelenlegi idő);
}, 100);
...

Haladni előre

Tehát most van egy fényes munkás zenelejátszó. Tovább is tudsz menni itt, és hozzáadhatunk funkciókat a súroláshoz a dalon keresztül e.pagex Vagy add Playlist funkciót tárolja közelgő pálya azonosítók egy tömbben, következő és előző gombokat. Ha elakad, elérje @mrjackolai - Örülök, hogy segítek! Jó szórakozást és szerencsét.

Ez a cikk eredetileg megjelent net magazin 289. kiadás; Vásárolja meg itt !

Kapcsolódó cikkek:

20 JavaScript tipp, hogy fújja az elmédet
Rendben van, hogy olyan webhelyeket építsen, amelyek a JavaScript-re támaszkodnak?
Hogyan tervezhet egy chatbot tapasztalatot

Építsen egy egyszerű zenelejátszót reagálással

Hozza létre a reagálási ui-t

Renderelés, állam, kellékek

Átadási kellékek és államok

Időtartam számítás

Lejátszás és szünet

Haladni előre

kézikönyv - Most Popular Articles

Hogyan kell használni a React Rugót az összetevők animálásához

Chiaroscuro Art: lépésenkénti útmutató

Kezdje az Express.js-t

Hozzon létre egy animált 3D szöveghatást

Dinamikus mozgást hoz létre egy kompozícióban

Hogyan illusztrálhat egy eseményt

3D szöveges bemutató grafikus tervezők számára

Kártya alapú UI létrehozása alapozással

Kategóriák