상황
진행중인 프로젝트에서는 사용자가 녹음한 음원 파일을 플레이 할 수 있는 기능을 제공한다.
플레이 되는 동작은 아랫쪽에 보이는 오디오 플레이어가 전역에서 참조할수있는 audio tag이다.
해당 audio 태그에 재생하고자 하는 음원의 URL을 직접 할당하여 플레이 할 수 있도록 동작한다.
문제
안드로이드 환경의 디바이스에서는 아무런 이상없이 잘 재생이 된다.
그러나 배포 후에 ios 환경의 디바이스 -> 아이폰 사용자의 핸드폰에서는 재생 자체가 되지않는다.
왜 일까.. 구글링을 해도 뭔가 해결방법이 잘 나오지 않는다.
테스트
- audio tag 를 사용해서 안된다면, audio 생성자를 사용해서 재생하는 방법은 될까?
- 업로드 되어있는 서버에서 음원 URL을 가져와 주입하는 방식이 안된다면, 내 프로젝트에 올려놓은 파일을 재생하는 것은 될까?
- 음원 확장자의 문제는 아닐까?
실험
Case 1. audio 생성자 사용해보기
audio 생성자를 사용해서 재생하는것도 실패
Case 2. 프로젝트 내 파일을 직접 연결해보기
테스트하기 위해서 음원을 폴더에 넣고 import 해와서 직접 audio 태그의 src 속성에 넣어주었다. 배포를하고.. 아이폰으로 확인해봤다..
오! 재생이 된다.
노란색으로 하이라이트 된 부분의 audio 태그가 재생파일의 duration을 읽어와 재생할수 있는 상태를 표시하고 실제로 재생하니 잘 나온다.
Case 3. 확장자 문제일까?
2번째 케이스를 테스트하고 음원이 재생되는걸 보니 심각하게 확장자쪽에서 냄새가 난다..
혹시나에서 타 사이트의 음원 url을 가져와 재생을 해보려고했다.
지금까지 테스트한 음원의 확장자는 .ogg / .mpeg 파일이다.
타 사이트 음원은 .mp3 파일로 테스트를 위해 잠깐만 가져다 쓰기로했다..
결과는?
역시 잘나온다...ㅠㅠㅠ 확장자의 문제였던것..
그럼 왜 ogg나 mpeg는 ios에서 재생이 안되는가?
테스트를 해보고 부랴부랴 ios가 audio파일의 어떤 확장자를 지원하는지 찾아보았다.
- Which Audio Files Can iPhone Play? 원문링크
구글링을 해보니 다음과 같은 내용으로 아이폰에서 지원하는 오디오 파일의 확장자를 안내하고있다.
역시나 내가 테스트에 실패했던 ogg, mpeg 파일은 지원하지 않는다.
- caniuse 원문링크
caniuse에서도 또한 정보를 확인 할 수 있다.
그럼 녹음 할때 MIME Type을 바꿔보자
- 기존 코드
내가 작성한 기존 코드에서는 녹음 할 때 저장한 chunks 데이터를 Blob 객체로 변환할때
MIME Type을 audio/ogg 로 저장하고 있다. 이 부분에서 아이폰에서 재생 가능한 타입으로 변환하여 녹음한 후 재생 테스트를 해보기로 했다.
시도 해 본 MIME Type
- acc
- wav
우선 mp3로 MIME Type을 지정할수없었고, 나머지 acc, wav 타입으로 지정해서 테스트해보았으나 플레이가 되지 않는다.
딱 한가지 플레이가 정상적으로 되는 상황이 있었는데,
녹음이 아니라 mp3 파일을 input 에 넣어 업로드하고, 서버에서 받아온 url에서도 .mp3로 확장자가 되어있을 경우에 아이폰에서 정상적으로 플레이가 가능했다.
음원을 업로드 할때 컨버팅을 하던 음원을 업로드하고 서버에서 컨버팅을 하던 다시 파일의 형식을 바꿔주는 작업을 해야할것같다.
계속 되는 버그 (2022-01-19)
현황 브리핑
- 클라이언트단에서 Blob 객체로 생성한 오디오파일의 MIME Type을
mp4, mp3, ogg, flac, wav 등등 어떤 타입으로 변환해도 ios 에서 플레이 되지 않음.
플레이가 가능한 경우
- mp3 파일이 아닌 경우 웹 컨버터를 사용해서 새로운 파일 형태로 가공한 후 그 파일을 업로드 하는 경우
- 원래 mp3 였던 파일을 업로드 할 경우
의심 가능한 상황
<플레이 안됨>
왼쪽 스크린샷은 클라이언트단에서 blob 객체의 MIME Type을 mp3로 지정하여 서버로 올린 후 AWS S3에 업로드된 파일을 다운로드 받은것
<플레이 됨>
오른쪽 파일은 컨버터를 사용해서 mp3로 변환 가공하여 업로드 한것을 다운받은것
차이점
왼쪽은 길이값이 없고 오른쪽은 길이 값이 있음..
문제 좁히기
- 원래 mp3가 아닌 파일을 blob 객체로 변환 후 새로 MIME Type을 지정하는 방법은 원본 파일의 압축상태(?) 가 온전하지 않은 것인가?
ffmpeg module
미디어 파일 컨버팅을 도와주는 모듈을 사용해서 해결하려했다..
그런데..wasm ffmpeg의 경우 SharedArrayBuffer 사용하기에
일부 안드로이드 계열, IOS계열 즉 모바일에서도(파이어폭스 제외) 사용이 현재는 불가능하다.
클라이언트단에서는 해결이 안되는건ㄱㅏ..ㅠㅠ
https://shifeed.tistory.com/entry/%EC%9B%B9%EC%96%B4%EC%85%88%EB%B8%94%EB%A6%AC%EC%99%80-FFmpeg-1
결론
- 현재의 상황
- mp3 파일 일때 플레이 됨
- 안드로이드에서 녹음한 것은 iOS에서 재생이 안됨 (ㅂㄷㅂㄷiOS)
-
문제 확인
컨버팅을 하면 모든 기기에서 잘 재생됨
-
해결
지난번 프론트단에서 FFmpeg를 설치해 컨버팅 해보려했으나 별도의 FFmpeg를 설치하여 업로드한 파일을 서버단에서 컨버팅 하기로함
