[TIL] 내일배움캠프 1.25

❓ 문제

사이드 프로젝트를 진행하던 중 노래를 삽입하고싶어 Audio 태그 기능을 사용해보고 있었다.

페이지에 접속하면 생일축하 노래가 자동으로 재생되어야 하고 음원파일 3개가 연속으로 재생되어야 한다.

참고자료
https://curryyou.tistory.com/337

<audio id="song" autoplay src='./audio/song1.mp3'></audio>

위와 같이 작성하였지만, autoplay 자동재생 기능이 작동하지 않는다.

검색해보니,

2018년 1월부터 구글 크롬정책 변경으로 인해 음악이나 영상이 자동재생 되지 않게 바뀌었다고 한다.

이유는 무분별한 광고와 자동재생 미디어로 인해 사용자의 환경이 안좋아지게 되기 때문이라고 한다.

자동재생이 가능한 경우는,

1. mute 상태의 동영상이나 음성
2. 사용자가 웹 화면을 클릭한 경우
3. 모바일 웹사이트를 홈에 추가한 경우
4. 사용자가 자주 재생하는 동영상이나 음성

등이 있다.

나는 어떻게든 자동재생을 시키고 싶어서 여러가지 방법을 시도해 보았다.

참고자료
https://kangdanne.tistory.com/219

1. mute 상태로 웹에 접속하여 시간차를 주고 mute제거 + play상태로 변경

const audio = document.getElementById('song');
if (audio.muted) {
	setTimeout(function(){
    	audio.play()
    }, 5000)
}

결과 : 응 안돼 돌아가

2. Trigger로 play시키기

// JQuery사용
$('#song').on('muted', function() {
	$('#song').attr('src', "./audio/song2.mp3");
  	$('#song').trigger('play');
});

결과 : 응 안돼 돌아가

❗ 결론

구글에서 완벽하게 막아놓았다.

사용자의 웹과의 상호작용(클릭, 탭 등..)이 반드시 있어야지만 소리와 함께 자동재생이 된다고 한다.