제목: React Audio Player 문제 해결: src 업데이트 시 재생 중인 오디오 변경되지 않음
소개
React를 사용하여 미니 오디오 플레이어를 개발 중이라면, 오디오 요소의 src를 업데이트해도 재생 중인 오디오가 변경되지 않는 문제가 발생할 수 있습니다. 이 블로그 글에서는 이 문제를 해결하기 위한 다양한 방법을 알아보고, src가 변경될 때마다 오디오가 올바르게 업데이트되도록 보장하는 방법을 소개하겠습니다.
문제 설명
React에서 오디오 요소의 src 속성을 단순히 업데이트하는 것만으로 재생 중인 오디오가 자동으로 변경되지 않습니다. 이러한 동작은 캐싱 때문에 발생하는데, 업데이트된 오디오를 로드하고 재생하기 위해서는 추가적인 단계가 필요합니다.
해결책 1: setState 콜백 사용하기
이 문제를 해결하는 한 가지 방법은 setState 콜백 함수를 사용하는 것입니다. 이 접근 방식은 상태를 새로운 소스로 업데이트한 후에 일시적으로 오디오를 일시정지하고 로드한 다음 재생하는 것을 포함합니다.
onTrackChange: function(source) {
this.setState({ isPlaying: source }, function() {
this.refs.audio.pause();
this.refs.audio.load();
this.refs.audio.play();
});
}
이 접근 방식을 통해 상태가 업데이트될 때 오디오가 올바르게 로드되고 재생되도록 보장할 수 있습니다.
해결책 2: useRef와 Hooks 활용하기
React Hooks를 사용하는 경우, useRef 훅을 활용하여 오디오 요소의 인스턴스를 만들 수 있습니다. 이를 통해 소스가 업데이트될 때 오디오 요소를 일시정지하고 로드한 다음 재생할 수 있습니다.
import React, { useRef } from 'react';
const audioRef = useRef();
const updateSong = (source) => {
setSource(source);
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.load();
audioRef.current.play();
}
}
이 접근 방식을 사용하면 상태가 변경될 때 오디오 요소가 올바르게 업데이트되고 재생될 수 있습니다.
해결책 3: 고유한 키 속성 활용하기
다른 해결책으로는 오디오 요소에 고유한 키 속성을 할당하는 것이 있습니다. 이를 통해 React는 각 오디오 요소를 별개의 엔티티로 처리하며, 재생 상태와 시간을 포함하여 해당 요소를 업데이트합니다.
<audio key={props.id} controls>
<source src={props.source}/ type="audio/mp3">
</audio>
이 접근 방식은 오디오가 변경될 때 재생 상태와 시간을 잃는 것을 감내할 수 있다면 효과적으로 작동합니다.
결론
React 오디오 플레이어에서 src 속성을 변경할 때 재생 중인 오디오를 업데이트하는 것은 캐싱때문에 간단하지 않을 수 있습니다. 그러나 이 블로그 포스트에서 소개한 접근 방식 중 하나를 따르면 이 문제를 쉽게 해결할 수 있습니다. 콜백 함수, useRef와 Hooks, 혹은 고유한 키 속성을 사용할지 선택하든지에 관계없이 이러한 해결책을 통해 React 애플리케이션에서 src가 변경될 때 오디오 요소가 올바르게 업데이트되고 정확한 오디오가 재생됩니다.
이 문제 해결 기술을 이해하고 구현함으로써 React 프로젝트에서 견고하고 완벽하게 작동하는 오디오 플레이어를 만들 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
