제곧내
뒹굴거리면서 본 유튜브의 갓고리즘으로 인해 본 Dinosaur게임 만들어보기 이게
누누의 눈덩이마냥 점점 굴러가고있다 ㅡㅡ;
아니 나는 이렇게까지할생각이 아니었는데;; (그래봣자 엄청 눈을 크게굴린것도 아니다 살짝 오바한거다)
아무튼 나는 나름의 고전게임 사운드를 넣고싶었고.
Audio태그의 controls속성을 안넣고 볼륨을 조절할수있는 탭을 만들고싶었다.. 그래서 구글링 하는 와중에 발견한게
https://developer.mozilla.org/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
글 제목도 나같은 사람을 위해 적은듯한
Web Audio API 사용하기 ^-^b
........
참 별별 API가 다있다, 생각하면서 100%이해는 당연히 못하지만 나름의 감을 잡아가며 내 테스트html에 테스트 스크립트파일을 연결시키고 따라하던도중..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" data-playing="false">play</button>
<input type="range" min="0" max="2" value="1" step="0.01" id="range"></input>
<audio src="./WAV/Mercur.wav" crossorigin="anonymous" id='test'></audio>
<script src="./test.js"></script>
</body>
</html>const audioEle = document.getElementById('test')
const btn = document.getElementById('btn')
const range = document.getElementById('range')
const audioElement = document.querySelector('audio')
let audioCtx = new AudioContext();
let source = audioCtx.createMediaElementSource(audioEle)
source.connect(audioCtx.destination)
btn.addEventListener('click',function(){
if(audioCtx.state === 'suspended'){
console.log('first')
audioCtx.resume();
}
if(this.dataset.playing === 'false'){
audioEle.play() ;
this.dataset.playing = 'true';
}
else if(this.dataset.playing === 'true'){
audioEle.pause();
this.dataset.playing='false'
}
})
range.addEventListener('input',function(){
console.log(this.value)
})
링크의 가이드라인과 같다. audio태그의 src경로만 다른것 빼곤. 근데 audioEle.play()부분에서
Uncaught (in promise) DOMException: The element has no supported sources.
에러가 나왔다. src경로를 가이드라인에 나온 경로로하면 정상적으로 됬다.
아무래도 이해가안가는겨 오히려 로컬인데 뭐가문제지? 하고 구글링하는데 꽤 많이들 이런상황에 놓이던것이다.
찾아보니 대략 문제는2가지.
1.경로가 잘못됬거나
2.CORS 문제인것 같았다. => 아니 로컬인데 CORS가 뭔상관?
근데 해당오류는
let source = audioCtx.createMediaElementSource(audioEle)이부분.
오디오컨텍스트에 오디오 요소를 전달해주는 과정. 이걸 안한다면 정상적으로 audioEle.play()가 작동해서 음악이 나오는걸 확인했기때문에, 경로문제는 아니라고 판단했다. => 근데왜되는지도 모르겠다..
아무튼 1번은 재끼고 남은건 2번인데 로컬인데 CORS?! 저런생각에 입이 두루미 마냥나온채 local cors Policy로 구글링 하던도중에
https://jaenjoy.tistory.com/25 좋은글을 봤다.
아무튼 로컬에서도 브라우저가 웹에서 로컬파일에 접근못하도록 하기위해서 CORS정책에 걸리게 해놧다.
라는게 나의 결론이다. 해결책은 구글링하면 많이나오니 생략하겟다 ^-^
전에도 CORS때문에 애먹었던적이있는데 CORS에 대해서 더 자세히 봐야겠다.
CORS.. .. CORS .. . . . . .CORS .. . .
CORS . .. .
CORS는 계속된다
