페이지 이동 중에도 오디오를 계속 재생하는 방법
일반적인 웹 페이지에서 다른 페이지로 이동하면 브라우저가 새 문서를 로드하면서 기존 JavaScript 상태와 함께 재생 중인 오디오도 중단됩니다. 페이지를 탐색하는 동안에도 오디오 재생을 끊김 없이 유지하려면 다음 방법들을 활용해 보세요.
1. Ajax를 사용한 콘텐츠 로드
페이지 전체를 새로 불러오는 대신 Ajax(XMLHttpRequest 또는 fetch API)로 필요한 콘텐츠만 비동기적으로 가져와 화면의 일부만 갱싱하면 됩니다. 이렇게 하면 브라우저가 실제로 페이지를 다시 로드하지 않기 때문에 오디오 재생이 그대로 유지됩니다.
2. History API의 pushState() 활용
Ajax로 콘텐츠를 교체할 때 주소창의 URL도 함께 변경하고 싶다면 History API의 pushState() 메서드를 사용할 수 있습니다. 이 메서드는 페이지를 새로 고침하지 않고도 URL을 바꾸고 브라우저 히스토리에 새 항목을 추가합니다.
pushState()는 세 가지 매개변수를 받습니다.
- state 객체: pushState()로 생성되는 새 히스토리 항목에 연결할 데이터입니다. popstate 이벤트 발생 시 이 데이터를 다시 참조할 수 있습니다.
- title: 새 히스토리 항목의 제목입니다. 짧은 제목 문자열을 전달할 수 있으며, 현재 대부분의 브라우저에서는 무시되지만 향후 호환성을 위해 전달해 두는 것이 좋습니다.
- url: 새 히스토리 항목의 URL입니다. 보안상의 이유로 같은 출처(origin) 내의 주소만 지정할 수 있습니다.
3. 브라우저 호환성을 위한 History.js
구형 브라우저까지 고려하여 여러 브라우저에서 일관된 동작을 보장하려면 History.js 라이브러리를 사용하는 것이 좋습니다. History.js는 HTML5 History API를 지원하지 않는 환경에서 해시 기반 폴백을 제공해 크로스 브라우저 호환성을 확보해 줍니다.
추가 팁: SPA 프레임워크 활용
최근에는 React, Vue, Angular와 같은 SPA(Single Page Application) 프레임워크를 사용하면 라우팅 시에도 페이지가 새로 로드되지 않으므로, 음악 플레이어처럼 지속적인 재생이 필요한 기능을 더욱 안정적으로 구현할 수 있습니다.