현재 진행중인 프로젝트의 기능중 하나가 해당음원의 볼륨조절이다. 하지만 이 볼륨조절이 사용 환경에따라 될수도 있고 안될수도있다.
순수 JS 를 사용하여 input 태그의 type range로 하여 사용할때나 커스터마이징을 위해서 input 태그를 쓰지 않고 mouse 이벤트와 touch 이벤트를 통해 해당 x,y 좌표(y는 볼륨에선 쓰지않는다)를 받아 그값을 style.left 값에 넣어주고 그 left 값을 audio객체에 닮긴 변수의 .volume 에 넣어주게 하여 조절하게 했다. 하지만 문제는 웹브라우저에서 잘 기능이 되고 안드로이드 모바일을 통함 웹 pwa 를 통해서도 잘되지만 문제는 IOS아이폰 환경에선 볼륨컨트롤을 할수 없다는 것이다.
iOS-Specific Considerations
iOS-Specific Considerations There are a handful of device-specific considerations you should be aware of when embedding audio and video using HTML5. Optimization for Small ScreensCurrently, Safari optimizes video presentation for the smaller screen on iPho
developer.apple.com
애플 개발 공식 홈페이지에서도 볼륨조절은 불가능하다고 설명하고 있다. 이럴때 트러블슈팅으로썬 기술적인 한계는 극복할수 없기때문 대안책으로 그 해당 서비스 페이지는 ios디바이스인지를 검사하여 다른 ui 를 보이게 하는것이다.
사용자 에이전트를 이용한 브라우저 감지 - HTTP | MDN
보통 브라우저마다 다른 웹 페이지 또는 서비스를 제공하는 것은 나쁜 생각입니다. 웹은 사용자가 어떤 브라우저나 디바이스를 사용하고 있는지 개의치 않고 모두에게 접근성이 용이해야 하기
developer.mozilla.org
'항해 > 항해99' 카테고리의 다른 글
| TIL 32 Mouse 이벤트, Touch 이벤트 (나중에 작성) (0) | 2022.01.13 |
|---|---|
| TIL 31 JS 다른종류 모바일 기기 감지 구별하는 방법 (0) | 2022.01.13 |
| TIL 29 서비스워커, PWA (0) | 2022.01.11 |
| TIL 28 img 태그 src 쓰는법 (0) | 2022.01.05 |
| WIL 9 실전프로젝트 2주차 회고록 (0) | 2022.01.03 |