Implementieren Sie den Audioplayer in React

1. Erstellen Sie eine Klassenkomponente, um den Audioplayer in React zu implementieren
2. Erstellen Sie eine funktionale Komponente, um den Audioplayer in React zu implementieren

React-Anwendungen dienen nicht ausschließlich der Anzeige visueller Inhalte. Manchmal sind auch Audioinhalte unerlässlich.

Wir können die React-Komponente so konfigurieren, dass sie Musik abspielt, und haben eine Schaltfläche, um die Wiedergabe bei Bedarf anzuhalten und fortzusetzen.

Erstellen Sie eine Klassenkomponente, um den Audioplayer in React zu implementieren

In React können Sie mithilfe der Komponentensyntax der ES6-Klasse eine Komponente erstellen, um beliebige Musikdateien abzuspielen. Dafür werden wir mehrere Funktionen verwenden: Status, den nativen Konstruktor Audio(), Lifecycle-Hooks und so weiter.

Schauen wir uns das tatsächliche Beispiel an, wie eine React-Klassenkomponente erstellt wird, die Audio abspielt.

class PlayMusic extends React.Component {
  state = {
    songplaying: false
  };
  song = new Audio(
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
  );
  componentDidMount() {
    this.song.addEventListener("ended", () =>
      this.setState({ songplaying: false })
    );
  }

  componentWillUnmount() {
    this.song.removeEventListener("ended", () =>
      this.setState({ songplaying: false })
    );
  }

  switchPlay = () => {
    this.setState({ songplaying: !this.state.songplaying }, () => {
      this.state.songplaying ? this.song.play() : this.song.pause();
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.switchPlay}>
          {this.state.songplaying ? "Pause" : "Play"}
        </button>
      </div>
    );
  }
}

Hier haben wir eine PlayMusic-Komponente, wo wir den Zustand mit einer Eigenschaft namens songplaying initiieren. Wenn die Benutzer diese Website besuchen, möchten wir nicht, dass der Ton abgespielt wird, daher ist die Statuseigenschaft songplaying standardmäßig false.

Dann erstellen wir eine Instanz des Konstruktors Audio() und speichern sie in der Variablen namens song. Dieser Konstruktor verwendet ein Argument, die URL, für die Audiodatei.

Dann verwenden wir die Lebenszyklusmethoden componentDidMount() und componentWillUnmount(), um Ereignis-Listener für das ended-Ereignis auf der song-Variablen zu setzen und zu entfernen, die eine Instanz von Audio() ist. Konstrukteur. Wir setzen auch die Funktion, um das Ereignis beendet zu behandeln.

Wir rufen die Methode setState() auf, um den Wert der Zustandseigenschaft songplaying zu ändern. Nach Ende der Audiodatei sollte die Zustandsvariable auf false gesetzt werden.

Schließlich geben wir den Container <div> mit einem Knopf zurück. Ein Klick auf diese Schaltfläche löst ein onClick-Ereignis aus, das die switchPlay-Funktion ausführt.

Die Methode this.setState() setzt den Wert der Eigenschaft songplaying auf das Gegenteil ihres aktuellen Werts. Wenn die Zustandseigenschaft aktuell false ist, wird sie auf true gesetzt und umgekehrt.

Wenn der Statuswert true ist, ruft der Event-Handler außerdem die .play()-Methode auf der Instanz des Audio()-Konstruktors auf. Wenn das Audio false ist, wird stattdessen die Methode .pause() aufgerufen.

Schließlich zeigen wir den Schaltflächentext bedingt an. Wir zeigen den Text Pause, wenn das Lied gerade abgespielt wird; wenn nicht, zeigen wir stattdessen Play an.

Schauen Sie sich die Live-Demo des Beispiels auf dieser CodeSandbox an.

Erstellen Sie eine funktionale Komponente, um den Audioplayer in React zu implementieren

Seit React Version 16.8 haben Funktionskomponenten in React viele der gleichen Funktionen wie Klassenkomponenten. Dies ist der Einführung von Hooks wie useState(), useHook() und anderen benutzerdefinierten Hooks zu verdanken.

Lassen Sie uns einen Musikplayer in einer funktionalen Komponente implementieren. Zuerst definieren wir einen benutzerdefinierten useAudio-Hook und rufen ihn dann in der MusicPlayer-Komponente auf.

import React, { useState, useEffect } from "react";

const useAudio = url => {
  const [song] = useState(new Audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"));
  const [play, setPlay] = useState(false);

  const toggle = () => setPlay(!play);

  useEffect(() => {
      play ? song.play() : song.pause();
    },
    [play]
  );

  useEffect(() => {
    song.addEventListener('ended', () => setPlay(false));
    return () => {
      song.removeEventListener('ended', () => setPlay(false));
    };
  }, []);

  return [play, toggle];
};

const MusicPlayer = () => {
  const [playMusic, setMusic] = useAudio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3");

  return (
    <div>
      <button onClick={setMusic}>{playMusic ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

Dies funktioniert im Wesentlichen nach dem gleichen Prinzip wie das vorherige Beispiel. Der Hauptunterschied besteht darin, dass wir anstelle von Lebenszyklusmethoden den Haken useEffect() verwenden, um Ereignis-Listener für das Audio hinzuzufügen und zu entfernen.

Wir verwenden auch den Hook useState(), um Zustandsvariablen wie song und play zu definieren. Ersteres speichert einen Verweis auf den Audio()-Konstruktor und letzteres den Status der Musik.

Die toggle-Funktion schaltet auch den aktuellen Wert der play-Zustandsvariable um, sodass wir die Musikwiedergabe stoppen und bei Bedarf fortsetzen können.

Mit diesem benutzerdefinierten Haken können Sie den Ton einfach einstellen. Geben Sie den Link zur Songdatei an und verwenden Sie dann den ternären Operator, um den Wert der Zustandsvariablen zu überprüfen und den Schaltflächentext entsprechend anzuzeigen.