Byg en simpel musikafspiller med React

Reagere er et populært JavaScript-bibliotek til opbygning af brugergrænseflader, og i denne vejledning vil jeg vise dig, hvordan du bruger det til at opbygge en simpel interaktiv musikafspiller. Vi skal arbejde i CodePen, og du kan også skrive dette projekt offline i en React-app, da alle komponenterne kan overføres til en repo ret let.

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



For at få dig i gang med React meget hurtigt har jeg sat sammen en samling til dig på CodePen , og opdel det i etaper, så du kan springe ind på ethvert tidspunkt, forkæle trinnet og gå frem derfra. Jeg har også skrevet CSS til dig, så du kan bare fokusere på React, og hvordan det hele fungerer.



Opret React UI

Lad os komme igang! Først skal vi oprette nogle komponenter i React. Vi tager koden fra Trin 1 i den medfølgende pen , og konverter det til komponenter. Lad os begynde med at oprette hovedkomponenten, som vi lægger alt andet indeni. Vi kalder denne komponent Spiller .

Koden til oprettelse af en komponent ser sådan ud:



let Player = React.createClass({ render: function() { return ( // This is a child component, nested inside. )} });

Bemærk, at du skal bruge className fordi klasse er forbeholdt JavaScript. Gå gennem den medfølgende CodePen, og konverter den grundlæggende HTML, du finder der, til React-komponenter.

Dernæst fokuserer vi på to mere fantastiske koncepter i React: stat og rekvisitter . Du kan ikke se noget endnu, fordi vi ikke har gengivet vores app.

Gengivelse, tilstand, rekvisitter

For at gengive vores React-elegance er vi nødt til at fortælle værktøjet, hvor det skal placeres i DOM. For at gøre dette bruger vi ReactDOM.render () . Du finder koden til dette i trin 2 på CodePen.



ReactDOM.render(, document.querySelector('body'));

Hvis du har gjort alt korrekt, skal du se afspilleren vises. Dernæst skal vi bygge vores rekvisitter objekt. rekvisitter er forkortelse for egenskaber, og det er oplysninger, du videregiver til dine komponenter, så de kan bruge dem. Vi er nødt til at give spilleren nogle oplysninger til sporet, så det gør vi nu.

Til denne demo vi

Til denne demo har vi brugt kunstværket fra Odeszas 'We Were Young'. Klik på billedet for at få fat i bandets Summer's Gone LP gratis

Jeres rekvisitter genstand er gemt inde getDefaultProps og skal se sådan ud:

getDefaultProps: function() { return { track: { name: 'We Were Young', artist: 'Odesza', album: 'Summer's Gone', year: 2012, artwork: 'https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg', duration: 192, source: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3' }} }

Vi er også nødt til at oprette en stat objekt til at gemme det aktuelle tidspunkt for sangen og afspil / pause-tilstand:

getInitialState: function() { return { playStatus: 'play', currentTime: 0 } }

Din apps tilstand ændres konstant og gemmes i stat objekt. Dette er vigtigt at huske, når du skriver React, fordi de komponenter, der er afhængige af denne tilstand som en egenskab, vil ændre sig, hvis staten gør det. Hvad der gør React så fantastisk at arbejde med er, at det beregner ændringerne for dig og opdaterer DOM effektivt, når siden ændres. Alt forbliver synkroniseret.

Passerer rekvisitter og tilstand

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

photoshop elements 9 tutorial til begyndere
render: function() { return ( Now playing )}

Vi kan derefter samle disse værdier op i vores underordnede komponenter. For eksempel:

var Timestamps = React.createClass({ render: function() { return ( {this.props.currentTime} {this.props.duration} )} });

Se igennem trin 4 på CodePen for at se, hvordan alle rekvisitterne videregives og bruges i underkomponenterne.

Varighed beregning

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

convertTime: function(timestamp) { let minutes = Math.floor(timestamp / 60); let seconds = timestamp - (minutes * 60); if (seconds < 10) { seconds = '0' + seconds; } timestamp = minutes + ':' + seconds; return timestamp; }

Vi kan derefter bruge dette i vores Tidsstempler komponent:
{this.convertTime (this.props.currentTime)} .

Afspil og pause

Vi binder en funktion til onKlik i afspil / pause-knappen, og send den tilbage til hovedkomponenten: .

Vores Toggle ser sådan ud:

togglePlay: function() { let status = this.state.playStatus; let audio = document.getElementById('audio'); if(status === 'play') { status = 'pause'; audio.play(); } else { status = 'play'; audio.pause(); } this.setState({ playStatus: status }); }

Vi skal justere koden, så ikonet skifter fra en pil, der repræsenterer

Vi skal justere koden, så ikonet skifter fra en pil, der repræsenterer 'play' og to parallelle linjer, der repræsenterer 'pause'

Vi er også nødt til at tilføje nogle kode inde i gengivelsesfunktionen i Kontrol komponent for at skifte ikonet fra 'Afspil' til 'Pause' og en anden funktion til at opdatere tidsstemplerne, når sangen afspilles.

kraften bliver vækket
render: function() { let classNames; if (this.props.isPlaying == 'pause') { classNames = 'fa fa-fw fa-pause'; } else { classNames = 'fa fa-fw fa-play'; } return {...} }

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

updateTime: function(timestamp) { timestamp = Math.floor(timestamp); this.setState({ currentTime: timestamp }); }

Skriv en funktion for at konvertere dine numre til tidsstempler

Skriv en funktion for at konvertere dine numre til tidsstempler

Endelig er vi nødt til at opdatere vores playToggle funktion til at kalde opdateringstid funktion på en setInterval .

... audio.play(); let _this = this; setInterval(function() { ..... _this.updateScrubber(percent); _this.updateTime(currentTime); }, 100); ...

Bevæger sig fremad

Så nu skal du have en skinnende fungerende musikafspiller. Du kan gå længere her og tilføje funktioner til at skrubbe igennem 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, skal du række ud til @mrjackolai - Jeg hjælper gerne! Hav det sjovt og held og lykke.

Denne artikel opstod oprindeligt i netmagasin udgave 289; køb det her !

Relaterede artikler: