React에서 작은 오디오 플레이어를 만들어 보도록 하겠습니다.

음악 플레이어가 없는 개인 사이트는 어떤 장점이 있습니까?나는 이렇게 나 자신에게 물었지만, 나는 정말 필요 없다.정성스럽게 고른 MP3를 사용하는 것보다 당신과 당신의 홈페이지를 표시하는 것이 더 좋은 방법은 없습니다.이것이 바로 우리가 자신의 작은 음악 플레이어를 세워야 하는 이유다.
우리는 어떤 삽입도 사용하지 않을 것이다.대신 HTML5와 React(Javascript)를 사용합니다.물론 우리는 바닐라 JS 노선을 걸을 수 있었지만 게이츠비 사이트와 React 응용 프로그램을 만드는 시대에 React 환경에서 일을 하는 것은 재미있고 유용하다.
네, 갑시다.우리는 작은 오디오 플레이어를 만들어서 시작, 정지, 정지, 시간 표시기를 만들 것이다.다음은 우리가 실현하고자 하는 기능의 하나이다working example.우리가 계속하기 전에, 당신은 React 응용 프로그램과 약간의 MP3가 필요합니다.
React 응용 프로그램을 사용하려면 Gatsby, Create React App, a local file 또는 CodeSandBox 을 사용하십시오.만약 당신이 MP3가 필요하다면, 당신은 무료로 이 노래를 다운로드할 수 있습니다.내가 직접 만들었어:)
지금 코드를 볼게요...
웹 페이지에서 오디오를 재생하기 위해서, 우리는 오디오 요소가 필요하다.이것은 JSX의 모든 위치에 배치할 수 있는 간단한 HTML 태그입니다.비주얼 렌더링이 수행되지 않으므로 레이아웃이 흐트러지지 않습니다.그것은 진실한 원소이기 때문에, 다른 원소에 봉인되어 있는지 확인해야 합니다.

<>
<h1>My Little Player</h1>
<audio />
</>

다음은 MP3가 필요합니다.설정에 따라 하드 인코딩 링크를 사용하거나 가져올 수 있습니다.가져오는 경우 파일을 참조하여 변수로 사용합니다.이미지를 사용하는 방식과 같습니다.만약 네가 이미 MP3를 가리키는 URL이 있다면, 그래도 괜찮다.
처음에 우리는 어떤 오디오 재생도 하지 않았다.하지만 방문자들에게 노래 제목을 클릭하게 하면 이 노래를 틀고 싶어요.그래서 우리는 클릭을 기록하고 어떤 노래가 선택되었는지 식별한 후에 재생하는 방법이 필요하다.
만약 당신이 React에 익숙하다면, 앞의 두 가지 일은 매우 간단할 것이다."onClick"프로세서를 봉인된 궤적의 요소에 추가하고 궤적 제목을 매개 변수로 제공하는 함수에 추가합니다.흔히 볼 수 있는 패턴은'매핑 방법'에서 이 모든 동작을 실행하고 결과를 목록에 보여주는 것이다.내가 그랬어.

class App extends React.Component {
  state = {
    selectedTrack: null
  };

  render() {
    const list = [{ id: 1, title: "Campfire Story" }, {id: 2, title: "Booting Up"}].map(item => {
      return (
        <li
          key={item.id}
          onClick={() => this.setState({ selectedTrack: item.title })}
        >
        {item.title}
        </li>
      );
    });

    return (
      <>
        <h1>My Little Player</h1>
        <ul>{list}</ul>
        <audio />
      </>
    );
  }
}

지금 우리는 클릭할 수 있는 곡 목록이 하나 생겼다."onClick"프로세서에 제공된 함수에서 트랙 제목을 그룹에서 가져와 프로그램의 상태로 설정합니다.우리가 상태에서 설정한 이유는 이 데이터가 반응할 수 있기를 희망하기 때문이다.이런 방식을 통해 우리는 응용 프로그램의 어느 곳에서든 현재 재생 중인 곡을 표시할 수 있다.
만약 네가 지금 클릭하면, 이 노래는 아직 재생되지 않을 것이다.우리는 우선 오디오 요소에 우리가 방금 상태에서 설정한 곡을 재생하라고 알려야 한다.그러나 이를 위해 우리는 그것을 참고해야 한다.React는 이것에 대해 다른 옵션을 가지고 있지만, 우리의 예시에서 리셋 인용을 사용하도록 합니다.

<audio ref={ref => this.player = ref} />

오디오 요소는 현재 우리의ref를 통해 접근할 수 있습니다. 그러나 우리는 그것을 어떻게 그리고 언제 접근합니까?React에는 상태나 도구가 변경될 때마다 실행되는 구성 요소 라이프 사이클이 있습니다.이것은 궤적을 선택하면 함수가 실행된다는 것을 의미한다.이것은'componentDidUpdate'라고 불린다.
그러나 우리는 약간의 논리가 있어야만 정확하게 일을 할 수 있다.우선, 우리는 우리가 흥미를 느끼는 상태에 변화가 생겼는지 검사한다."componentDidUpdate"는 구성 요소의 도구와 상태가 변경될 때마다 실행되기 때문에 조심해야 합니다.우리는 불필요한 때에 코드를 실행하고 싶지 않다.그런 다음 가져온 파일이나 URL에 제목을 연결합니다.그리고 우리는 ref를 통해 우리의 유저를 방문하여 궤적을 설정하고 마지막에play방법을 호출합니다.

  componentDidUpdate(prevProps, prevState) {
    if(this.state.selectedTrack !== prevState.selectedTrack) {
      let track;
      switch(this.state.selectedTrack) {
        case "Campfire Story":
          track = campfireStory
        break;
        case "Booting Up":
          track = bootingUp
        break;
        default:
        break;
      }
      if(track) {
        this.player.src = track;
        this.player.play()
      }
    }
  }

저희 곡은 지금 클릭해서 틀어야 돼요!근데 우리 아직 안 끝났어.우리는 궤적을 멈추고 멈추는 방법이 필요하다. 마지막에는 지속 시간과 시간 표시기가 필요하다.
구축하기 전에 우리 시간을 좀 내서 생각해 봅시다.우리 주에서, 우리는 현재 재생 중인 곡을 추적하고 있다.너무 좋아요!그러나 만약 우리가 프로그램에 재생, 정지, 정지 단추를 추가하려고 한다면 어떻게 해야 합니까?노래가 재생되지 않을 때 정지 또는 정지 버튼을 사용하는 것은 무의미하다.마찬가지로 노래를 멈추지 않으면 재생 버튼도 의미가 없다.
설령 우리가 이런 일에 관심을 가지지 않는다 하더라도, 우리는 여전히 우리의 응용 프로그램이 우리의 음악 플레이어가 무엇을 하고 있는지 알기를 희망할 것이다.그래서 나는 다른 상태를 추가할 것을 제의한다.

  state = {
    selectedTrack: null,
    player: "stopped"
  };

이제 우리는 곡을 재생하기 시작하는 순간으로 돌아간다."component Did Update"에 있었어요. 기억나세요?우리가 오디오 요소가 재생된다고 말했을 때, 우리는 현재'player'상태를'playing'으로 설정합니다.

      if(track) {
        this.player.src = track;
        this.player.play()
        this.setState({player: "playing"})
      }

우리 프로그램은 지금 노래 한 곡을 재생하고 있다는 것을 안다.따라서 재생, 일시정지, 정지 단추를 조건부로 렌더링할 수 있습니다.아마도 오디오 요소 자체가 정확한 것을 재생하고 있다는 것을 알고 있을 것이다. 왜 이렇게 해야 하는가?이것은 옳다.그러나 우리가 습관적으로 React에 입력 필드를 제어하는 것을 좋아하는 것 같다. 이것도 좋은 생각이다. 이렇게 하면 오디오 요소와 같다.그것은 생활을 더욱 간단하게 한다. 우리는 광범위하게 사용되는 React 모드를 사용할 수 있다.

       <>
        <h1>My Little Player</h1>
        <ul>{list}</ul>
        <div>
          {this.state.player === "paused" && (
            <button onClick={() => this.setState({ player: "playing" })}>
              Play
            </button>
          )}
          {this.state.player === "playing" && (
            <button onClick={() => this.setState({ player: "paused" })}>
              Pause
            </button>
          )}
          {this.state.player === "playing" || this.state.player === "paused" ? (
            <button onClick={() => this.setState({ player: "stopped" })}>
              Stop
            </button>
          ) : (
              ""
            )}
        </div>
        <audio ref={ref => (this.player = ref)} />
      </>

그래서 우리 노래를 멈추거나 멈추자.보시다시피 "onClick"프로세서를 사용하여 "player"상태를 수정합니다.이것은 결코 오디오 자체를 막을 수는 없지만, 우리가 이런 변화를 처리해야 한다는 신호와 같다.우리 어디서 해요?"componentDidUpdate"라이프 사이클!

 if (this.state.player !== prevState.player) {
      if (this.state.player === "paused") {
        this.player.pause();
      } else if (this.state.player === "stopped") {
        this.player.pause();
        this.player.currentTime = 0;
        this.setState({ selectedTrack: null });
      } else if (
        this.state.player === "playing" &&
        prevState.player === "paused"
      ) {
        this.player.play();
      }
    }

너는 공식적인 정지 방법이 없다는 것을 알아차릴 수 있을 것이다.반대로 우리는 노래를 멈추고 재생 시간을 0으로 되돌렸다.같은 차이.
우리는 곧 끝날 것이다.우리가 유일하게 해야 할 일은 지속 시간과 시간 표시기를 추가하는 것이다.지속 시간과 현재 시간은 오디오 요소에서 추출할 수 있는 데이터 세션입니다.그러나 그것을 얻기 위해서는 다른 방법이 필요하다.
불행히도 (또는 다행히도), 우리는 렌더링 방법에서 오디오 요소만 인용해서,'current Time'속성에 접근하고, 매초 업데이트되기를 기대할 수 없습니다.따라서 React가 실제 시간을 기반으로 표시할 수 있도록 자체 관리를 유지하는 방식이 필요합니다.우리는 사건 탐지기로 이 문제를 해결할 수 있다.일반 Javascript 코드에서 이러한 내용을 알 수 있습니다.
React에서 작업하기 때문에 수명 주기를 고려해야 합니다.우리가 듣고 싶은 요소가 항상 페이지에 나타나는 것은 아니다.그들은 시작과 끝의 생활을 가지고 있다.따라서 원소가 나타날 때, 우리는 탐지기를 추가하고, 원소가 삭제될 때, 우리는 탐지기를 삭제한다.
다행히도 자바스크립트는 재생할 때 업데이트할 수 있는 특정한 탐지기가 있습니다.그것은'시간 업데이트'라고 불린다.우리는 그것을 사용한 후에 필요한 내용을 구성 요소의 상태에 저장합니다.아마도 너는 창문 높이나 너비 방면에서도 비슷한 일을 한 적이 있을 것이다.이것은 흔히 볼 수 있는 모델이다.

  componentDidMount() {
    this.player.addEventListener("timeupdate", e => {
      this.setState({
        currentTime: e.target.currentTime,
        duration: e.target.duration
      });
    });
  }

  componentWillUnmount() {
    this.player.removeEventListener("timeupdate", () => {});
  }

지금은 노래가 나올 때마다 상태가 업데이트된다.이것은 React가 현재 시간과 지속 시간을 알고 있다는 것을 의미합니다.우리는 그것을 응용 프로그램에 표시할 수 있다.그러나 우리가 이렇게 하기 전에, 우리는 데이터에 대해 약간의 포맷을 해야 한다.여기에 사용할 수 있는 작은 조수 함수가 있다.

function getTime(time) {
  if(!isNaN(time)) {
    return Math.floor(time / 60) + ':' + ('0' + Math.floor(time % 60)).slice(-2)
  }
}

이것은 우리로 하여금 화면에서만 그것을 렌더링할 수 있게 한다.

  const currentTime = getTime(this.state.currentTime)
  const duration = getTime(this.state.duration)

        {this.state.player === "playing" || this.state.player === "paused" ? (
          <div>
            {currentTime} / {duration}
          </div>
        ) : (
          ""
        )}

상태 중의 마지막 메시지가 있으면 우리는 우리의 유저에게 우리가 필요로 하는 모든 것을 보여줄 수 있다.버튼, 지속 시간, 트랙 제목, 시간 표시기.당신의 창조력으로 좋은 일을 하세요!
전체 코드입니다: https://codesandbox.io/s/5y4vjn877x