vybudovat jednoduchý hudební přehrávač s reakcí

Feb 2, 2026

jak

Reagovat Je populární JavaScript knihovna pro budování uživatelských rozhraní, a v tomto tutoriálu vám ukážu, jak jej použít k vytvoření jednoduchého interaktivního hudebního přehrávače. Budeme pracovat v Codepen a můžete také napsat tento projekt offline uvnitř reakcí aplikace, protože všechny komponenty mohou být přeneseny do repo docela snadno.

Budeme prozkoumat props. , Stát a jak komponenty pracují společně a komunikují mezi sebou uvnitř reagujícího ekosystému. Také používáme Písmo úžasné , Tak se ujistěte, že je uvedeno do panelu Codepen CSS.

Abych vás dostal nahoru a běží s reakcí velmi rychle, dali jsem dohromady Kolekce pro vás na Codepen a rozdělte ji do fází, abyste mohli skočit v libovolném bodě, viděl krok a jít dopředu odtud. Také jsem napsal CSS pro vás, takže se můžete zaměřit na reakci a jak to všechno funguje.

Vytvořit reakcí ui

Začněme! Za prvé, musíme vytvořit některé komponenty v reakci. Vezmeme kód Krok 1 v doprovodném peru a převést na komponenty. Začněme vytvořením hlavní složky, kterou budeme dát všechno ostatní uvnitř. Zavoláme tuto komponentu Hráč .

Kód vytvořit komponentu vypadá takto:

 Nechte přehrávač = reagovat.CreateClass ({
  Vykreslení: funkce () {návrat (
      & lt, div classname = "hráč" & gt;
        & lt; dětský dominantní / gt; // Jedná se o dětskou složku, vnořený uvnitř.
      & lt; / div & gt;
  )}
});

Všimněte si, že musíte použít jméno třídy protože třída je vyhrazen v JavaScriptu. Projděte kódem Codepen a převést základní HTML naleznete v reakci komponent.

Dále se zaměříme na dva další úžasné koncepty v reakci: Stát a props. . Ještě neuvidíte nic, protože jsme nedostali naši aplikaci.

Vykreslování, stát, rekvizity

Za účelem vykreslení našeho reakce respektu, musíme to říct nástroj, kde se nachází v domu. Chcete-li to udělat Reactom.Render () . Kód naleznete v kroku 2 na Codepen.

 reagr.Render (

Pokud jste udělali všechno správně, měli byste zobrazit přehrávač. Dále budeme stavět naše props. objekt. props. je krátká pro vlastnosti, a to jsou informace, které projdete na komponenty pro jejich použití. Musíme dát hráči nějaké informace pro trať, takže to uděláme teď.

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 — Pro tento demo jsme použili umělecká díla z Odeszy 'My Byla mladá'. Klikněte na obrázek, který chytíte letní pásmo pryč LP zdarma

Váš props. objekt je uložen uvnitř GetDefaultPops. a měl by vypadat takto:

 GetDefaultPops: Funkce () {
  vrátit se {
    dráha: {
      Jméno: "Byli jsme mladí",
      Umělec: "Odesza",
      Album: "Léto je pryč",
      Rok: 2012,
      Umělecká díla: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Doba trvání: 192,
      Zdroj: "https://s3-us-west-2.amazonyaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Musíme také vytvořit Stát Objekt pro uložení aktuálního času skladby a stavu přehrávání / pozastavení:

 GetInitialState: Funkce () {
  Return {PlayStatus: 'Play', Aktuální čas: 0}
}

Stav vaší aplikace se neustále mění a je uložen v Stát objekt. To je důležité pamatovat, když píšete reagovat, protože komponenty, které se spoléhají na tento stav jako vlastnost, se změní, pokud stav dělá. Co dělá reagovat tak skvělé pracovat s tím, že to vypočítá změny pro vás a aktualizuje dobře, když se změní stránka. Všechno zůstane v synchronizaci.

Předávání rekvizit a státu

Teď půjdeme props. a Stát hodnoty do našich součástí ( Krok 3. ). Náš Hráč Složka by měla vypadat takto:

Vykreslení: Funkce () {
  návrat (

Můžeme tyto hodnoty vybrat uvnitř našich dětských komponent. Například:

 var timeStamps = reagovat.CreateClass ({
  Vykreslení: funkce () {návrat (
    & lt, div classname = "časová značky" & gt;
      & lt, Div classname = "čas - proud" & gt; {this.props.Currenttime} & lt; / div & gt;
      & lt, Div Classname = "Časová doba - celkem" & gt; {This.props.dation} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Prohlédnout si Krok 4 na Codepen Chcete-li zjistit, jak jsou všechny rekvizity předávány a používány v dětských komponentách.

Výpočet trvání

Časová razítka právě teď jsou prostě prostá čísla. Musíme je převést na časové razítko dříve, než mohou být použity v naší aplikaci. Uděláme to napsáním funkce uvnitř naší složky:

 převod: funkce (časová značka) {
    Nechte minutu = math.floor (timestamp / 60);
  Nechte sekundy = časová značka - (minuty * 60);
    pokud (sekundy <10) {sekundy = '0' + sekundy; }
    časová značka = minuty + ':' + sekundy;
    vrátit časová rada;
}

Můžeme to použít v našem Časová razítka komponent:
{this.Converttime (this.props.Currenttime)} .

Hrát a pauza

Budeme svázat funkci při kliknutí Událost tlačítka PLAY / PAUSE a předat zpět do hlavní komponenty: & lt; ovládání Isplaying = {This.State.PlayStatus} onclick = {This.toggleplay} / & gt; .

Náš přepínač vypadá takto:

 Toggleplay: Funkce () {
  Let Status = to.state.PlayStatus;
  LET AUDIO = Document.GetElementbyid ('Audio');
  Pokud (stav === 'Play') {
    Status = 'pauza'; audio.play ();
  } else {
    Status = 'Play'; audio.pause ();
  }
  Tento.Setstate ({playstatus: stav});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Musíme upravit kód tak, aby ikona přepínala od šipky reprezentující "Play" a dvě paralelní linky představující "pauza"

Musíme také přidat nějaký kód uvnitř renderové funkce Řízení Komponenta pro přepínání ikony z 'Play' na 'Pauza' a další funkce aktualizovat časové razítko, když přehrávání skladby.

 Render: Funkce () {
  Nechte klassnames;
  Pokud (this.props.isplaying == 'pauza') {
    CLASSNAMES = 'FA FA-FW FA-PAUSE';
  } else {
    CLASSNAMES = 'FA FA-FW FA-PLAY';
  }
  vrátit se {...}
}

Musíme napsat funkci pro zpracování aktualizace našich časových razítek předtím. To je nejlepší udržet tento kód oddělit, v případě, že to chceme použít pro něco jiného.

 UpdateTime: Funkce (časová značka) {
  timestamp = math.proor (časová značka);
  Tento.Setstate ({proud) ({currectime: timestamp});
}

Write a function to convert your numbers into timestamps — Napište funkci převést čísla do časových razítek

Konečně musíme aktualizovat naše playtoggle. funkce volání UpdateTime. funkce na A. SetInterval. .

 ...
audio.play ();
Nechť _this = to;
setInterval (funkce () {
  .....
  _this.UpdatesCromber (procento);
  _this.UpdateTime (Aktuální čas);
}, 100);
...

Pohyb vpřed

Takže teď byste měli mít lesklý pracovní hudební přehrávač. Můžete jít dále zde a přidat funkce pro skryté písně E.Pagex. Nebo přidejte funkčnost playlistu uložením nadcházejících ID tracků v poli, další a předchozích tlačítek. Pokud se uvíznete, oslovte @Mrjackolai. - Budu rád, abych pomohl! Bavte se a hodně štěstí.

Tento článek se původně objevil Čistý časopis Vydání 289; koupit to tady Dokázal se!

Související články:

20 JavaScript tipy pro vyhodit svou mysl
Je v pořádku stavět stránky, které se spoléhají na JavaScript?
Jak navrhnout chatbot zkušenosti

vybudovat jednoduchý hudební přehrávač s reakcí

Vytvořit reakcí ui

Vykreslování, stát, rekvizity

Předávání rekvizit a státu

Výpočet trvání

Hrát a pauza

Pohyb vpřed

jak - Nejoblíbenější články

Použijte Adobe XD pro vytvoření mikro interakcí

Jak vytvořit Alexa Skill pro vaše stránky

Jak poskytnout realistické průhledné povrchy

Afinitní návrhář: Jak používat export Persona

Master procesní modelování

Jak simulovat výbuchy v Maya

Barva portrét v oleji

Zrychlení 3D modelování

Kategorie