Chrome에서 오디오가 자동재생이 안 된다면? howler.js 라이브러리를 사용해 봤습니다.

안녕하세요 클래스메소드 김재욱(Kim Jaewook) 입니다. 이번에는 Chrome에서 오디오가 자동재생이 안 되는 문제를 살펴보고, 해결책으로 howler.js 라이브러리를 사용해 보고 정리해 봤습니다.

문제 원인

<audio autoplay="autoplay"></audio>
<video autoplay="autoplay"></video>

브라우저에서 자동으로 오디오가 재생되도록 하고 싶었기 때문에, 오디오와 비디오태그의 autoplay를 사용하면 해결 될 거라고 생각했지만, Google Chrome에서는 autoplay가 되지 않는 문제가 발생했습니다.

Chrome의 자동 재생 정책

오디오 및 비디오 요소에 대해 Chrome 66에서 시작된 자동 재생 정책은 Chrome에서 원치 않는 미디어 자동 재생의 약 절반을 효과적으로 차단합니다. Web Audio API의 경우 Chrome 71에서 시작된 자동 재생 정책입니다. 이는 웹 게임, 일부 WebRTC 애플리케이션 및 오디오 기능을 사용하는 기타 웹 페이지에 영향을 미칩니다. 자세한 내용은 아래 의 Web Audio API 섹션 에서 확인할 수 있습니다 .

원인은 Google에서 자동재생 방지를 위해 차단해두었기 때문 입니다.

동영상의 경우 음소거 상태일 경우 자동재생이 가능하지만, 오디오의 경우 유저가 재생 버튼을 누르지 않는 이상 자동재생은 불가능한 상태입니다.

Chrome에서 사용하기 위해서는?

<audio autoplay="autoplay" controls="controls">
<source src="static/notification-4.wav" type="audio/mpeg" />
</audio>

먼저 audio를 autoplay로 설정하고 notification-4를 실행해 봅시다.

autoplay로 설정했지만 아무런 반응이 없는 모습입니다.

Chrome에서 설정

Google Chrome에서「개인정보 및 보안」->「사이트 설정」으로 들어갑니다.

「추가 콘텐츠 설정」에서 소리로 들어갑니다.

추가 버튼을 눌러서 자동 재생을 허용할 사이트 주소를 적어줍니다.

다시 웹 페이지를 실행 시켜 보면, 자동재생이 되고 있는 것을 볼 수 있습니다. 하지만 매번 유저가 사이트 설정을 해줘야 한다면 상당히 불편할 거라 생각합니다.

howler.js 라이브러리 사용

이번에는「현대적인 Web을 위한 오디오 라이브러리」라고도 불리는 howler.js 라이브러리를 사용해서 오디오 재생을 해볼까 합니다.

var sound = new Howl({
src: ['sound.mp3']
});

sound.play();

howler.js의 기본적인 사용법은 다음과 같습니다. src로 재생시킬 오디오 파일의 경로를 잡아주고, play()로 오디오를 재생시킵니다.

var sound = new Howl({
src: ['static/notification-4.wav'],
volume: 1.0,
autoplay: true,
onend : () => {
console.log('Finished!');
}
});

volume은 오디오의 volume을 조절하는 옵션이고, autoplay는 자동재생 여부, onend는 오디오가 재생된 다음 실행될 내용을 적으면 됩니다.

위 코드로 실행 시켜 보면, 오디오가 재생되지 않고, console.log('Finished!') 또한 출력되지 않습니다.

하지만 웹 페이지를 클릭하거나, 웹 페이지에서 어떠한 조작을 하게 되면 오디오가 재생됩니다.

<a class="p-2 text-muted" href="list">T E S T</a>

a 태그를 사용해서 index.html에서 list.html로 이동합니다. 여기서 오디오는 list.html에서 실행시켜본다면 오디오가 재생될까요?

a태그를 누르면 오디오가 재생이 됩니다.

if (window.performance) {
console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
console.info( "This page is reloaded" );
sound.play();
} else {
console.info( "This page is not reloaded");
}

그럼 다음 코드로, 페이지가 리로드 됐을 시 오디오를 재생을 시키고, 리로드가 되지 않았을 시「This page is not reloaded」만 출력하는 코드로 테스트를 해 보겠습니다.

페이지를 리로드 하지 않았을 때는 당연히「This page is not reloaded」만 출력됩니다.

리로드 했을 때는 오디오 자동재생 정책에 막혀서 실행되지 않지만, 웹페이지를 한 번이라도 클릭하면 재생이 됩니다. 역시 웹페이지에서 어떠한 조작을 할 필요가 있어 보입니다.

결론

Google Chrome에서 완벽한 오디오 자동재생은 불가능한 것으로 보입니다. 하지만, Howler.js 라이브러리를 사용한다면, 사용자가 웹 페이지를 조작했을 시, 자동재생이 가능합니다. 그 외에 특정 페이지로 리다이렉트를 해도 자동재생이 가능하므로 이러한 부분을 생각해서 코드를 짠다면 충분히 자동재생을 구현할 수 있을 거라고 생각합니다.

참고

• Autoplay policy in Chrome
• GitHub Howler.js
• 오디오 파일의 취급이 간단하게! JavaScript 라이브러리 "Howler.js"