Byg en simpel musikafspiller med reagere

Sep 13, 2025

hvordan

Reagere Er et populært JavaScript-bibliotek til at opbygge brugergrænseflader, og i denne vejledning vil jeg vise dig, hvordan du bruger den til at opbygge en simpel interaktiv musikafspiller. Vi skal arbejde i CodePen, og du kan også skrive dette projekt offline inde i en reaktionsapp, da alle komponenter kan porteres til en repo temmelig let.

Vi skal udforske rekvisitter Vi stat og hvordan komponenter arbejder sammen og kommunikerer med hinanden inde i reaktionsøkosystemet. Vi bruger også Font Awesome. , så sørg for at det er inkluderet i dit CodePen CSS-panel.

For at få dig op og køre med reagere meget hurtigt, har jeg sat sammen En samling til dig på CodePen , og split det i etaper, så du kan hoppe ind på et hvilket som helst tidspunkt, gaffel skridtet og gå frem derfra. Jeg har også skrevet CSS for dig, så du kan bare fokusere på reagere, og hvordan det hele arbejder.

Opret reageren UI

Lad os komme igang! For det første skal vi skabe nogle komponenter i reagere. Vi skal tage koden fra Trin 1 i den medfølgende pen , og konverter det til komponenter. Lad os begynde med at oprette hovedkomponenten, at vi sætter alt andet inde. Vi ringer til denne komponent Spiller .

Koden til at oprette en komponent ser sådan ud:

 Lad afspilleren = reagere .createClass ({
  Render: Funktion () {Return (
      & lt; div classname = "Player" & GT;
        & lt; barnekomponent / & gt; // Dette er en børne komponent, indlejret inde.
      & lt; / div & gt;
  )}
});

Bemærk at du skal bruge Classname. fordi klasse er reserveret i JavaScript. Gå gennem kodepenet, der leveres og konverter den grundlæggende HTML, du finder der i reagekomponenter.

Derefter vil vi fokusere på to flere fantastiske begreber i reagerer: stat og rekvisitter . Du vil ikke se noget endnu, fordi vi ikke har gjort vores app.

Gengivelse, stat, rekvisitter

For at gøre vores reagere awesomeness, skal vi fortælle værktøjet, hvor de skal placere sig i DOM. For at gøre dette bruger vi Reactom.Render () . Du finder koden til dette i trin 2 på CodePen.

 Reactom.Render (& lt; Player / & GT;, Document.QuerySleor ('Body'));

Hvis du har gjort alt korrekt, skal du se, at afspilleren vises. Herefter skal vi bygge vores rekvisitter objekt. rekvisitter er kort for ejendomme, og det er de stykker af oplysninger, du passerer til dine komponenter for at bruge. Vi skal give spilleren nogle oplysninger til sporet, så vi gør det nu.

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 — For denne demo har vi brugt kunstværket fra odesza's 'vi var unge'. Klik på billedet for at få fat i bandets sommers væk LP GRATIS

Jeres rekvisitter objektet er opbevaret indeni GetDefaultprops. , og skal se sådan ud:

 GetDefaultprops: Funktion () {
  Vend tilbage {
    Spor: {
      Navn: "Vi var unge",
      Kunstner: "odesza",
      Album: "Summer's Gone",
      År: 2012,
      Kunstværk: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Varighed: 192,
      Kilde: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Vi skal også oprette en stat Objekt for at gemme den aktuelle tid for sangen og afspilning / pause tilstand:

 GetinitialState: Funktion () {
  Returner {PlayStatus: 'Play', Currenttime: 0}
}

Din apps stat ændrer sig konstant, og lagres i stat objekt. Dette er vigtigt at huske, når du skriver reagerer, fordi de komponenter, der stoler på den pågældende stat, ændres, hvis staten gør det. Hvad der gøres så godt at arbejde med, er, at det beregner ændringerne for dig og opdaterer DOM effektivt, når siden ændres. Alt forbliver i synkronisering.

Passerer rekvisitter og stat

Nu skal vi passere rekvisitter og stat værdier i vores komponenter ( Trin 3. ). Vores Spiller Komponenten skal nu se sådan ud:

Render: Funktion () {
  Return (& lt; div classname = "player" & gt;
    & lt; div classname = "Baggrund" stil = {{'BackgroundImage': 'URL (' + this.props.Track.artwork + ')'}} & GT; & lt; / div & gt;
    & lt; div classname = "header" & gt; & lt; div classname = "titel" & gt; nu afspilning & lt; / div & gt; / div & gt;
    & lt; div classname = "kunstværk" stil = {{{'backgroundbillede "URL (' + this.props.track.artwork + ')'}} & gt; / div & gt;
    & lt; trackinformation track = {this.props.track} / & gt;
    & lt; scrubber / & gt; lt; kontrol / & gt;
    & lt; timestamps duration = {this.props.track.duration} currenttime = {this.state.currenttime} / & gt;
    & lt; Audio & GT; Kilde SRC = {This.props.Track.Source} / & GT; / Lyd & GT;
    & lt; / div & gt;
)}

Vi kan derefter vælge disse værdier op i vores børne komponenter. For eksempel:

 Var Timestamps = React.createClass ({
  Render: Funktion () {Return (
    & lt; div classname = "Timestamps" & gt;
      & lt; div classname = "tidstid - nuværende" & gt; {this.props.currenttime} & lt; / div & gt;
      & lt; div classname = "Time Time - Total" & GT; {This.Props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Se igennem Trin 4 på CodePen For at se, hvordan alle rekvisitterne sendes ned og bruges i børnebestanddelene.

Varighedsberegning

Timestamps lige nu er bare almindelige tal. Vi skal konvertere dem til tidsstempler, før de kan bruges i vores app. Vi vil gøre dette ved at skrive en funktion inde i vores komponent:

 Konvertertid: Funktion (Timestamp) {
    lad minutter = matemath.floor (timestamp / 60);
  Lad sekunder = tidsstempel - (minutter * 60);
    hvis (sekunder og lt; 10) {sekunder = '0' + sekunder; }
    Timestamp = minutter + ':' + sekunder;
    returnere tidsstempel;
}

Vi kan så bruge dette i vores Timestamps. komponent:
{this.converttime (this.props.currenttime)} .

Spil og pause

Vi skal binde en funktion til onclick. Begivenhed af Play / Pause-knappen og videregiver den tilbage til hovedkomponenten: & lt; kontroller ISPlaying = {this.state.playstatus} onclick = {this.toggleplay} / & gt; .

Vores skifte ser sådan ud:

 TOGGLEPLAY: FUNKTION () {
  Lad status = this.state.playstatus;
  Lad Audio = Document.GetelementById ('Audio');
  hvis (status === 'play') {
    Status = 'Pause'; audio.play ();
  } ellers {
    status = 'Play'; audio.pause ();
  }
  dette.setstate ({PlayStatus: Status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Vi skal justere koden, så ikonet skifter fra en pil, der repræsenterer 'Play' og to parallelle linjer, der repræsenterer 'Pause'

Vi skal også tilføje nogle kode inde i Render-funktionen af Kontrol Komponent til at skifte ikonet fra 'Play' til 'Pause', og en anden funktion til at opdatere tidsstemplerne, når sangen afspilles.

 Render: Funktion () {
  lad klassnavne;
  hvis (this.props.isplaying == 'pause') {
    ClassNames = 'FA FA-FW FA-PAUSE';
  } ellers {
    ClassNames = 'FA FA-FW FA-PLAY';
  }
  Vend tilbage {...}
}

Vi skal skrive en funktion til at håndtere opdateringen af vores tidsstempler fra før. Det er bedst at holde denne kode adskilt, hvis vi vil bruge det til noget andet senere.

 UPDATETIME: FUNKTION (TIMESTAMP) {
  Timestamp = Math.floor (Timestamp);
  dette.setstate ({currenttime: timestamp});
}

Write a function to convert your numbers into timestamps — Skriv en funktion til at konvertere dine numre til tidsstempler

Endelig skal vi opdatere vores Playtoggle. funktion til at ringe til UPDATETIME. funktion på A. setinterval. .

 ...
audio.play ();
lad _this = dette;
setinterval (funktion () {
  .....
  _this.updatescrubber (procent);
  _THIS.UPDATETIME (CERTTIME);
}, 100);
...

Bevæger sig fremad

Så nu skal du have en skinnende arbejdsmusikafspiller. Du kunne gå videre her og tilføje funktioner til skrubning gennem sangen med e.pagex. , eller tilføj afspilningslistefunktionalitet ved at gemme kommende spor-id'er i et array, næste og forrige knapper. Hvis du sidder fast, nå ud til @mrjackolai. - Jeg vil være glad for at hjælpe! Hav det sjovt og held og lykke.

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 289; Køb det her !

Relaterede artikler:

20 JavaScript tips til at blæse dit sind
Er det okay at bygge websteder, der stole på JavaScript?
Sådan designer du en chatbot oplevelse

Byg en simpel musikafspiller med reagere

Opret reageren UI

Gengivelse, stat, rekvisitter

Passerer rekvisitter og stat

Varighedsberegning

Spil og pause

Bevæger sig fremad

hvordan - Mest populære artikler

Sådan gør du realistiske gennemsigtige overflader

Affinity Designer: Sådan bruger du grids

Sådan tegner du en næse

8 Essential WordPress Security Secrets

Sådan opbygges hurtigere websteder

Sådan tilføjes video til interaktive PDF-filer

Sådan kommer du i gang med oliemaleri

Top tips til at forfine dine hånddragte illustrationsteknikker

Kategorier