🧐 문제/목표 파악

언젠가부터 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");
});
});
'Today I Errored 🔥 (문제해결력)' 카테고리의 다른 글
| [Convex] 배포된 서버에서 convex함수가 작동되지 않는 건에 대하여 (0) | 2024.06.24 |
|---|---|
| [BaaS] Convex로 백엔드 연결하기 (0) | 2024.06.22 |
| [kaplay] 플레이어 Touch 조작 총정리 (0) | 2024.06.21 |
| [Kaplay] 기존의 템플릿에 내가 필요한 기능을 녹여내기 (0) | 2024.06.19 |
| [kaplay.js] 버튼 터치 구현하기 (0) | 2024.06.18 |