Erstellen Sie einen einfachen Musik-Player mit der Reaktion

Sep 15, 2025

wie man

Reagieren ist eine beliebte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen, und in diesem Tutorial werde ich Ihnen zeigen, wie Sie es verwenden, um einen einfachen interaktiven Musik-Player zu erstellen. Wir werden in Codepen arbeiten, und Sie könnten dieses Projekt auch offline in einer Reaktions-App schreiben, da alle Komponenten ziemlich leicht an einen Repo portiert werden können.

Wir werden erkunden Requisiten , Zustand und wie Komponenten zusammenarbeiten und innerhalb des React-Ökosystems miteinander kommunizieren. Wir verwenden auch. Schrift freut , also stellen Sie sicher, dass das in Ihrem Codepen CSS-Panel enthalten ist.

Um Sie aufzustehen und mit Reaktion sehr schnell zu reagieren, habe ich zusammengestellt Eine Sammlung für Sie auf Codepen und teilen Sie es in Stufen auf, damit Sie an einem beliebigen Punkt springen können, den Schritt gabelend und von dort vorwärts gehen. Ich habe auch die CSS für Sie geschrieben, sodass Sie sich nur auf die Reaktion konzentrieren können und wie alles funktioniert.

Erstellen Sie die Reaktions-Benutzeroberfläche

Lass uns anfangen! Erstens müssen wir einige Komponenten in der Reaktion erstellen. Wir werden den Code von nehmen Schritt 1 im Begleitstift und umwandeln Sie es in Komponenten. Beginnen wir, indem wir die Hauptkomponente erstellen, die wir alles andere in das hineinlegen. Wir nennen diese Komponente Spieler .

Der Code zum Erstellen einer Komponente sieht so aus:

 Lassen Sie den Spieler = reagieren.CreateClass ({{
  Render: Funktion () {RETURN (
      & lt; div classname = "player" & gt;
        & lt; Kinderkomponenten / & gt; // Dies ist eine Kinderkomponente, die innen verschachtelt ist.
      & lt; / div & gt;
  )}
});

Beachten Sie, dass Sie verwenden müssen Klassenname weil Klasse ist in JavaScript reserviert. Gehen Sie durch den Codepen mitgeliefert und konvertieren Sie das grundlegende HTML, das Sie dort in Reaktionskomponenten befinden.

Als nächstes konzentrieren wir uns auf zwei weitere fantastische Konzepte in Reaktion: Zustand und Requisiten . Sie werden noch nichts sehen, denn wir haben unsere App noch nicht gerendert.

Rendering, Staat, Requisiten

Um unsere Reaktions-Ewigkeit zu rendern, müssen wir dem Werkzeug mitteilen, wo sich selbst in den Dom platziert. Dazu verwenden wir Reagdom.render () . In Schritt 2 finden Sie den Code für Codepen.

 reagdom.render (& lt; spieler / & gt; document.Quest.QuerySelector ('Körper'));

Wenn Sie alles richtig gemacht haben, sollten Sie den Player angezeigt werden. Als nächstes werden wir unsere bauen Requisiten Objekt. Requisiten ist kurz für Eigenschaften, und dies sind Informationen, die Sie an Ihre Komponenten übergeben, damit sie verwendet werden können. Wir müssen dem Spieler einige Informationen für den Track geben, also müssen wir das jetzt tun.

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 — Für diese Demo haben wir das Kunstwerk von Odeszas 'Wir waren jung genutzt. Klicken Sie auf das Bild, um den Sommer der Band kostenlos zu nutzen

Ihre Requisiten Objekt ist innen gespeichert GetdefaultProps und sollte so aussehen:

 GetDefaultProps: Funktion () {
  Rückkehr {
    Spur: {
      Name: "Wir waren jung",
      Künstler: "Odesza",
      Album: "Sommer ist gegangen",
      Jahr 2012,
      Artwork: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summer-gone-lp.jpg",
      Dauer: 192,
      Quelle: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Wir müssen auch eine erstellen Zustand Objekt, um die aktuelle Uhrzeit des Songs und den Status "Play / Pause" zu speichern:

 getinitialstate: Funktion () {
  RETURN {PLAYSTATUS: 'PLAY', aktuellt: 0}
}

Der Zustand Ihres App ändert sich ständig und wird in der Zustand Objekt. Dies ist wichtig, um sich daran zu erinnern, wenn Sie reagieren, weil die Komponenten, die sich auf diesen Zustand verlassen, sich als Eigenschaft verlassen, wenn sich der Zustand ändert. Was so toll macht, mit der Arbeit, ist, dass er die Änderungen für Sie berechnet und das Dom effizient aktualisiert, wenn sich die Seite ändert. Alles bleibt synchron.

Bestehende Requisiten und Staat

Jetzt gehen wir vorbei Requisiten und Zustand Werte in unsere Komponenten ( Schritt 3 ). Unser Spieler Komponente sollte jetzt so aussehen:

Render: Funktion () {
  Rückkehr (& lt; div classname = "player" & gt;
    & lt; div classname = "background" style = {{{'backgroundimage': 'url (' + the.props.track.artwork + ')'}} & gt; & lt; / div & gt;
    & lt; div classname = "header" & gt; & lt; div classname = "title" & gt; jetzt spielen & lt; / div & gt; & lt; / div & gt;
    & lt; div classname = "artwork" style = {{{'BackgroundFimage': 'URL (' + the.props.track.artwork + ')'}} & gt; & lt; / div & gt;
    & lt; Trackinformation Track = {this.props.track} / & gt;
    & lt; scrubber / & gt; & lt; steuert / & gt;
    & lt; Zeitstempel Dauer = {this.props.track.duration} currentime = {the.state.currenttime} / & gt;
    & lt; Audio & gt; & lt; Source Src = {this.props.track.Source} / & gt; & lt; / \ audio & gt;
    & lt; / div & gt;
)}

Wir können diese Werte dann in unseren untergeordneten Komponenten auswählen. Zum Beispiel:

 var timestamps = reag.createclass ({{
  Render: Funktion () {RETURN (
    & lt; div classname = "timestamps" & gt;
      & lt; div classname = "time time - current" & gt; {this.props.currenttime} & lt; / div & gt;
      & lt; div classname = "Zeitzeit - total" & gt; {this.props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Durch schauen Schritt 4 auf Codepen um zu sehen, wie alle Requisiten weitergeleitet und in den untergeordneten Komponenten verwendet werden.

Dauerberechnung

Die Zeitstempel sind jetzt nur einfach. Wir müssen sie in Zeitstempel umwandeln, bevor sie in unserer App verwendet werden können. Wir werden dies tun, indem wir eine Funktion in unserem Bauteil schreiben:

 CONVERTAY: Funktion (Zeitstempel) {
    LASSEN MINUTEN = MATH.FLOOR (Zeitstempel / 60);
  sei Sekunden = Zeitstempel - (Minuten * 60);
    if (Sekunden & lt; 10) {sekunden = '0' + Sekunden; }
    Zeitstempel = Minuten + ':' + Sekunden;
    Rückkehrzeitstempel;
}

Wir können dies dann in unserem verwenden Zeitstempel Komponente:
{the.convertime (the.props.currenttime)} .

Spiel und Pause

Wir werden eine Funktion an das binden Onclick Ereignis der PLAY / PAUSE-Taste und übergeben Sie es wieder an der Hauptkomponente: & lt; Steuerelemente isPlaying = {this.state.PlayStatus} Onclick = {the.toggleplay} / & gt; .

Unser Toggle sieht so aus:

 Toggleplay: Funktion () {
  Lassen Sie den Status = dies.State.PlayStatus;
  lass Audio = document.getelementbyId ('Audio');
  if (Status === 'Play') {
    Status = 'Pause'; Audio.Play ();
  } else {
    Status = 'Spiel'; 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' — Wir müssen den Code anpassen, so dass das Symbol von einem Pfeil von einem Pfeil umgeschaltet wird, der "Play" und zwei parallele Linien darstellt, die 'Pause' repräsentieren

Wir müssen auch einen Code in der Render-Funktion des Steuerelemente Komponente, um das Symbol von 'play' auf 'Pause' umschalten, und eine andere Funktion, um die Zeitstempel zu aktualisieren, wenn der Song spielt.

 Render: Funktion () {
  Klassennamen lassen;
  if (the.props.isplaying == 'Pause') {
    classnames = 'fa fa-fw fa-pause';
  } else {
    classnames = 'fa fa-fw fa-spiel';
  }
  Rückkehr {...}
}

Wir müssen eine Funktion schreiben, um die Aktualisierung unserer Zeitstempel von zuvor umzugehen. Es ist am besten, diesen Code zu trennen, falls wir sie später für etwas anderes verwenden möchten.

 UpdateTime: Funktion (Zeitstempel) {
  Zeitstempel = math.Floor (Zeitstempel);
  this.setState ({aktuelltime: timestamp});
}

Write a function to convert your numbers into timestamps — Schreiben Sie eine Funktion, um Ihre Zahlen in Zeitstempel zu konvertieren

Schließlich müssen wir unsere aktualisieren Playtoggle Funktion, um das anzurufen Updatezeit Funktion auf A. SetInterval. .

 ...
Audio.Play ();
lass _this = das;
setInterval (Funktion () {
  .....
  _Dieser.updateswitterung (Prozent);
  _This.UpdateTime (aktuell);
}, 100);
...

Vorwärts bewegen

Jetzt sollten Sie jetzt einen glänzenden Arbeiterspieler haben. Sie könnten hier weiter gehen und Funktionen zum Schrubben durch das Lied mit fügen E.PAGEX. oder fügen Sie die Wiedergabelistenfunktionalität hinzu, indem Sie die kommenden Track-IDs in einem Array-, nächsten und vorherigen Schaltflächen speichern. Wenn Sie stecken bleiben, erreichen Sie @mrjackolai. - Ich werde gerne helfen! Viel Spaß und viel Glück.

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 289; Kaufen Sie es hier. Schnitte

Zum Thema passende Artikel:

20 Javascript-Tipps, um deinen Geist zu blasen
Ist es in Ordnung, Websites aufzubauen, die sich auf JavaScript verlassen?
So entwerfen Sie ein Chatbot-Erlebnis

Erstellen Sie einen einfachen Musik-Player mit der Reaktion

Erstellen Sie die Reaktions-Benutzeroberfläche

Rendering, Staat, Requisiten

Bestehende Requisiten und Staat

Dauerberechnung

Spiel und Pause

Vorwärts bewegen

wie man - Die beliebtesten Artikel

pureef: So verwenden Sie das Bild-Referenzwerkzeug

der wesentliche Leitfaden zur Verkürzung in der Kunst

So nehmen Sie einen Screenshot auf einem Mac

Verwendung der Reaktionsfeder, um Komponenten zu animieren

Wie man Kreatur Anatomie meistert

Power A Blog mit der WordPress-API

Erstellen Sie ein malerisches Gefühl in Ihrer digitalen Kunst

Erstellen Sie einen pelzigen 3D-Charakter von Grund auf

Kategorien