React native webview에서 오디오 재생(부분해결)

1. 환경
- React native 0.55

WebView 컴포넌트에 오디오 재생(Audio.play())을 포함한 html 소스를 사용시 "cannot find variable Audio" 오류가 발생했다.
사용하는 소스는 DB에 저장되어 있고 PC 웹에서도 사용하므로 이 소스를 변경할 수는 없다.

2. 해결
1) react-native-audio-toolkit 설치
  https://github.com/react-native-community/react-native-audio-toolkit/blob/master/docs/SETUP.md를 참조해서 패키지를 설치한다.
react-native link로 링크 시 app/build.gradle의 dependencies에는 제대로 들어가지 않아서 이부분만 직접 입력했다.
문서에는 수동 링크 부분에 패키지 이름이 react-native-community_audio-toolkit 이라고 되어있는데 react-native-community/audio-toolkit 으로 입력해야 한다.

dependencies {

  ...

  implementation project(':@react-native-community/audio-toolkit')

  ... 

}

2) Audio 대신 Player 사용

  클래스 상단에 아래 코드를 추가하면 WebView 내에서도 this.Audio로 사용할 수 있다.

export default class 클래스 extends Component {
  Audio = Player;

  constructor () { ... }

그 다음 html 소스에서 "Audio"를 모두 "this.Audio"로 바꾸면 된다.

소스 = 소스.replace(/Audio/gm, 'this.Audio');

WebView 컴포넌트는 아래처럼 설정했다.

<WebView
  source={{html: 소스}}
  style={{width: "100%", height: "100%"}}
  userAgent={"Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03C) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"}
  mediaPlaybackRequiresUserAction={false}
  automaticallyAdjustContentInsets={false}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  startInLoadingState={true}
  mixedContentMode={'always'}
/>

3. 미해결 문제
  이런 식으로 사용하면 webview가 unmount돼도 소리가 계속 들린다.