[Cordova] 백색소음 기능을 위해 'media' plugin 사용하기

[Cordova] 백색소음 기능을 위해 'media' plugin 사용하기

# 개요

 qDiary(육아일기)에 백색소음^[각주:1]기능을 추가하기 위해 cordova-plugin-media 을 사용하였다. 개발을 하며 겪었던 문제들과 이를 해결하기 위한 방법을 공유하고자 합니다. plugin에 대한 자세한 내용은 https://github.com/apache/cordova-plugin-media 에서 확인할 수 있습니다.

# media file path 

 media plugin을 사용하여 media file을 play 하기 위해서 media 객체를 생성 후 play() method를 호출합니다. (먼저 device의 file에 접근하기 위해서는 cordova-plugin-file 가 필요합니다.

var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);   media 객체를 생성하며 src에 play 하고자 하는 file의 path를 설정합니다. 이때 android와 ios의 path에 차이가 있기 때문에 서로 다르게 정해주어야 합니다. http://ngcordova.com/docs/plugins/file/ 에서 확인할 수 있습니다.

저는 다음과 같이 처리하였습니다.

          if (Util.isIOS()) {

            path = selectedSound;

          } else {

            path = cordova.file.applicationDirectory + 'www/' + selectedSound;

          } 

# ios background play 

 plugin을 사용하여 media file을 play하면 Android 같은 경우에는 앱이 꺼지지 않는 이상 file이 끝나기 전까지 계속 play 되었지만 ios 같은 경우는 앱에서 포커스가 사라지면 play가 멈추는 일을 겪었습니다. 이는 다음과 같은 설정으로 해결이 가능합니다.

(1) xcode에서 프로젝트에서 마우스 오른쪽 버튼 클릭 후 Open As -> Xcode Project 클릭

(2) Capabilities에서 Background Modes의 Audio, AirPlay and Picture in Picture 체크

# 반복 재생 - (1)

 약 20초의 길이를 가진 file을 반복 재생할 경우 play가 종료되고 다시 시작되는 사이에 1~2초 정도의 정적이 생기는 경우를 겪었습니다. 이를 해결하기 위해 media객체를 여러개 만든 후 timeout으로 시간간격을 두어 실행하는 방식으로 해결하였습니다.

# 반복 재생 - (2)

 Android는 위와 같은 방법으로 해결 하였지만 ios의 경우에는 media 객체가 여러개 생성은 되었지만 동시에 play가 되지 않아서 다시 해결방법을 변경하였습니다. seekTo 라는 method를 사용하여 파일을 되감기 하였고 이를 setInterval로 설정하여 반복 재생하도록 하였습니다.

# background play + 반복 재생

 backgorund play 와 반복 재생이 모두 가능하도록 하기위해 이를 다시 Service로 구현하였습니다.

# 추가사항

 기존 cordova-plugin-native audio를 사용하고 있던 코드를 cordova-plugin-media로 변경하였습니다.

1. 일정한 청각 패턴 없이 전체적이고 일정한 스펙트럼을 가진 소음으로서 부스럭대는 소리나 창밖의 자동차 소리등 미약한 소음들을 덮어주어 상대적으로 소음을 덜 느끼게 해준다. 즉 아기들의 수면에 도움이 된다. [본문으로]