[Electron] 리액트 소리가 안 날 때 임시 방편.

개인적으로 만들어 쓰는 리액트 프로그램이 있는데,

이게 아무래도 서버상에서 돌다 보니 실행 하는데 시간이 오래 걸릴 수 밖에 없음.

 

그래서 보니까 Electron 이라는게 있고 리엑트나 vue를 돌릴 수 있나보더라구..

 

바로 만들어 봤음.

 

이것도 빌드 해서 넣는다고 바로 되는건 아니고 나름 문제가  좀 있었음.

 

경로 문제 때문에 react 로 만든 빌드 파일이  실행이 안된다 던가.

 

찾아보니까 file:// 로 돌아가다 보니까 내부적으로 경로가 이상해서 져서  최상위 경로로 접근하는 문제가 있었음.

 

그래서 이거  해결 방법은 빌드 할 때, 

set PUBLIC_URL=.&&npm run build

 

으로  해서 빌드 하면,  경로가 해당 폴더로 셋팅되서 일단  화면은 대충 나왔다.

 

하지만 라우팅에 문제가 생겨서 해당 부분을   리엑트의 라우팅 방법을  BrowserRouter 에서 HashRouter로 바꿔서 해결 했음.

 

근데!! 다 됬나 싶었는데,  소리가 안 나는 문제가 있었음.

 

감시해가지고 이벤트 발생하면 소리가 나오는 프로그램인데,  소리가 안나니 말짱 꽝이지..

 

한참을 찾아봐도 해결 방법이 거의 안나왔음.

 

오류는 아래와 같음.

 

Uncaught (in promise) DOMException: The element has no supported sources.

 

 

이 빌어먹을 오류는 도저히 해결이 안 되었음. 

이게 존나 웃긴게, 개발툴에서 보면 Network 쪽에 사운드 파일을  요청 했을 때 200이 떨어지는거 보면,  읽는데 문제가 있는건 아닌거 같음. 

 

근데 실행만 하면 위의 개같은 오류가 남..  서버 모드로 돌리면 이런 오류가 안나오고 소리가 잘 나오는 환장 할 노릇인거지..

 

그래서, 해결을 했나? 

 

결론적으로는 하기는 했음.

 

일단, 임시적으로 해결한 방법이므로,  실제 프로젝트에서 바로 써먹지 말길 바란다.

 

일렉트론에서 실행 할때는 http 프로토콜이 아니라 file 프로토콜을 이용함. 그래서 이거 때문에 오류가 나는거 같음.

근데 난 해결 방법을 모르겠단 말이야.

계속 방법을 찾는던 와중에  HTMLAudioElement 변수의  자동완성기능을 보고 있던 와중에  src 말고 srcObject 라는게 보이는거지.

 

그래서 직관적으로 접근을 했음. 나같은 경우, 일단 해보고 안 되면 마는 방식으로 하다보니  srcObject로 하면 되지 않을까 하고 찍은거였음 ㅋㅋ

 

그리고 srcObect 라는 놈은 MediaProvider 라는 클래스고, 

MediaProvider =  MediaStream | MediaSource | Blob;

 

들어가보면 MediaProvider  는 위와 같은 구조로 이루어져 있음.

그래서 생각한게 일단 파일은 읽어지는거 같으니, 내가 직접 Blob으로 읽어서 때려 넣어보자고 생각해서 만든거임. 

그리고 그 방법은 성공적으로 동작했음. 

 

아래의 코드를 참조해서 잘 써먹길 바란다.

const el = document.getElementById("audio") as HTMLAudioElement

// 솔직히 fetch 가 동작하는지도 몰랐음. 그냥 GPT가 만들어주길래 써본건데 잘되니까 ㅋㅋ
fetch(path).then(response => response.blob()).then(blob => {
	  
      // 아래의 코드도 구글 뒤져보니까 이렇게 쓰면 된다해서 써본거 
      const data = new Blob([blob], { type: 'audio/wav' })
      const url = URL.createObjectURL(data)
      
      el.src = url;
      el.load();
      el.play().then((e) => { console.log(e) }).catch((e) => { console.error(e) })
})

 

운으로 된 감이 없지 않아 있는데, 뭐 어때 어차피 프로젝트에 쓸 것도 아니고 내꺼 프로그램 상에서 쓸려고 만든거니..

 

다른 해결 방법이 있으면 그거 쓰길 바란다.  서버 모드일 때는 잘 되는거라  의미 없는 삽질이니 쓸 필요 없음.

 

 

요약.

 

1. 기존의  리액트 앱을  일렉트론으로 실행 시킬려고 함.

2. 경로 오류와  라우팅 오류가 나서 수정함.

3. 소리가 안 나오는 심각한 오류가 있었는데, 어찌어찌 운으로 처리함. ㅋ