Construiți un simplu player muzical cu reacția

Sep 16, 2025

să

Reacţiona Este o bibliotecă populară JavaScript pentru construirea interfețelor utilizatorilor, iar în acest tutorial vă voi arăta cum să îl utilizați pentru a construi un simplu player muzical interactiv. Vom lucra în CodePen și ați putea scrie și acest proiect offline în interiorul unei aplicații reacționate, deoarece toate componentele pot fi portate la un repo destul de ușor.

Vom explora recuzită , stat și modul în care componentele lucrează împreună și comunică unul cu celălalt în interiorul ecosistemului reacționat. De asemenea, folosim Font Awesome. , asigurați-vă că este inclus în interiorul panoului CSS CDSPEN.

Pentru a vă duce și a alerga cu reacția foarte repede, am pus împreună O colecție pentru dvs. pe codePen , și împărțiți-o în etape, astfel încât să puteți sări în orice punct, furculiță pasul și mergeți mai departe de acolo. De asemenea, am scris CSS pentru dvs., astfel încât să vă puteți concentra doar pe reacție și cum funcționează totul.

Creați React UI

Să începem! În primul rând, trebuie să creăm câteva componente în reacție. Vom lua codul de la Pasul 1 în stiloul însoțitor , și transformați-o în componente. Să începem prin crearea componentei principale pe care o vom pune în interior. Vom numi această componentă Jucător .

Codul pentru a crea o componentă arată astfel:

 Lăsați jucătorul = reaction.createclass ({{
  Render: Funcție () {return (
      & Lt; div CLASSNAME = "Player" & GT;
        & lt; ChildComponent / & Gt; // Aceasta este o componentă a copilului, imbricată în interior.
      & lt; / div & gt;
  )}
});

Rețineți că trebuie să utilizați numele clasei deoarece clasă este rezervat în JavaScript. Treceți prin codePenul furnizat și transformați HTML de bază pe care îl găsiți acolo în componente reacționate.

Apoi ne vom concentra pe două concepte mai minunate în reacție: stat și recuzită . Nu veți mai vedea nimic, pentru că nu ne-am făcut aplicația noastră.

Rendering, stat, recuzită

Pentru a face acest lucru react, trebuie să spunem instrumentul în care să se localizeze în DOM. Pentru a face acest lucru pe care îl folosim Reactdom.Render () . Veți găsi codul pentru aceasta în pasul 2 de la CodePen.

 Reactdom.Render (& Lt; Jucător / & GT; document.querySelector ("corp"));

Dacă ați făcut totul corect, ar trebui să vedeți că jucătorul apare. Apoi o să ne construim recuzită obiect. recuzită este scurt pentru proprietăți, iar acestea sunt bucăți de informații pe care le transmiteți componentele dvs. pentru a le utiliza. Trebuie să oferim jucătorului câteva informații pentru pistă, așa că vom face asta acum.

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 — Pentru acest demo am folosit lucrarea de artă de la Odezza "am fost tineri". Faceți clic pe imagine pentru a apuca LP-ul de vară al trupei

Ta recuzită Obiectul este stocat în interior GetDefultprops. , și ar trebui să arate astfel:

 GetDefaultprops: Funcție () {
  întoarcere {
    Urmăriți: {
      Denumire: "Am fost tineri",
      Artist: "Odesza",
      Album: "Summer a dispărut",
      An: 2012,
      Lucruri de arta: "https://funkadelphia.files.wordpress.com/2012/09/odezza-summers-gone-lp.jpg",
      Durata: 192,
      Sursa: "https://s3-us-est-2.amazonaws.com/s.cdpn.io/557257/wwwy.mp3"
  }}
}

De asemenea, trebuie să creăm a stat Obiect pentru a stoca ora curentă a piesei și a statului de redare / pauză:

 GetInitialState: Funcție () {
  Return {playStatus: "Play", DringTime: 0}
}

Starea aplicației dvs. se schimbă în mod constant și este stocată în stat obiect. Acest lucru este important să vă amintiți când scrieți reacționați, deoarece componentele care se bazează pe acel stat ca o proprietate se vor schimba dacă statul face. Ceea ce face reacția atât de mare pentru a lucra este că calculează modificările pentru dvs. și actualizează DOM eficient atunci când pagina se schimbă. Totul rămâne în sincronizare.

Trecerea de recuzită și de stat

Acum vom trece recuzită și stat valori în componentele noastre ( Pasul 3 ). Al nostru Jucător Componenta ar trebui să arate acum:

Render: Funcție () {
  Return (& lt; div clasaname = "player" & gt;
    & gt;
    & Lt; Div CLASSNAME = "Header" & GT; Div; Div CLASSNAME = "Titlu" & GT; acum Playing & lt; / div & gt;
    & gt;
    & lt; trackinformation track = {the.props.track} / & gt;
    "controale / gt; controale / și gt;
    & Lt; TimestaMps Duration = {the.props.track.duration} CurrentTime = {this.State.CurrentTime} / & GT;
    "Audio & gt; Source Src = {thea.props.track.source} / & gt; / lt; / audio & gt;
    & lt; / div & gt;
)}

Apoi, putem alege aceste valori în interiorul componentelor copilului nostru. De exemplu:

 VAR TIMSTAMPS = REACT.CREATECLASS ({
  Render: Funcție () {return (
    & lt; div clasaname = "Timestamps" & GT;
      & lt; div clasaName = "Timpul de timp - curent" & {the.props.currenttime} & lt; / div & gt;
      & lt; div CLASSNAME = "Timpul de timp - total" & {the.props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

A se uita prin Pasul 4 La CodePen Pentru a vedea cum sunt transmise toate recuzile și utilizate în componentele copilului.

Calculul duratei

Timanele sunt acum doar numere simple. Trebuie să le convertim în TimestaMPS înainte de a putea fi folosite în aplicația noastră. Vom face acest lucru scriind o funcție în interiorul componentei noastre:

 ConvertTime: Funcție (Timestamp) {
    Lăsați minutele = Math.Floor (Timestamp / 60);
  Lăsați secundele = Timestamp - (minute * 60);
    dacă (secunde <10) {secunde = '0' + secunde; }
    Timestamp = minute + ':' + secunde;
    returnați marcajul de timp;
}

Putem folosi acest lucru în noi Timestamps. Componenta:
{this.converttime (this.props.currenttime)} .

Joacă și pauză

Vom lega o funcție la onclick. Eveniment de buton de redare / pauză și treceți-l înapoi la componenta principală: & lt; comentează isplaying = {the.State.playstatus} onclick = {the.toggleplay} / & gt; .

Comutarea noastră arată astfel:

 Toggleplay: Funcție () {
  Fie starea = the.State.playstatus;
  lăsați audio = document.getelementbyid ("audio");
  dacă (stare === "PLAY ') {
    stare = "pauză"; audio.play ();
  } altfel {
    stare = "redare"; audio.pause ();
  }
  Acest.setState ({PlayStatus: Status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Trebuie să reglați codul astfel încât pictograma să comute dintr-o săgeată care reprezintă "Play" și două linii paralele reprezentând "pauză"

De asemenea, trebuie să adăugăm un cod în interiorul funcției de redare a Controale Componentă pentru a comuta pictograma de la "PLAY" la "Pauză" și o altă funcție pentru a actualiza marcajele de timp când cântecul redă.

 Render: Funcție () {
  Lăsați nume de clasa;
  dacă (the.props.isplaying == "pauză") {
    CLASSNAMES = 'FA-FW FA-PAUSE ";
  } altfel {
    CLASSNAMES = 'FA-FW FA-PLAY';
  }
  întoarcere {...}
}

Trebuie să scriem o funcție pentru a face față actualizării timbilor noștri de la înainte. Cel mai bine este să păstrați acest cod separat, în cazul în care vrem să-l folosim pentru altceva mai târziu.

 Updatetime: Funcție (Timestamp) {
  Timestamp = Math.Floor (Timestamp);
  Acest.setState ({curent: Timestamp});
}

Write a function to convert your numbers into timestamps — Scrieți o funcție pentru a vă converti numerele în TimestaMPS

În cele din urmă, trebuie să ne actualizăm Playtoggle. funcția de a apela Timpul de actualizare Funcția pe A. SetInterval. .

 ...
audio.play ();
Fie _this = asta;
SetInterval (funcția () {
  .....
  _this.Updatescrubber (procente);
  _this.UpdateTime (curent);
}, 100);
...

Inainta

Deci, acum ar trebui să aveți un jucător muzical de lucru strălucitor. Puteți merge mai departe aici și adăugați funcții pentru spălarea prin cântec cu e.pagex. , sau adăugați funcționalități de redare prin stocarea ID-urilor de urmărire viitoare într-o matrice, butoanele următoare și anterioare. Dacă vă blocați, ajungeți la @mrjackolai. - Voi fi fericit să vă ajut! Distreaza-te si noroc.

Acest articol a apărut inițial în revista netă Ediția 289; Cumpărați-l aici Fotografiile!

Articole similare:

20 sfaturi javascript pentru a sufla mintea ta
Este bine să construiți site-uri care se bazează pe JavaScript?
Cum de a proiecta o experiență chatbot

Construiți un simplu player muzical cu reacția

Creați React UI

Rendering, stat, recuzită

Trecerea de recuzită și de stat

Calculul duratei

Joacă și pauză

Inainta

să - Cele mai populare articole

Pureref: Cum se utilizează instrumentul de referință al imaginii

Cum să kitbash pe Go cu ShapR3D

8 Tutoriale uimitoare de design grafice

Cum să schițezi rapid mâinile

Începeți cu rugina

Cum să prototipe o aplicație mobilă cu studio de origami

Secretele de îndeplinire a unui design creativ

Creați un caracter 3D blana de la zero

Categorii