Search code examples
reactjsreact-nativeaudio

react-native-audio-recorder-player is not playing audio that is being recorded from web


I am using react-native-audio-recorder-player and i am using

const playAudio = useCallback(async audio => {
    try {
      const bro = await audioRecorderPlayer.startPlayer(
       audio
      );
      console.log(bro, 'has prob');
      await audioRecorderPlayer.setVolume(1.0);

      await audioRecorderPlayer.addPlayBackListener(async e => {
        if (e.currentPosition === e.duration) {
          console.error((e.currentPosition === e.duration).toString());
          await audioRecorderPlayer.stopPlayer();
          await audioRecorderPlayer.removePlayBackListener();

          dispatch(stop());

          dispatch(setCurrentPosSec(0));
          dispatch(setCurrentDurationSec(0));
          dispatch(setPlayTime('00:00:00'));
          dispatch(setDuration(audioRecorderPlayer.mmssss(0)));
          return;
        }
        dispatch(setCurrentPosSec(e.currentPosition));
        dispatch(setCurrentDurationSec(e.duration));
        dispatch(
          setPlayTime(
            audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),
          ),
        );
        dispatch(
          setDuration(audioRecorderPlayer.mmssss(Math.floor(e.duration))),
        );
      });
    } catch (err) {
      console.log('net', err);
      dispatch(stop());
    }
  }, []);

it is working fine when we record from react native but problem is arising when i try to play audio that is being recorded from the web using react, however the audio is working fine in react app which is being recorded via web itself but in react native app it is not working.


Solution

  • After thorough research, I found the solution to the issue with React Native Audio Recorder Player not playing recorded audio from web. Utilizing https://github.com/yusitnikov/fix-webm-duration resolved the problem effectively. This repository provided the necessary fix, ensuring seamless playback of recorded audio within the React Native environment.