Safari에서 mp3 파일의 재생이 밀리는 버그

문제 상황

    if (this._audio.dataset.src === src) {
      if (Math.abs(clipStart - this._audio.currentTime) >= 0.3) {
        this._audio.currentTime = clipStart;
      }

      this.play();
      return;
    }

 

현재 우리 mp3 재생은 버튼을 클릭시 서버에서 미리 받아온 clipStart 값을 통해 현재 audio 객체에 currentTime 설정해서 원하는 위치에 오디오를 재생시키도록 되어있다.

 

크롬에서는 문제가 없었지만 Safari 브라우저나 ios에서는 오디오 재생이 밀리는 문제가 발생했었다. 

 

현재 서버에서 받아오는 mp3 파일이 135kb/s에 VBR 포맷으로 인코딩이 되어있었다.

찾아보니 사파리에서는 VBR 포맷된 mp3파일을 정확하게 seeking을 하지 못하는 문제가 있었다. 

 

해결 방법

 

결과적으로 Safari 브라우저에서 정확한 seeking을 하기 위해서는 mp3 파일의 포맷 변경의 변경으로 해결이 됐다.

- 가변 비트레이트를 가진 VBR 포맷이 아닌 고정 비트레이트를 가진 CBR로 변환

- AAC 코덱으로 변환

 

ffmpeg -i [변환하고자 하는 파일] -c:a aac -b:a 128k -movflags +faststart [결과 파일의 이름]

 

ffmpeg 프로그램은 aac 코덱은 -b:a 128k로 비트레이트를 지정하면 고정 비트레이트를 유지하도록 변경하니 위 명령어를 사용해서 기존 VBR 포맷의 mp3 파일은 고정 비트레이트를 가진 CBR(ABR)로 변경했다.