[kaplay] 크롬정책과 BGM 설정

🧐 문제/목표 파악

언젠가부터 bgm실행이 안됐는데, 이번에 손을 보게 되었다. 에러 메시지가 가리키는대로 실행하기로 했다.

 

 

🎯 문제/목표 해결

 

보아하니, 크롬 정책 상 홈페이지에 자동으로 음악을 재생하면 데이터 소비나 메모리 사용이 과다할 수 있어 조치를 취하도록 가이드하는 것으로 보인다.

 

따라서, 사용자가 페이지와 상호작용을 하도록 버튼을 만들고, 그 버튼을 누르면 음악이 나오게 코드를 짜야한다.

 

해당 코드를 일단 가지고 와서

 

버튼도 만들어놓고,

버튼을 누르면 제시된 코드가 실행되도록 코드를 수정했다.

// 구글 정책에 따라 음악을 재생할 때, 해당 페이지를 화면에 띄워야 실행되게 처리
// 에러 로그에 뜬 페이지의 안내를 참고하여 문제해결

// 버튼을 클릭하면
document.querySelector('button').addEventListener('click', function() {

// 윈도우 객체에서 AudioContext를 활성화시키고,
  window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
}
// 그 이후에 음악이 나오게 한다.
k.loadSound("music", "./bgm.mp3").then((music) =>{
  k.play("music");
});
});