Όταν αγοράζετε μέσω συνδέσμων στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Ετσι δουλευει.

Αντιδρώ είναι μια δημοφιλής βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη και σε αυτό το σεμινάριο θα σας δείξω πώς να τη χρησιμοποιήσετε για να δημιουργήσετε ένα απλό διαδραστικό πρόγραμμα αναπαραγωγής μουσικής. Θα εργαζόμαστε στο CodePen και θα μπορούσατε επίσης να γράψετε αυτό το έργο εκτός σύνδεσης μέσα σε μια εφαρμογή React, καθώς όλα τα στοιχεία μπορούν να μεταφερθούν σε ένα αποθετήριο πολύ εύκολα.

Θα εξερευνήσουμε στηρίγματα, κατάσταση και πώς τα συστατικά συνεργάζονται και επικοινωνούν μεταξύ τους μέσα στο οικοσύστημα React. Χρησιμοποιούμε επίσης Γραμματοσειρά φοβερή, επομένως βεβαιωθείτε ότι περιλαμβάνεται στον πίνακα CodePen CSS.

Για να σας βάλω σε λειτουργία με το React πολύ γρήγορα, έχω συγκεντρώσει μια συλλογή για εσάς στο CodePen, και χωρίστε το σε στάδια, ώστε να μπορείτε να πηδήξετε σε οποιοδήποτε σημείο, να διασχίσετε το βήμα και να προχωρήσετε από εκεί. Έχω γράψει επίσης το CSS για εσάς, ώστε να μπορείτε απλώς να εστιάσετε στο React και πώς λειτουργεί όλο αυτό.

Δημιουργήστε το React UI

Ας αρχίσουμε! Αρχικά, πρέπει να δημιουργήσουμε κάποια στοιχεία στο React. Θα πάρουμε τον κωδικό από Βήμα 1 στο συνοδευτικό στυλόκαι μετατρέψτε το σε εξαρτήματα. Ας ξεκινήσουμε δημιουργώντας το κύριο στοιχείο στο οποίο θα βάλουμε όλα τα άλλα μέσα. Θα ονομάσουμε αυτό το στοιχείο Παίχτης.

Ο κώδικας για τη δημιουργία ενός στοιχείου μοιάζει με αυτό:

let Player = React.createClass({ render: function() { return ( 

 // This is a child component, nested inside. 
 )}
});

Σημειώστε ότι πρέπει να χρησιμοποιήσετε όνομα τάξης επειδή τάξη είναι δεσμευμένο σε JavaScript. Περάστε από το CodePen που παρέχεται και μετατρέψτε το βασικό HTML που βρίσκετε εκεί σε στοιχεία React.

Στη συνέχεια, θα επικεντρωθούμε σε δύο ακόμη εκπληκτικές έννοιες στο React: κατάσταση και στηρίγματα. Δεν θα δείτε τίποτα ακόμα, επειδή δεν έχουμε αποδώσει την εφαρμογή μας.

Rendering, State, Props

Για να αποδώσουμε το React μας φοβερό, πρέπει να πούμε στο εργαλείο πού να τοποθετηθεί στο DOM. Για να το κάνουμε αυτό χρησιμοποιούμε ReactDOM.render(). Θα βρείτε τον κωδικό για αυτό στο Βήμα 2 στο CodePen. 

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

Εάν τα έχετε κάνει όλα σωστά, θα πρέπει να δείτε τη συσκευή αναπαραγωγής να εμφανίζεται. Στη συνέχεια θα χτίσουμε το δικό μας στηρίγματα αντικείμενο. στηρίγματα είναι συντομογραφία για ιδιότητες και αυτές είναι πληροφορίες που μεταβιβάζετε στα στοιχεία σας για να τα χρησιμοποιήσουν. Πρέπει να δώσουμε στον παίκτη κάποιες πληροφορίες για το κομμάτι, οπότε θα το κάνουμε τώρα.

Για αυτό το demo χρησιμοποιήσαμε το έργο τέχνης από το
Για αυτό το demo χρησιμοποιήσαμε το έργο τέχνης από το "We Were Young" της Odesza. Κάντε κλικ στην εικόνα για να πάρετε το Summer's Gone LP του συγκροτήματος δωρεάν

 Τα δικα σου στηρίγματα το αντικείμενο είναι αποθηκευμένο μέσα getDefaultProps, και θα πρέπει να μοιάζει με αυτό:

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" }}
}

Πρέπει επίσης να δημιουργήσουμε ένα κατάσταση αντικείμενο για αποθήκευση της τρέχουσας ώρας του τραγουδιού και της κατάστασης αναπαραγωγής/παύσης:

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

Η κατάσταση της εφαρμογής σας αλλάζει συνεχώς και αποθηκεύεται στο κατάσταση αντικείμενο. Αυτό είναι σημαντικό να το θυμάστε όταν γράφετε το React επειδή τα στοιχεία που βασίζονται σε αυτήν την κατάσταση ως ιδιότητα θα αλλάξουν εάν αλλάξει η κατάσταση. Αυτό που κάνει το React τόσο υπέροχο στη συνεργασία είναι ότι υπολογίζει τις αλλαγές για εσάς και ενημερώνει αποτελεσματικά το DOM όταν αλλάζει η σελίδα. Όλα παραμένουν συγχρονισμένα.

Περνώντας στηρίγματα και κατάσταση

Τώρα θα περάσουμε στηρίγματα και κατάσταση τιμές στα συστατικά μας (Βήμα 3). Μας Παίχτης Το στοιχείο πρέπει τώρα να μοιάζει με αυτό:

render: function() { return (




Now playing






)}

Στη συνέχεια, μπορούμε να πάρουμε αυτές τις τιμές μέσα στα θυγατρικά μας στοιχεία. Για παράδειγμα:

var Timestamps = React.createClass({ render: function() { return ( 


{this.props.currentTime}


{this.props.duration}


 )}
});

Ξανακοιτάζω βήμα 4 στο CodePen για να δείτε πώς μεταβιβάζονται και χρησιμοποιούνται όλα τα στηρίγματα στα θυγατρικά εξαρτήματα.

Υπολογισμός διάρκειας

Οι χρονικές σημάνσεις αυτή τη στιγμή είναι απλοί αριθμοί. Πρέπει να τα μετατρέψουμε σε χρονικές σημάνσεις για να μπορέσουν να χρησιμοποιηθούν στην εφαρμογή μας. Αυτό θα το κάνουμε γράφοντας μια συνάρτηση μέσα στο στοιχείο μας:

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; }

Μπορούμε στη συνέχεια να το χρησιμοποιήσουμε στο δικό μας Χρονοσήμανση συστατικό:
{this.convertTime (this.props.currentTime)}.

Αναπαραγωγή και παύση

Θα συνδέσουμε μια συνάρτηση στο στο κλικ συμβάν του κουμπιού Αναπαραγωγή/Παύση και μεταβιβάστε το ξανά στο κύριο στοιχείο:.

Το Toggle μας μοιάζει με αυτό: 

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 }); }
Πρέπει να προσαρμόσουμε τον κώδικα έτσι ώστε το εικονίδιο να εναλλάσσεται από ένα βέλος που αντιπροσωπεύει το
Πρέπει να προσαρμόσουμε τον κώδικα έτσι ώστε το εικονίδιο να εναλλάσσεται από ένα βέλος που αντιπροσωπεύει το "παιχνίδι" και δύο παράλληλες γραμμές που αντιπροσωπεύουν "παύση"

Πρέπει επίσης να προσθέσουμε κάποιο κώδικα μέσα στη λειτουργία render του Έλεγχοι στοιχείο για εναλλαγή του εικονιδίου από «Αναπαραγωγή» σε «Παύση» και μια άλλη λειτουργία για την ενημέρωση των χρονικών σημάνσεων κατά την αναπαραγωγή του τραγουδιού.

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

Πρέπει να γράψουμε μια συνάρτηση για να χειριστούμε την ενημέρωση των χρονικών μας σφραγίδων από πριν. Είναι καλύτερο να κρατήσουμε αυτόν τον κωδικό ξεχωριστό, σε περίπτωση που θέλουμε να τον χρησιμοποιήσουμε για κάτι άλλο αργότερα.

updateTime: function(timestamp) { timestamp = Math.floor(timestamp); this.setState({ currentTime: timestamp }); }
Γράψτε μια συνάρτηση για να μετατρέψετε τους αριθμούς σας σε χρονικές σημάνσεις
Γράψτε μια συνάρτηση για να μετατρέψετε τους αριθμούς σας σε χρονικές σημάνσεις

Τέλος, πρέπει να ενημερώσουμε το δικό μας playToggle λειτουργία για να καλέσετε το updateTime λειτουργία σε α setInterval.

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

Προχωρώντας μπροστά

Έτσι, τώρα θα πρέπει να έχετε ένα λαμπερό πρόγραμμα αναπαραγωγής μουσικής που λειτουργεί. Θα μπορούσατε να προχωρήσετε περισσότερο εδώ και να προσθέσετε λειτουργίες για να καθαρίσετε το τραγούδι με e.σελίδαΧ, ή προσθέστε τη λειτουργία Playlist αποθηκεύοντας επερχόμενα αναγνωριστικά κομματιών σε έναν πίνακα, τα κουμπιά επόμενο και προηγούμενο. Εάν κολλήσετε, απευθυνθείτε σε @mrjackolai – Θα χαρώ να βοηθήσω! Καλή διασκέδαση και καλή τύχη.

Αυτό το άρθρο εμφανίστηκε αρχικά στο περιοδικό net τεύχος 289; αγοράστε το εδώ!

Σχετικά Άρθρα:

  • 20 συμβουλές JavaScript που θα σας συναρπάσουν
  • Είναι εντάξει να δημιουργείτε ιστότοπους που βασίζονται σε JavaScript;
  • Πώς να σχεδιάσετε μια εμπειρία chatbot