HTML <Audio> Tag 사용 시 에러 - DOMException: play() failed because the user didn't interact with the document first

프론트엔드 코딩 중 audio 태그를 사용해서 알림음 혹은 BGM을 구현하고자 할 때, "DOMException: play() failed because the user didn't interact with the document first" 라는 에러 메세지를 마주하게 될 수 있다.

 

이는 바뀐 브라우저 정책에 의해서 브라우저들이 오디오나 비디오의 자동 재생 등을 막기 위해 사용자에게 오디오나 비디오의 기능을 허용할 것인지를 먼저 묻도록 바뀌었기 때문이다. 실제로 설문조사 결과 대다수의 웹 사용자들이 자동 재생되는 음악이 user experience에 안 좋은 영향을 끼친다고 답했다고 한다. 바뀐 정책에 대한 자세한 설명은 https://developer.chrome.com/blog/autoplay/#webaudio를 참조하기 바란다.

 

그래서 결론적으로, 이 에러를 해결하기 위해서는 따로 모달을 만들어서 사용자가 오디오 기능을 사용할지 물어보던가, 사용자가 브라우저 옵션에서 해당 페이지에 대해서 오디오 기능의 권한을 수락하던가, 아니면 오디오 기능에 대한 권한을 수락하도록 묻던가 해야 한다.

 

이 글에서는 이 중 3번째 방법인 Permission 수락 묻기에 대한 자바스크립트 구현에 대해서 다루고자 한다.

 

var AudioContext;
var audioContext;

window.onload = function() {
    navigator.mediaDevices.getUserMedia({ audio: true }).then(() => {
        AudioContext = window.AudioContext || window.webkitAudioContext;
        audioContext = new AudioContext();
    }).catch(e => {
        console.error(`Audio permissions denied: ${e}`);
    });
}

 

위의 코드는 window가 로딩될 때 navigator.mediaDevices.getUserMedia 메소드를 통해 {audio: true}라는 constraint와 함께 실행시켜서 사용자가 오디오 기능의 허용을 원하는지 묻게 만든다. 여기서 한번 허용을 하고 나면 다음번에 다시 해당 페이지에 접속할 때에는 권한 허용에 대해 더 이상 묻지 않게 된다 (이미 사용자가 영구적으로 권한 허용을 허락했기 때문).