Custom Hook을 이용한 오디오 플레이어 구현

06 Nov 2023

customhook

오디오 플레이어는 웹 개발에서 자주 사용되는 기능 중 하나입니다. 오디오 파일을 재생, 일시 정지, 스킵 등을 관리하는 많은 로직을 가지고 있기 때문에 이를 관리하기 위한 Custom Hook을 만드는 것은 효율적인 방법입니다. 이번 포스트에서는 React를 기반으로 Custom Hook을 이용하여 오디오 플레이어를 구현하는 방법을 알아보겠습니다.

사용할 기술 스택

React
HTML5 오디오 API

Custom Hook 구현하기

먼저, Custom Hook을 만들기 위해 useAudioPlayer라는 Hook을 생성합니다. 이 Hook은 오디오 파일을 재생, 일시 정지, 스킵 등을 관리하기 위한 로직을 포함합니다.

import { useState } from 'react';

const useAudioPlayer = () => {
  const [audio] = useState(new Audio());
  const [isPlaying, setIsPlaying] = useState(false);

  const toggle = () => {
    if (isPlaying) {
      audio.pause();
    } else {
      audio.play();
    }
    setIsPlaying(!isPlaying);
  };

  const skipForward = () => {
    // 오디오 파일을 앞으로 스킵하는 로직
  };

  const skipBackward = () => {
    // 오디오 파일을 뒤로 스킵하는 로직
  };

  return { isPlaying, toggle, skipForward, skipBackward };
};

export default useAudioPlayer;

useAudioPlayer Hook은 useState를 사용하여 audio 객체와 isPlaying 상태를 관리합니다. 이후 toggle, skipForward, skipBackward 함수를 반환하여 외부에서 이를 사용할 수 있도록 합니다.

오디오 플레이어 구현 예시

위에서 생성한 useAudioPlayer Hook을 사용하여 실제로 오디오 플레이어를 구현해봅시다.

import React from 'react';
import useAudioPlayer from './useAudioPlayer';

const AudioPlayer = ({ src }) => {
  const { isPlaying, toggle, skipForward, skipBackward } = useAudioPlayer();

  return (
    <div>
      <button onClick={toggle}>{isPlaying ? '일시 정지' : '재생'}</button>
      <button onClick={skipBackward}>이전</button>
      <button onClick={skipForward}>다음</button>
      <audio src={src} controls />
    </div>
  );
}

export default AudioPlayer;

위의 예시는 AudioPlayer 컴포넌트에서 useAudioPlayer Hook을 사용하여 오디오 플레이어를 구현한 것입니다. 버튼을 클릭하면 오디오 파일을 재생, 일시 정지하거나 앞으로/뒤로 스킵할 수 있습니다. audio 요소에 src 속성으로 해당 오디오 파일의 경로를 전달하여 오디오를 재생할 수 있도록 설정하였습니다.

마무리

이번 포스트에서는 Custom Hook을 이용하여 오디오 플레이어를 구현하는 방법에 대해 알아보았습니다. Custom Hook을 사용하면 오디오 플레이어와 같이 많은 로직이 필요한 기능을 더욱 간결하고 재사용하기 쉽게 구현할 수 있습니다.

더 자세한 내용은 아래의 참고 자료를 확인해주세요.