Δημιουργήστε μια απλή συσκευή αναπαραγωγής μουσικής με αντιδράσει

Sep 11, 2025

πως να

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

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

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

Δημιουργήστε το αντιδράστε UI

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

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

 Αφήστε τον παίκτη = να αντιδράσει.createclass ({
  Render: Λειτουργία () {επιστροφή (
      & lt; div classname = "player" & gt;
        & lt; παιδίComponent / & gt; // Αυτό είναι ένα παιδικό στοιχείο, ένθετο εσωτερικό.
      & lt; / div & gt;
  )}
}) ·

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

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

Απόδοση, κατάσταση, στηρίγματα

Για να καταστήσουμε την αντιδραστή μας απογοητευτική, πρέπει να πούμε στο εργαλείο όπου τοποθετείται στο Dom. Για να το κάνετε αυτό που χρησιμοποιούμε Επισκευή () . Θα βρείτε τον κώδικα για αυτό στο βήμα 2 στο Codepen.

 REACTICTDOM.Render (& lt; player / & gt;, έγγραφο.queryselector («σώμα»)).

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

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 — Για αυτό το demo χρησιμοποιούσαμε τα έργα τέχνης από την Odesza's's's Young '. Κάντε κλικ στην εικόνα για να πάρετε το καλοκαίρι του καλοκαιριού

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

 GetDefaultProps: Λειτουργία () {
  ΕΠΙΣΤΡΟΦΗ {
    πίστα: {
      Όνομα: "Ήμασταν νέοι",
      Καλλιτέχνης: "Odesza",
      Άλμπουμ: "Το καλοκαίρι έχει φύγει",
      Έτος: 2012,
      έργα τέχνης: "https://funkadelphia.files.workpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Διάρκεια: 192,
      Πηγή: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wly.mp3"
  }}
}

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

 getiniLialstate: λειτουργία () {
  Επιστροφή {PlayStatus: 'Play', CapentTime: 0}
}

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

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

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

Render: Λειτουργία () {
  Επιστροφή (& lt; div classname = "player" & gt;
    & lt; div classname = "φόντο" στυλ = {{"backgroundimage": 'URL (' + αυτό.props.track.artwork + ')'}} & gt; / lt; / div & gt;
    & lt; div classname = "header" & gt; & lt; div classname = "τίτλος" & gt; τώρα / div & gt; / div & lt; / div & gt;
    & lt; div classname = "στυλ τέχνης" στιλ = {{'backgroundimage': 'URL (' + αυτό.props.track.artwork + ')'}} & gt; / div & gt;
    & lt; trackinformation track = {this.props.track} / & gt;
    & lt; scrubber / & gt; & lt; controls / & gt;
    & lt; timestamps duration = {this.props.track.duration} currentime = {is.state.currenttime} / & gt;
    & lt; ήχου & gt; & lt; πηγή src = {that.props.track.source} / & gt; / audio & gt;
    & lt; / div & gt;
)}

Μπορούμε στη συνέχεια να επιλέξουμε αυτές τις αξίες μέσα στο παιδί μας. Για παράδειγμα:

 var timestamps = αντιδράστε.createclass ({
  Render: Λειτουργία () {επιστροφή (
    & lt; div classname = "timestamps" & gt;
      & lt; div classname = "Ώρα χρόνου - τρέχουσα" & gt; {that.props.currenttime} & lt; / div & gt;
      & lt; div classname = "Time Time - Total" & GT; {This.Props.Duration} / LT; / Div & GT;
    & lt; / div & gt;
  )}
}) ·

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

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

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

 Μετατροπή: Λειτουργία (Timestamp) {
    Αφήστε τα λεπτά = math.floor (timestamp / 60);
  Αφήστε τα δευτερόλεπτα = timestamp - (λεπτά * 60);
    Εάν (δευτερόλεπτα & lt, 10) {δευτερόλεπτα = '0' + δευτερόλεπτα; }
    Timestamp = λεπτά + ':' + δευτερόλεπτα;
    επιστροφή χρονικού σήματος;
}

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

Παίξτε και παύση

Θα δεσμευόμαστε μια λειτουργία στο στο κλικ Εκδήλωση του κουμπιού αναπαραγωγής / παύσης και μεταβιβάστε το στο κύριο συστατικό: & lt; ελέγχους isplaying = {this.state.playstatus} onclick = {this.toggleplay} / & gt; .

Η εναλλαγή μας μοιάζει με αυτό:

 toggleplay: λειτουργία () {
  Αφήστε την κατάσταση = αυτό.state.playstatus;
  Αφήστε το Audio = Document.geteLemementid ('Audio');
  Εάν (κατάσταση === 'παιχνίδι') {
    status = 'pause'; audio.play ();
  } αλλιώς {
    status = 'play'; audio.pause ();
  }
  αυτό.setstate ({playstatus: status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Πρέπει να προσαρμόσουμε τον κώδικα έτσι ώστε το εικονίδιο να αλλάζει από ένα βέλος που αντιπροσωπεύει το «παιχνίδι» και δύο παράλληλες γραμμές που αντιπροσωπεύουν την «παύση»

Πρέπει επίσης να προσθέσουμε κάποιον κωδικό μέσα στη λειτουργία απόδοσης του Έλεγχος Συστατικό για εναλλαγή του εικονιδίου από το 'Play' στην 'Παύση' και μια άλλη λειτουργία για να ενημερώσετε τις χρονικές στιγμές όταν το τραγούδι παίζει.

 καθιστούν: Λειτουργία () {
  Αφήστε τα ταξινόμηση.
  αν (this.props.isplaying == 'παύση') {
    classnames = 'fa fa-fw fa-pause';
  } αλλιώς {
    classnames = 'fa fa-fw fa-play'?
  }
  ΕΠΙΣΤΡΟΦΗ {...}
}

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

 UpdateTime: Λειτουργία (Timestamp) {
  timestamp = math.floor (timestamp);
  αυτό.setstate ({remeartime: timestamp});
}

Write a function to convert your numbers into timestamps — Γράψτε μια λειτουργία για να μετατρέψετε τους αριθμούς σας σε χρονικά σήματα

Τέλος, πρέπει να ενημερώσουμε μας αναπαραγωγή λειτουργία για να καλέσετε το updateim λειτουργία σε ένα setinterval .

 ...
audio.play ();
Αφήστε το _Αυτό = αυτό?
setinterval (λειτουργία () {
  .....
  _This.updatescrubber (τοις εκατό);
  _This.updatetime (Currentime);
}, 100).
...

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

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

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

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

20 Συμβουλές JavaScript για να φυσήξετε το μυαλό σας
Είναι εντάξει να οικοδομήσουμε ιστότοπους που βασίζονται στο JavaScript;
Πώς να σχεδιάσετε μια εμπειρία Chatbot

Δημιουργήστε μια απλή συσκευή αναπαραγωγής μουσικής με αντιδράσει

Δημιουργήστε το αντιδράστε UI

Απόδοση, κατάσταση, στηρίγματα

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

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

Παίξτε και παύση

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

πως να - Τα πιο δημοφιλή άρθρα

Οδηγός για τα εργαλεία Web της Google

Δημιουργήστε έναν ζωντανό ψηφιακό ανθρώπινο

Ξεκινήστε με σκουριά

Πώς να οικοδομήσουμε σύνθετες διατάξεις χρησιμοποιώντας το CSS

4 Εύκολα βήματα για τη βελτίωση της απόδοσής σας

Πώς να δημιουργήσετε μαλλιά στυλ Manga σε κίνηση

Μοντελοποίηση διαστημόπλοιο για το σχεδιασμό gameplay

Ξεκινήστε με πρωτότυπα στο Adobe XD

Κατηγορίες