Bygg en enkel musikkspiller med reagere

Sep 12, 2025

hvordan

[1. 3]

Reagere er et populært JavaScript-bibliotek for å bygge brukergrensesnitt, og i denne opplæringen skal jeg vise deg hvordan du bruker den til å bygge en enkel interaktiv musikkspiller. Vi skal jobbe i Codepen, og du kan også skrive dette prosjektet offline i en reakt-app, siden alle komponentene kan portet til en repo ganske enkelt.

Vi skal utforske Rekvisitter , stat Og hvordan komponenter fungerer sammen og kommuniserer med hverandre i reaktøkosystemet. Vi bruker også FONT AWESOME , så sørg for at det er inkludert i Codepen CSS-panelet.

Å få deg opp og løpe med reagere veldig raskt, jeg har satt sammen En samling for deg på Codepen , og del den inn i etapper, slik at du kan hoppe inn på et hvilket som helst tidspunkt, gaffel på trinnet og gå videre derfra. Jeg har også skrevet CSS for deg, slik at du bare kan fokusere på reagere, og hvordan det virker.

Skape reagens nytt

La oss komme i gang! Først må vi lage noen komponenter i reagere. Vi skal ta koden fra Trinn 1 i den medfølgende pennen , og konverter den til komponenter. La oss begynne med å lage hovedkomponenten som vi legger alt annet inni. Vi kaller denne komponenten Spiller .

Koden for å lage en komponent ser slik ut:

 La Player = React.CreateClass ({
  Render: Funksjon () {Return (
      & lt; div classname = "Player" & gt;
        & lt; childcomponent / & gt; // Dette er en barnekomponent, nestet inni.
      & lt; / div & gt;
  )}
});

Merk at du må bruke klassenavn fordi klasse er reservert i JavaScript. Gå gjennom koden som er oppgitt og konverter den grunnleggende HTML du finner der i reaktkomponenter.

Deretter fokuserer vi på to mer fantastiske konsepter i reagert: stat og Rekvisitter . Du vil ikke se noe ennå, fordi vi ikke har gjort vår app.

Gjengivelse, stat, rekvisitter

For å gjøre vår reagerer awesomeness, må vi fortelle verktøyet hvor du skal plassere seg i Dom. Å gjøre dette vi bruker Reactdom.render () . Du finner koden for dette i trinn 2 på Codepen.

 REACTINE.RENT (& LT; spiller / & gt;, dokument.QuySector ('body'));

Hvis du har gjort alt riktig, bør du se spilleren vises. Deretter skal vi bygge vår Rekvisitter gjenstand. Rekvisitter er kort for egenskaper, og disse er biter av informasjon du passerer til komponentene dine for å bruke. Vi må gi spilleren litt informasjon til sporet, så vi vil gjøre det nå.

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 demoen har vi brukt kunstverket fra Odesza's 'vi var unge'. Klikk på bildet for å ta tak i bandets sommer er Gone LP gratis

Din Rekvisitter objektet er lagret inne GetDefaultprops. , og bør se slik ut:

 GetDefaultprops: funksjon () {
  komme tilbake {
    Spor: {
      Navn: "Vi var unge",
      Artist: "Odesza",
      Album: "Summer's Gone",
      År: 2012,
      Kunstverk: "https://funkadelphia.files.wordpress.com/2012/09/ODESZA-SUMMERS-GONE-LP.JPG",
      Varighet: 192,
      Kilde: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Vi må også lage en stat Objekt for å lagre den nåværende tiden på sangen og spillingen / pause-tilstanden:

 GetinitialState: Funksjon () {
  Returner {PlayStatus: 'Play', CurphiteTime: 0}
}

Din apps stat endrer seg hele tiden, og lagres i stat gjenstand. Dette er viktig å huske når du skriver reagerer fordi komponentene som stoler på den staten som en eiendom, vil endres hvis staten gjør det. Hva gjør reagere så bra å jobbe med er at den beregner endringene for deg og oppdaterer DOM effektivt når siden endres. Alt forblir synkronisert.

Passerer rekvisitter og stat

Nå skal vi passere Rekvisitter og stat verdier i våre komponenter ( Trinn 3 ). Våre Spiller Komponent bør nå se slik ut:

Render: Funksjon () {
  returnere (& lt; div classname = "spiller" & gt;
    & lt; div classname = "Bakgrunn" stil = {{'bakgrunnsmage': 'url (' + this.props.track.artwork + ')'}} & gt; & lt; / div & gt;
    & lt; div classname = "header" & gt; "title" & gt; nå spiller & lt; / div & gt; & lt; / div & gt;
    & lt; div classname = "artwork" stil = {{'backgroundimage': 'url (' + this.props.track.artwork + ')'}} & gt; & lt; / div & gt;
    & lt; TrackInformation Track = {this.props.Track} / & gt;
    & lt; scrubber / & gt; & lt; controls / & gt;
    & lt; Timestamps varighet = {this.props.Track.Duration} Currentime = {this.State.currenttime} / & gt;
    & lt; audio & gt; {this.props.track.source} / & gt; & lt; / audio & gt;
    & lt; / div & gt;
)}

Vi kan da velge disse verdiene opp i våre barnekomponenter. For eksempel:

 Var Timestamps = React.CreateClass ({
  Render: Funksjon () {Return (
    & lt; div classname = "timestamps" & gt;
      & lt; div classname = "Tid tid - nåværende" & gt; {this.props.currenttime} & lt; / div & gt;
      & lt; div classname = "Tid tid - total" & gt; {this.props.Duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Se gjennom Trinn 4 på Codepen For å se hvordan alle rekvisitter sendes ned og brukes i barnekomponentene.

Varighetsberegning

Timestampene akkurat nå er bare vanlige tall. Vi må konvertere dem til tidsstempler før de kan brukes i vår app. Vi vil gjøre dette ved å skrive en funksjon i vår komponent:

 KonvertiTime: Funksjon (Timestamp) {
    La minutter = Math.floor (Timestamp / 60);
  la sekunder = tidsstempel - (minutter * 60);
    hvis (sekunder & lt; 10) {sekunder = '0' + sekunder; }
    Timestamp = minutter + ':' + sekunder;
    returnere tidsstempel;
}

Vi kan da bruke dette i vår Timestamps. komponent:
{this.convertTime (this.props.currenttime)} .

Spill og pause

Vi skal binde en funksjon til ved trykk Hendelse av Play / Pause-knappen og send den tilbake til hovedkomponenten: & lt; controls isplaying = {this.State.playstatus} onclick = {this.toggleplay} / & gt; .

Våre veksle ser slik ut:

 TogglePlay: Funksjon () {
  la status = dette.State.playstatus;
  La Audio = Document.GetelementByid ('Audio');
  hvis (status === 'play') {
    status = 'pause'; Audio.Play ();
  } else {
    status = 'play'; Audio.Pause ();
  }
  this.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 må justere koden slik at ikonet skifter fra en pil som representerer "Play" og to parallelle linjer som representerer "Pause"

Vi må også legge til litt kode i den gjengitte funksjonen til Kontroller Komponent for å veksle ikonet fra 'Play' til 'Pause', og en annen funksjon for å oppdatere tidsstemplene når sangen spiller.

 Render: Funksjon () {
  la klassenavn;
  hvis (dette.props.isplaying == 'pause') {
    ClassNames = 'Fa Fa-FW Fa-Pause';
  } else {
    klassenavn = 'fa fa-fw fa-play';
  }
  komme tilbake {...}
}

Vi må skrive en funksjon for å håndtere oppdateringen av våre tidsstempler fra før. Det er best å holde denne koden skilt, hvis vi vil bruke den til noe annet senere.

 UpdateTime: Funksjon (Timestamp) {
  Timestamp = Math.floor (Timestamp);
  this.setState ({Currentime: Timestamp});
}

Write a function to convert your numbers into timestamps — Skriv en funksjon for å konvertere tallene til tidsstempler

Til slutt må vi oppdatere vår PlayToggle. Funksjon for å ringe til UpdateTime. Funksjon på A. SetInterval. .

 ...
Audio.Play ();
la _this = dette;
SetInterval (funksjon () {
  .....
  _this.updatesCrubber (prosent);
  _this.updatetime (nåværende tid);
}, 100);
...

Går videre

Så nå bør du ha en skinnende arbeidsspiller. Du kan gå videre her og legge til funksjoner for å skrubbe gjennom sangen med e.pagex. , eller legg til spillelistefunksjonalitet ved å lagre kommende spor-IDer i en matrise, neste og forrige knapper. Hvis du sitter fast, nå ut til @mrjackolai. - Jeg vil gjerne hjelpe deg! Ha det gøy og lykke til.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 289; Kjøp det her !

Relaterte artikler:

20 JavaScript Tips for å blåse deg
Er det greit å bygge nettsteder som stole på JavaScript?
Slik designer du en chatbot-opplevelse

Bygg en enkel musikkspiller med reagere

Skape reagens nytt

Gjengivelse, stat, rekvisitter

Passerer rekvisitter og stat

Varighetsberegning

Spill og pause

Går videre

hvordan - Mest populære artikler

Procreate Tutorial: Hvordan male som de gamle mestere

5 Hot New CSS-funksjoner og hvordan du bruker dem

10 Regler for å lage brukervennlige webskjemaer

Kom i gang med express.js

Lag kjøretøy animasjoner med iClone 7

Hvordan designe responsive og enhetlige agnostiske skjemaer

Skarpe dine skisseferdigheter

Lag en logo i Illustrator

Kategorier