[URH-19] useSound 신규

[Choozii]

👾 Pull Request

• 티켓: useSound 신규
• 상태: 신규

1️⃣ Spec

• 오디오를 관리해주는 Hook
  • play, pause, stop, 반복 재생 설정, 재생 위치 설정, 볼륨 설정, 배속 설정 함수 리턴
  • 오디오가 준비되었는지, 현재 볼륨, 반복 재생인지, 일시 정지 여부, 재생 여부, 오디오 길이, 현재 재생 위치 리턴

2️⃣ 변경 사항

3️⃣ 예시 코드

import useSound from './hooks/useSound';

const App = () => {
  const result = useSound({
    url: 'https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3',
  });

  const {
    volume,
    playbackRate,
    isLoop,
    duration,
    currentTime,
    play,
    pause,
    stop,
    setIsLoop,
    setPosition,
    setVolume,
    setPlaybackRate,
  } = result;

  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setVolume(parseFloat(e.target.value));
  };

  const handlePlaybackRateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPlaybackRate(parseFloat(e.target.value));
  };

  const handlePositionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPosition(parseFloat(e.target.value));
  };

  return (
    <div>
      <button onClick={play}>재생</button>
      <button onClick={pause}>일시정지</button>
      <button onClick={stop}>정지</button>
      <div>
        <label>
          볼륨:
          <input
            type="range"
            min="0"
            max="1"
            step="0.01"
            value={volume}
            onChange={handleVolumeChange}
          />
        </label>
      </div>
      <div>
        <label>
          배속:
          <input
            type="range"
            min="0.5"
            max="2"
            step="0.1"
            value={playbackRate}
            onChange={handlePlaybackRateChange}
          />
        </label>
      </div>
      <div>
        <label>
          재생 위치:
          <input
            type="range"
            min="0"
            max={duration}
            step="0.1"
            value={currentTime}
            onChange={handlePositionChange}
          />
        </label>
      </div>
      <div>
        <label>
          반복 재생:
          <input
            type="checkbox"
            checked={isLoop}
            onChange={(e) => setIsLoop(e.target.checked)}
          />
        </label>
      </div>
    </div>
  );
};

export default App;

4️⃣ 관련 문서 (선택 사항)

• HTML Audio Reference

[Choozii]

저도 노래 듣는 걸 참 좋아하는데요 그래서 이런 audio관련 훅이 더 반가운것 같습니다!

이미 많은 기능을 제공하고 있는 훅이지만.. 코드 리뷰를 하기 전에 빠르게 기능 추가를 제안드리고 싶어 먼저 코멘트를 남겨봅니다.

1. 용도가 음악재생일 경우, 02:20 / 3:52와 같은 형태로 활용할 수 있도록 현재재생시간, 전체재생시간을 제공
2. 용도가 bgm재생일 경우, 음소거를 켜고 끄는 기능을 따로 제공
3. 다른 용도 ETC...

이 useSound훅을 어느 정도의 범위를 염두에 두고 만드셨나요? 일단 이렇게 제가 생각한 범위에서 필요한 기능을 더 제안드리고 싶습니다. 특히 음소거의 경우 용도가 음악재생이든, BGM이든 추가됐을 때 유용하게 쓰일 수 있는 기능이라고 생각합니다

1. 용도가 음악재생일 경우, 02:20 / 3:52와 같은 형태로 활용할 수 있도록 현재재생시간, 전체재생시간을 제공 -> 해당 건은 currentTime(현재 재생 위치)이랑 duration(음원 총 길이)로 나타낼 수 있을것 같아요!
2. 음소거를 켜고 끄는 기능을 따로 제공 -> 음소거! 는 생각못했는데 추가해볼게요!!! 의견 감사합니당!

[foresec]

1. 용도가 음악재생일 경우, 02:20 / 3:52와 같은 형태로 활용할 수 있도록 현재재생시간, 전체재생시간을 제공 -> 해당 건은 currentTime(현재 재생 위치)이랑 duration(음원 총 길이)로 나타낼 수 있을것 같아요!

이부분은 00:00형식으로 포맷팅된 형식을 제공하면 간편하게 사용할 수 있지 않을까 했는데 다시 생각해보니 띄어쓰기라던가 포맷팅쪽은 자유롭게 두는게 더 나을 것 같네요😊

+) 앗 그리고 또 하나 생각났는데 autoplay를 boolean값으로 내려줘서 바로 시작할 수 있게끔 하는 기능을 추가하는것은 어떨까요? 하지만 필수적인 기능은 아니기 때문에 원하시는대로 하셔도 좋을 것 같아요 ++) 좀 더 찾아보니 브라우저의 자동 재생 정책상 자동 재생 방지 기능(단, 음소거시 작동은 함)이 동작한다고 하네요. 이 부분은 넘어가는게 좋겠네요.. 📃미디어 엘리먼트 자동재생