자바스크립트에서 오디오 알림 사용하기 (크롬 autoplay 차단 정책 우회 방법)

2022.04.06 - [자바스크립트] - 자바스크립트 특정 이벤트가 있을 때 favicon변경과 title 변경을 통한 알림 구현하기

 

얼마 전에 이것을 구현 했다가 알림음까지 나오면 좋겠다 싶어서 소리 재생까지 하는 구문을 추가해보았다.

var audio = new Audio('../../complete.mp3');

function changeFavicon() {
    var iconNew = '../../favicon2.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "Completed -- View Source"
}

function changeBaseFavicon() {
    var iconNew = '../../favicon.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "View Source"
}

jQuery.ajax({
        type:'GET',
        url:'www.naver.com',  
        beforeSend: function () {
            console.log("beforeSend");
        },
        complete: function () {
            console.log("Complete");
        },                
        success: function (html) {
            if (!document.hidden) {
                return;
            }
            else{
                audio.play();
                changeFavicon();
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
});


window.addEventListener('focus', function () {
    changeBaseFavicon()
}, false);

window.addEventListener("mouseover", function () {
    changeBaseFavicon()
}, false);

 

여기서 추가된 구문은 이것인데,

var audio = new Audio('../../complete.mp3');

audio.play();

정말 쉽게도 Audio객체 선언 해주고 파일 위치만 정해주면

play()함수를 통해 정말 쉽게 오디오를 재생할 수 있다. 

 

Audio객체에 대해서는 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio

여기서 더 찾아보도록 하고, 

 

하지만 저런 식으로 구현하게 되면 크롬에서는 문제가 발생한다.

 

크롬에서는 사용자의 특정 이벤트 없이 오디오 또는 비디오를 자동으로 재생할 수 없는 정책을 게시 하였다.

광고 또는 스팸 사이트의 접속했을때 사용자가 불편을 느낄 수 있기 때문에 이런 정책을 내놓은것 같다.

정책 docs https://developer.chrome.com/blog/autoplay/

 

이것을 우회하는 방법으로는 docs에도 나와 있는 것처럼, iframe을 사용하면 된다.

아래 코드를 보자

 

<iframe src="../../silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>


function changeFavicon() {
    var iconNew = '../../favicon2.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "Completed -- View Source"
}

function changeBaseFavicon() {
    var iconNew = '../../favicon.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "View Source"
}

jQuery.ajax({
        type:'GET',
        url:'www.naver.com',  
        beforeSend: function () {
            console.log("beforeSend");
        },
        complete: function () {
            console.log("Complete");
        },                
        success: function (html) {
            if (!document.hidden) {
                return;
            }
            else{
            	$('#player').remove();
                $('body').append(`<audio id="player" autoplay></audio>`);
             	$("#player").append(`<source src = "../../complete.mp3" type = "audio/mp3">`);
                changeFavicon();
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
});


window.addEventListener('focus', function () {
    changeBaseFavicon()
}, false);

window.addEventListener("mouseover", function () {
    changeBaseFavicon()
}, false);

 

Audio객체를 사용하지 않고 iframe 태그와 audio태그를 사용했다.

이것이 작동하는 원리는 iframe으로 소리가 없는 파일을 autoplay를 해서 자동 재생을 실행 할 수 있게 만들고

아래에 Audio태그를 삽입하여 원하는 오디오를 재생시킨다.

 

 

그래서 ajax요청이 완료 되면 전에 있던 Audio태그를 없애고 새로 Audio태그를 생성하며 오디오가 재생되게 된다.