ReactNative) Expo-av 예제, 이슈발생 및 해결법

https://docs.expo.dev/versions/latest/sdk/audio/

Audio - Expo Documentation

버튼을 누르면 클릭음이나 동물의 소리, 정답과 오답에 따른  등 다양한 소리를 출력해주는 기능이 필요했다

Expo-av 모듈으 사용하며 겪은 이슈와 해결법을 포함한 사용예제를 작성한다

 

설치

expo install expo-av

 

사용

import { Audio } from 'expo-av';

..//

const sound = new Audio.Sound();
try {
  await sound.loadAsync(require('./assets/sounds/hello.mp3'));
  await sound.playAsync();
  // Your sound is playing!

  // Don't forget to unload the sound from memory
  // when you are done using the Sound object
  await sound.unloadAsync();
} catch (error) {
  // An error occurred!
}

이슈 발생 

1. unloadAsync가 바로 실행되서 오디오가 재생되지 않는 문제가 생겼다

 

2. unloadAsync 코드를 삭제하고 실행하니 오디오가 잘 재생되긴 했지만,

여러번 실행시켜서 오디오가 쌓이면 아예 소리가 안나오는 상황이 발생했다

 

3. 매번 함수를 호출할 때마다 createAsync를 통해 변수를 생성, playAsync로 실행,

setTimeout으로 일정 시간 뒤에 unloadAsync해주도록 변경해서 이슈를 해결했음

//오디오 재생 관련
async function playSound(e) {
    const { sound } = await Audio.Sound.createAsync(e);
    console.log('Playing Sound');
    sound.playAsync(); 
    setTimeout(function(){
        console.log('Unloading Sound');
        sound.unloadAsync(); 
    },1500)
}