React でオーディオ プレーヤーを実装する

1. React でオーディオ プレーヤーを実装するためのクラス コンポーネントを作成する
2. React でオーディオ プレーヤーを実装する機能コンポーネントを作成する

React アプリケーションは、ビジュアル コンテンツを表示するためだけのものではありません。 オーディオコンテンツも不可欠な場合があります。

音楽を再生するように React コンポーネントを構成し、必要に応じて再生を一時停止および再開するボタンを設定できます。

React でオーディオ プレーヤーを実装するためのクラス コンポーネントを作成する

React では、ES6 クラス コンポーネント構文を使用してコンポーネントを作成し、任意の音楽ファイルを再生できます。 そのために、状態、ネイティブの Audio() コンストラクター、ライフサイクル フックなど、複数の機能を利用します。

オーディオを再生する React クラス コンポーネントを作成する方法の実際の例を見てみましょう。

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

ここには PlayMusic コンポーネントがあり、songplaying と呼ばれる 1つのプロパティで状態を開始します。 ユーザーがこの Web サイトにアクセスしたときにオーディオを再生したくないので、デフォルトでは、songplaying 状態プロパティは false になります。

次に、Audio() コンストラクターのインスタンスを作成し、それを song という変数に格納します。 このコンストラクターは、オーディオ ファイルへの 1つの引数 (URL) を取ります。

次に、ライフサイクル メソッド componentDidMount() と componentWillUnmount() を使用して、Audio() のインスタンスである song 変数の ended イベントのイベント リスナーを設定および削除します。 コンストラクタ。 また、ended イベントを処理する関数を設定します。

setState() メソッドを呼び出して、songplaying 状態プロパティの値を変更します。 オーディオ ファイルが終了したら、状態変数を false に設定する必要があります。

最後に、ボタンが 1つある <div> コンテナを返します。 このボタンをクリックすると、switchPlay 関数を実行する onClick イベントがトリガーされます。

this.setState() メソッドは、songplaying プロパティの値を現在の値の反対に設定します。 state プロパティが現在 false の場合は true に設定され、その逆も同様です。

さらに、状態値が true の場合、イベント ハンドラーは Audio() コンストラクターのインスタンスで .play() メソッドを呼び出します。 オーディオが false の場合、代わりに .pause() メソッドを呼び出します。

最後に、条件付きでボタン テキストを表示します。 曲が現在再生中の場合は、Pause テキストが表示されます。 そうでない場合は、代わりに Play を示します。

この CodeSandbox の例のライブ デモを確認してください。

React でオーディオ プレーヤーを実装する機能コンポーネントを作成する

React バージョン 16.8 以降、React の機能コンポーネントには、クラス コンポーネントと同じ機能が多数あります。 これは、useState()、useHook()、およびその他のカスタム フックなどのフックの導入によるものです。

機能コンポーネントに音楽プレーヤーを実装しましょう。 まず、カスタム useAudio フックを定義し、それを MusicPlayer コンポーネントで呼び出します。

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;

これは、主に前の例と同じ原則に従って機能します。 主な違いは、ライフサイクル メソッドを使用する代わりに、useEffect() フックを使用してオーディオのイベント リスナーを追加および削除することです。

また、useState() フックを使用して、song や play などの状態変数を定義します。 前者は Audio() コンストラクターへの参照を格納し、後者は音楽のステータスを格納します。

toggle 関数は play 状態変数の現在の値も切り替え、必要に応じて音楽の再生を停止して続行できるようにします。

このカスタム フックを使用すると、オーディオを簡単に設定できます。 曲ファイルへのリンクを提供し、三項演算子を使用して状態変数の値を確認し、それに応じてボタン テキストを表示します。