[메리크리] 오디오 재생 - 시도는 해봤다 일기, localStorage

편지지 메일로 보내기에 너무 긴 시간을 들이고 결국 실패해서 오디오 자동재생도 해결 못하는 건 아니겠지... 하며 먼저 해 봤다...

결론부터 말하자면 오디오 자동재생도 실패 ㅎ.. BGM은 없애기로 했다.

 

저번에 대부분 브라우저에서 오디오 자동재생을 막아뒀기 때문에 로그인 버튼을 통해 오디오를 재생하도록 해결했다고 했는데요?

새로운 페이지(달력, 편지, 노래추천)로 이동하면? 또 노래가 꺼지는 이슈 발생...

 

그러하여 저는 세 번의 시도를 해 봤습니다..

나의 철학 세 번 도전하고 안 되는 건 빠르게 포기한다!

 

🧐 시도 1. 새 페이지가 아닌 한 페이지에서 body만 바꾸며 재생하기

대박 !!! 이거면 돼겠다 !!! 하고 1나부터 10까지 일일이 바꾸고 합쳤는데,...

약속을 추가하거나, 편지를 보내거나, 노래를 추천하려면 어쩔 수 없이 새로고침을 해야 하고,,, 그렇게 되면 노래가 또 끊김 !! ㅜㅜ...

이생각을 왜 미리 못하고 무작정 시작했니...

---

🧐 시도 2. 페이지를 넘기는 행위를 미디어 재생 권한 받는 행위로 간주하기

 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

페이지 이동 버튼을 누를 때 이렇게 권한을 부여받으려 했는데요...

또 Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')... 이렇게 권한 거부 오류가 뜸.... 역시나 안 되는 걸로

---

🧐 시도 3. 페이지를 클릭한다면 오디오를 재생하도록 하기

[index.js]

[letter.js]

이렇게 페이지를 이동할 때 currentTime 값을 넘겨 currentTime부터 오디오를 다시 재생하도록 했는데요,...

가장 현실성 있는 아이디어지만, 가장 구림.....

어쨌든 화면 클릭하기 전까진 잠시더라도 노래가 끊기니까? 정말 별로였습니다....

---

🔑 결론

그래서 결론은 BGM은 깔지 않는걸로,,..

따라서 !! 로그인 화면도 없애고 메인화면에서 로그인 할 수 있도록 했답니다!!~

 

관리자만 들어갈 수 있는 페이지도 생겼으니 관리자 버튼도 만들어 줬고,

하는 김에 alert도 추가해서 케이스 처리도 했습니다~

 

실제로 테스터들이 음악때문에 깜짝놀랐다고들 했는데, 없애길 잘한 걸지도,...

 

++ 추가 변경사항

 

[index.js]

[letter.js / music.js / schedule.js]

그리고 UI 싹 바꾸는 김에 이름 넘기는 것도 바꿨다!

 

원래는 각 페이지에서 유저 이름을 가져올 때 href index 값으로 넘겨줬는데, 그랬더니 링크가 안예뻐져서 localStorage로 값을 넘겨주는 방식으로 바꿈!! (사실 currentTime 넘기는 작업할때 바꿨는데 링크가 예쁘길래 그대로 둔 거임 ㅎㅎ..)