React에서 Audio 사용하기

개요

사이드 프로젝트로 웹 디자인&개발을 하면서 Audio를 사용할 기회가 생겼다.

이번에는 "음악 스트리밍"을 주제로 웹 디자인을 하고, React로 개발까지 진행하였다.

 

본론

const [audio] = useState(new Audio(src));

 

먼저, useState를 활용하여 React 컴포넌트의 상태로 오디오 요소를 관리하면 추가되는 기능 또는 초기화에 대해서 유지보수가 편할 것이라 생각한다.

 

src에 들어가는 주소는 mp3파일이 프로젝트 폴더의 public 내에 위치한다면 '/song.mp3'를 넣으면 음악 파일을 불러올 수 있다.

 

본인은 src도 상태로 관리하고자 useState를 활용했다.

 

// 본 개발에서 사용될 음악 목록
const song = ["Cruel Summer", "Shape of you", "Sunflower"];
// 현재 재생되는 음악의 index를 저장하기 위한 State
const [current, setCurrent] = useState(1);
// Audio의 src를 효과적으로 관리하기 위한 State
const [audioSrc, setAudioSrc] = useState(song[current]);
// Audio를 사용하기 위한 State
const [audio, setAudio] = useState(new Audio(`/streaming/${audioSrc}.mp3`));

 

이렇게 함으로써 Audio를 사용할 준비가 끝났다.

 

버튼을 활용하여 Play 및 Pause 기능 구현

// 현재 음악이 재생중인지 아닌지를 판단하는 State
const [isPlaying, setisPlaying] = useState(false);
// 버튼을 누르면 실행될 toggle
const toggle () => { setisPlaying(!isPlaying); }

// useEffect를 활용 isPlaying에 따른 audio 재생/정지
// audio.play() => 재생, audio.pause() => 정지
useEffect(() => {
    isPlaying ? audio.play() : audio.pause();
}, [audio, isPlaying]);


<button onClick={() => toggle()}> {isPlaying ? Pause : Play} </button>

 

본인 구현

Pause 상태

Play 상태

 

본인은 위와 같이 가수 아이콘을 클릭하면 역동적인 애니메이션과 함께 화면 전환이 되는 기능을 구현했다.

이와 같이 여러 가수와 노래를 보여주고 재생하는 기능을 구현하기 위해서, 가수 아이콘을 클릭하면 index 값을 적절히 변경하여 상태 변화를 주었다.

 

전체 코드는 본인 Github에서 확인할 수 있다.

 

https://github.com/itsjh1242/mini-project/tree/main/client/src/views/streaming