Erstellen Sie mit React einen einfachen Musik-Player
Reagieren ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. In diesem Tutorial werde ich Ihnen zeigen, wie Sie damit einen einfachen interaktiven Musik-Player erstellen. Wir werden in CodePen arbeiten, und Sie können dieses Projekt auch offline in einer React-App schreiben, da alle Komponenten ziemlich einfach auf ein Repo portiert werden können.
Wir werden erforschen Requisiten , Zustand und wie Komponenten innerhalb des React-Ökosystems zusammenarbeiten und miteinander kommunizieren. Wir verwenden auch Font Awesome Stellen Sie daher sicher, dass dies in Ihrem CodePen CSS-Bereich enthalten ist.
Um Sie sehr schnell mit React vertraut zu machen, habe ich zusammengestellt eine Sammlung für Sie auf CodePen und teilen Sie es in Stufen auf, damit Sie jederzeit hineinspringen, den Schritt gabeln und von dort aus vorwärts gehen können. Ich habe auch das CSS für Sie geschrieben, damit Sie sich nur auf React konzentrieren können und wie alles funktioniert.
Erstellen Sie die React-Benutzeroberfläche
Lass uns anfangen! Zuerst müssen wir einige Komponenten in React erstellen. Wir werden den Code von übernehmen Schritt 1 im beiliegenden Stift und konvertieren Sie es in Komponenten. Beginnen wir mit der Erstellung der Hauptkomponente, in die wir alles andere einfügen. Wir werden diese Komponente nennen Spieler .
Der Code zum Erstellen einer Komponente sieht folgendermaßen aus:
let Player = React.createClass({ render: function() { return ( // This is a child component, nested inside. )} });Beachten Sie, dass Sie verwenden müssen Klassenname weil Klasse ist in JavaScript reserviert. Gehen Sie den bereitgestellten CodePen durch und konvertieren Sie den dort gefundenen grundlegenden HTML-Code in React-Komponenten.
Als nächstes konzentrieren wir uns auf zwei weitere großartige Konzepte in React: Zustand und Requisiten . Sie werden noch nichts sehen, da wir unsere App nicht gerendert haben.
Rendering, Staat, Requisiten
Um unsere Reaktion beeindruckend zu machen, müssen wir dem Tool mitteilen, wo es sich im DOM platzieren soll. Dazu verwenden wir ReactDOM.render () . Den Code dazu finden Sie in Schritt 2 auf CodePen.
ReactDOM.render(, document.querySelector('body'));Wenn Sie alles richtig gemacht haben, sollte der Player angezeigt werden. Als nächstes werden wir unsere bauen Requisiten Objekt. Requisiten steht für Eigenschaften, und dies sind Informationen, die Sie an Ihre Komponenten weitergeben, damit diese sie verwenden können. Wir müssen dem Spieler einige Informationen für den Track geben, also machen wir das jetzt.
Ihre Requisiten Objekt wird im Inneren gespeichert getDefaultProps und sollte so aussehen:
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' }} }Wir müssen auch eine erstellen Zustand Objekt zum Speichern der aktuellen Uhrzeit des Songs und des Wiedergabe- / Pausenzustands:
getInitialState: function() { return { playStatus: 'play', currentTime: 0 } }Der Status Ihrer App ändert sich ständig und wird im gespeichert Zustand Objekt. Dies ist wichtig, wenn Sie React schreiben, da sich die Komponenten, die auf diesem Status als Eigenschaft basieren, ändern, wenn der Status dies tut. Was React so großartig macht, ist, dass es die Änderungen für Sie berechnet und das DOM effizient aktualisiert, wenn sich die Seite ändert. Alles bleibt synchron.
Requisiten und Staat übergeben
Jetzt gehen wir vorbei Requisiten und Zustand Werte in unsere Komponenten ( Schritt 3 ). Unser Spieler Komponente sollte jetzt so aussehen:
render: function() { return ( Now playing )}Wir können diese Werte dann in unseren untergeordneten Komponenten erfassen. Zum Beispiel:
var Timestamps = React.createClass({ render: function() { return ( {this.props.currentTime} {this.props.duration} )} });Durch schauen Schritt 4 auf CodePen um zu sehen, wie alle Requisiten weitergegeben und in den untergeordneten Komponenten verwendet werden.
Dauerberechnung
Die Zeitstempel sind im Moment nur einfache Zahlen. Wir müssen sie in Zeitstempel konvertieren, bevor sie in unserer App verwendet werden können. Wir werden dies tun, indem wir eine Funktion in unsere Komponente schreiben:
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; }Wir können dies dann in unserem verwenden Zeitstempel Komponente:
{this.convertTime (this.props.currentTime)} .
Spielen und pausieren
Wir werden eine Funktion an die binden onClick Ereignis der Play / Pause-Taste und geben Sie es zurück an die Hauptkomponente: .
Unser Toggle sieht so aus:
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 }); } 
Wir müssen auch Code in die Renderfunktion von hinzufügen Kontrollen Komponente zum Umschalten des Symbols von 'Wiedergabe' auf 'Pause' und eine weitere Funktion zum Aktualisieren der Zeitstempel während der Wiedergabe des Songs.
render: function() { let classNames; if (this.props.isPlaying == 'pause') { classNames = 'fa fa-fw fa-pause'; } else { classNames = 'fa fa-fw fa-play'; } return {...} }Wir müssen eine Funktion schreiben, um die Aktualisierung unserer Zeitstempel von früher zu handhaben. Es ist am besten, diesen Code getrennt zu halten, falls wir ihn später für etwas anderes verwenden möchten.
updateTime: function(timestamp) { timestamp = Math.floor(timestamp); this.setState({ currentTime: timestamp }); } 
Schließlich müssen wir unsere aktualisieren playToggle Funktion zum Aufrufen der Updatezeit Funktion auf einem setInterval .
... audio.play(); let _this = this; setInterval(function() { ..... _this.updateScrubber(percent); _this.updateTime(currentTime); }, 100); ...Vorwärts gehen
Jetzt sollten Sie einen glänzenden Musikplayer haben. Sie können hier weiter gehen und Funktionen zum Scrubben des Songs mit hinzufügen e.pageX oder fügen Sie die Playlist-Funktionalität hinzu, indem Sie die kommenden Titel-IDs in einem Array sowie in den Schaltflächen 'Weiter' und 'Zurück' speichern. Wenn Sie nicht weiterkommen, wenden Sie sich an @ Mrjackolai - Ich helfe Ihnen gerne weiter! Viel Spaß und viel Glück.
Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 289; kauf es hier !
Zum Thema passende Artikel:
- 20 JavaScript-Tipps, die Sie umhauen werden
- Ist es in Ordnung, Websites zu erstellen, die auf JavaScript basieren?
- So gestalten Sie ein Chatbot-Erlebnis
