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이라는 하나의 속성으로 상태를 시작합니다. 사용자가 이 웹 사이트를 방문할 때 오디오가 재생되는 것을 원하지 않으므로 기본적으로 songplaying 상태 속성은 false입니다.

그런 다음 Audio() 생성자의 인스턴스를 생성하고 song이라는 변수에 저장합니다. 이 생성자는 오디오 파일에 URL이라는 하나의 인수를 사용합니다.

그런 다음 componentDidMount() 및 componentWillUnmount() 수명 주기 메서드를 사용하여 Audio() 인스턴스인 song 변수에서 ended 이벤트에 대한 이벤트 리스너를 설정 및 제거합니다. 건설자. 또한 ended 이벤트를 처리하도록 함수를 설정합니다.

songplaying 상태 속성 값을 변경하기 위해 setState() 메서드를 호출합니다. 오디오 파일이 종료되면 상태 변수를 false로 설정해야 합니다.

마지막으로 하나의 버튼으로 <div> 컨테이너를 반환합니다. 이 버튼을 클릭하면 onClick 이벤트가 트리거되어 switchPlay 기능이 실행됩니다.

this.setState() 메서드는 songplaying 속성 값을 현재 값의 반대 값으로 설정합니다. 상태 속성이 현재 false인 경우 true로 설정되고 그 반대의 경우도 마찬가지입니다.

또한 상태 값이 true인 경우 이벤트 핸들러는 Audio() 생성자의 인스턴스에서 .play() 메서드를 호출합니다. 오디오가 거짓이면 대신 .pause() 메서드를 호출합니다.

마지막으로 버튼 텍스트를 조건부로 표시합니다. 노래가 현재 재생 중인 경우 일시 중지 텍스트가 표시됩니다. 그렇지 않은 경우 대신 재생을 표시합니다.

이 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 상태 변수의 현재 값을 전환하여 필요할 때 음악 재생을 중지하고 계속할 수 있도록 합니다.

이 사용자 지정 후크를 사용하면 오디오를 쉽게 설정할 수 있습니다. 노래 파일에 대한 링크를 제공한 다음 삼항 연산자를 사용하여 상태 변수의 값을 확인하고 그에 따라 버튼 텍스트를 표시합니다.