The play() request was interrupted by a call to pause() 이틀간의 삽질

🥑오디오 재생 타임라인 만들기

내 프로젝트는 오디오 url을 가져다가 타임라인을 만들고 그 안에 오디오의 속성값이 담김 div를 추가하는 작업을 하였다.

div를 추가하고 속성값을 불러와서 재생하는건 어렵지 않았지만 pause / seek / stop 의 과정에서 pause후 currentTime을 설정하는 부분에서 설정 후 재생 시  "The play() request was interrupted by a call to pause()." 이 에러가 자꾸 떳다. 직변하자면 pause의 마무리 전에 paly를 실행한다는 것인데 ... 난 그러지 않았다 ! 

 

🥑트러블 슈팅

1. 프로미스를 사용한 play, pause 제어

처음에는 크롬의 개발자 포럼에 있는 방법으로 제어를 해보았다.

모범적인 방법이었지만 ... 나는 분명 Pause를 한 후 play를 진행했기 때문에 맞지 않는 방법이었다.

https://developer.chrome.com/blog/play-request-was-interrupted?hl=ko

DOMException - play() 요청이 중단되었습니다.  |  Blog  |  Chrome for Developers

 

2. 두번째 뻘짓 settimeout 이용하기

무언가 그래도 내가 pause를 마무리 짓지 않고 play를 진행한다고 생각하여 play에도 pause에도 settimeout으로 딜레이를 줘서 시도 해보았는데 역시나 뻘짓...

 

3. 세번째 의외의 단순한 해결

새로 load하기... 너무나 단순히 해결이 되어버려서 좀 당황스럽다 이틀동안 고생했는데...

 

           mp3.pause();

           mp3 .load();

           mp3 .currentTime = calculatedTime;

 

문제가 해결된 이유를 생각해보니 mp3.load() 메서드가 오디오 요소의 상태를 초기화하면서 발생한 것 같다. 이 메서드를 호출함으로써 오디오의 현재 상태와 타이밍 관련 문제가 해결되었을 가능성이 있을 것 같다. (정확히는 모름..)

🥑load() 메서드의 역할

1. 오디오 재로딩: load()를 호출하면 오디오 요소가 다시 로드됩니다. 이 과정에서 미디어 리소스를 다시 요청하고, 미디어의 메타데이터를 다시 읽어들임.
2. 오디오 상태 초기화: load()는 오디오의 현재 상태를 초기화합니다. 이로 인해 이전의 play(), pause() 상태가 리셋되고, 재생 상태가 초기화.
3. 중단된 동작 해결: 어떤 경우에는 오디오 요소가 특정 상태(예: 재생 중지, 일시 정지 등)에서 멈춰있거나, 비동기적으로 처리되는 play() 또는 pause() 요청이 중단될 수 있다. load() 호출을 통해 이러한 상태를 리셋하면서 발생하던 충돌을 방지할 수 있다?

🥑왜 load()로 문제가 해결되었을까?

1. 비동기 처리 문제: 기존 코드에서 pause()를 호출한 후 바로 currentTime을 설정할 때, 브라우저가 아직 pause() 처리를 완료하지 않은 상태일 수 있다. load()를 호출함으로써 오디오 상태를 완전히 초기화하고, 그 후 currentTime을 설정하면 비동기 처리로 인한 충돌을 방지할 수 있다.
2. 브라우저의 캐싱 문제: 일부 브라우저에서는 오디오 파일이 로드된 후 캐싱된 상태에서 currentTime을 조정하는 데 문제가 생길 수 있다. load() 호출은 이러한 캐시를 무시하고, 미디어를 재로딩하게 한다.
3. 재생 상태의 불일치: 때로는 pause()와 currentTime 설정이 정확한 순서로 이루어지지 않으면 브라우저가 상태를 혼동할 수 있다. load()를 통해 이 상태를 강제로 리셋하여 재생 문제를 해결할 수 있다.

🥑결론

mp3.load()를 추가하면서 오디오 상태를 강제로 초기화한 덕분에, pause()와 currentTime 설정 사이에서 발생하던 충돌이나 동기화 문제를 해결한 것 같다. 이 방법이 효과적이긴 하지만, load() 메서드는 리소스를 다시 로드하므로 성능에 영향을 줄 수 있다. 따라서 불필요하게 자주 호출하지 않도록 유의!