Zbuduj prosty odtwarzacz muzyczny z reakcją

Feb 4, 2026

Jak

Reagować Jest popularną biblioteką JavaScript dla interfejsów użytkownika budynku, aw tym samouczku pokażę Ci, jak go używać, aby zbudować prosty interaktywny odtwarzacz muzyczny. Będziemy pracować w Codepen, a można również napisać ten projekt offline w aplikacji reagującej, ponieważ wszystkie komponenty można łatwo przeniesione do repo.

Będziemy zbadać rekwizyty , stan i jak komponenty pracują razem i komunikują się ze sobą w ekosystemie reagowania. Używamy również Czcionka niesamowita , więc upewnij się, że jest zawarty w panelu CODEPEN CSS.

Dostać cię bardzo szybko i biegać z reagowaniem, zestawiłem Kolekcja dla Ciebie na Codepen i podziel go na etapy, dzięki czemu możesz wskoczyć w dowolnym momencie, widać krok i iść naprzód. Napisałem również dla ciebie CSS, więc możesz skupić się na reagowaniu, a jak to wszystko działa.

Utwórz reaguj ui

Zacznijmy! Po pierwsze, musimy stworzyć pewne komponenty w reakcji. Podejmiemy kod Krok 1 W towarzyszym piórze i konwertuj go na komponenty. Zacznijmy od tworzenia głównego komponentu, który umieścimy wszystko w środku. Zadzwonisz do tego komponentu Gracz .

Kod, aby utworzyć komponent wygląda tak:

 Niech gracz = reaguj.CreateClass ({{
  Render: Funkcja () {RETURN (
      & lt; div classname = "gracz" & gt;
        & lt; childComponent / & gt; // Jest to komponent dziecka, zagnieżdżony w środku.
      & lt; / div & gt;
  )}
});

Zauważ, że musisz użyć Nazwa klasy dlatego klasa jest zarezerwowany w JavaScript. Przejdź przez podany kodeksu i przekonwertować podstawowy HTML, który znajdziesz tam w reagować elementy.

Następnie skupimy się na dwóch bardziej niesamowitej koncepcjach w reakcji: stan i rekwizyty . Jeszcze nic nie zobaczysz, ponieważ nie zrealizowaliśmy naszej aplikacji.

Renderowanie, stan, rekwizyty

Aby uczynić naszą reagującą niesamowitą, musimy powiedzieć narzędzie, gdzie umieścić się w domu. Aby to zrobić, używamy Reakcja.Render () . Znajdziesz kod dla tego w kroku 2 na Codepen.

 Reactdom.Render (& LT; Player / & GT) Document.QuerySelector ("Ciało"));

Jeśli zrobiłeś wszystko poprawnie, powinieneś zobaczyć, że gracz pojawia się. Następnie zbudujemy nasze rekwizyty obiekt. rekwizyty jest krótki dla właściwości, a te są informacjami, które przechodzisz do swoich komponentów do użycia. Musimy dać graczowi pewne informacje na torze, więc teraz to zrobimy.

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 — W tym demo wykorzystaliśmy grafikę od Odesszy "Byliśmy młodzi". Kliknij obraz, aby chwycić letnie pas zespołu, za darmo

Twój rekwizyty Obiekt jest przechowywany w środku GetDefaultProps. i powinien wyglądać tak:

 GetDefaultProps: Funkcja () {
  powrót {
    tor: {
      Nazwa: "Byliśmy młodzi",
      Artysta: "Odessza",
      Album: "Summer's Goed",
      Rok: 2012,
      grafika: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Czas trwania: 192,
      Źródło: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/svy.mp3"
  }}
}

Musimy także stworzyć stan Obiekt do przechowywania aktualnego czasu utworu i stanu PLAY / PAUSE:

 GetinitiTialState: Funkcja () {
  RETURN {PlayStatus: "Play", BrantTime: 0}
}

Stan aplikacji zmienia się stale i jest przechowywany w stan obiekt. Ważne jest, aby pamiętać, kiedy pisanie reagujesz, ponieważ składniki, które opierają się na tym stanie jako nieruchomość, zmieni się, jeśli stan ma. Co sprawia, że reaguje tak wspaniale, aby pracować, jest to, że oblicza zmiany dla Ciebie i aktualizuje sprawnie, gdy zmienia się strona. Wszystko pozostaje w synchronizacji.

Przechodząc rekwizyty i stan

Teraz przejdziemy rekwizyty i stan Wartości do naszych komponentów ( Krok 3 ). Nasz Gracz Komponent powinien teraz wyglądać:

Render: Funkcja () {
  powrót (& lt; div classname = "gracz" & gt;
    & lt; div classname = "tło" style = {{'backgroundimage': 'URL (' + this.props.track.artwork + ')'}}} & GT;
    & LT; Div ClassName = "Header" & GT; & LT; Div ClassName = "Tytuł" & GT; Teraz odtwarzanie i LT; / Div & GT;
    & lt; Div ClassName = "Artwork" Style = {{'BackgroundImage': 'URL (' + this.props.track.artwork + ')'}}} & GT;
    & lt; trackinformation track = {this.props.track} / & gt;
    & lt; scrubber / & gt; controls / & gt;
    & lt; czas trwania trwania = {this.props.track.duration} Crantime = {ten.state.Currenttime} / &
    Źródło audio / GT; Źródło src = {ta.props.track.source} / & gt; & LT; / audio & GT;
    & lt; / div & gt;
)}

Możemy następnie wybrać te wartości w naszym składniku dziecka. Na przykład:

 VAR Dimestamps = React.CreateClass ({
  Render: Funkcja () {RETURN (
    & lt; div className = "znaczniki czasu" & gt;
      & lt; div classname = "czasowy czas - prąd" & gt; {to.props.Currenttime} & LT; / Div & GT;
      & LT; Div ClassName = "Czas czasu - całkowita" & GT; {ta.props.duration} & LT; / Div & GT;
    & lt; / div & gt;
  )}
});

Spojrzeć przez Krok 4 na Codepen Aby zobaczyć, jak wszystkie rekwizyty są przekazywane i używane w elementach dzieci.

Obliczanie czasu trwania

Teraz znaczniki czasu są tylko zwykłe numery. Musimy konwertować je na znaczniki czasu, zanim będą mogły być używane w naszej aplikacji. Zrobimy to, pisząc funkcję w naszym komponencie:

 Convertime: Funkcja (Timestamp) {
    Niech minut = math.floor (timestamp / 60);
  Pozwól sekundom = znacznik czasu - (minuty * 60);
    Jeśli (sekundy & lt; 10) {Seconds = '0' + sekund; }
    Timestamp = minuty + ':' + sekund;
    zwrot czasu;
}

Możemy wtedy użyć tego w naszym Znaczniki czasu składnik:
{ta.convertTime (to.props.Currenttime)} .

Grać i pauza.

Będziemy wiązać funkcję na kliknięcie Zdarzenie przycisku Play / Pause i przekazuj go do głównego składnika: & LT; Controls ISPlaying = {ten.state.playstatus} onclick = {ta.toggleplay} / & gt; .

Nasz przełącznik wygląda tak:

 Toggleplay: Funkcja () {
  pozwól status = ten.state.playstatus;
  Niech audio = dokument.getElementbyd ("audio");
  Jeśli (status === 'play') {
    Status = "Pauza"; audio.Play ();
  } else {
    status = "gra"; audio.Pause ();
  }
  to.setstate ({playStatus: status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Musimy dostosować kod, aby ikona przełącza się ze strzałki reprezentującej "Play" i dwie równoległe linie reprezentujące "Pauza"

Musimy również dodać jakiś kod wewnątrz funkcji renderowania Sterownica Komponent Aby przełączyć ikonę z "Play" do "Pause", a inna funkcja, aby zaktualizować znaczniki czasu, gdy odtwarzanie utworu.

 Render: Funkcja () {
  pozwól nazwisku;
  if (this.props.isplaying == 'pauza') {
    Classnames = 'Fa Fa-FW Fa-Pauza';
  } else {
    Klassnames = 'Fa Fa-FW FA-Play';
  }
  powrót {...}
}

Musimy napisać funkcję, aby obsługiwać aktualizację naszych znaczników czasu od wcześniej. Najlepiej zachować ten kod osobno, w przypadku, gdy chcemy go używać do czegoś innego później.

 UpdateTime: Funkcja (Timestamp) {
  timestamp = math.floor (timestamp);
  to.setstate ({cranttime: timestamp});
}

Write a function to convert your numbers into timestamps — Napisz funkcję, aby przekonwertować swoje numery do znaczników znaczników

Wreszcie musimy zaktualizować nasze Playtoggle. funkcja zadzwonienia czas aktualizacji Funkcja na A. setinterval. .

 ...
audio.Play ();
Niech _to = to;
SetInterval (Funkcja () {
  .....
  _this.Updescrubber (procent);
  _this.updateTime (cranttime);
}, 100);
...

Poruszanie się do przodu

Więc teraz powinieneś mieć błyszczący odtwarzacz roboczy. Możesz iść dalej tutaj i dodać funkcje do szorowania przez piosenkę E.Pagex. lub dodaj funkcjonalność listy odtwarzania, przechowując nadchodzące identyfikatory ścieżki w tablicy, następnych i poprzednich przyciskach. Jeśli utkniesz, dotrzesz do @mrjackoi. - Z przyjemnością pomożem! Baw się dobrze i powodzenia.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 289; Kupuj tutaj !

Powiązane artykuły:

20 Wskazówki JavaScript, aby wysadzić twój umysł
Czy można budować witryny, które polegają na JavaScript?
Jak zaprojektować doświadczenie chatbot

Zbuduj prosty odtwarzacz muzyczny z reakcją

Utwórz reaguj ui

Renderowanie, stan, rekwizyty

Przechodząc rekwizyty i stan

Obliczanie czasu trwania

Grać i pauza.

Poruszanie się do przodu

Jak - Najpopularniejsze artykuły

Jak storyboard w Photoshopie

Jak używać szkicu Grawitacji

Przeglądaj wizualizację danych z p5.js

Zacznij od Adobe Dimension CC

Rzeźba realistyczna anatomia w Zbrush

Jak zrobić ogromne eksplozje z V-Ray

Pan młody nieodparcie futrzanego stworzenia

Utwórz mieszane farby z InDesign

Kategorie