4

I am currently implementing a react Native streaming app using expo version and I am having some difficulties. please feel free to answer any of the questions or just one and in any other of your choice.

1) Implementing a Progress bar as the sound plays. To do this, I need to get the duration of the song, then I use Math.Floor to do calculations for the progress bar but i am currently unable to get the duration of the currently playing track. Any ideas on how to do this using either the Sound Object or Video compoment will be greatful.

2) I need to be able to play background sound from my app and from some research, it seems to be impossible with Expo version. Any hacks around this ???

3) How do I determine wether the current playing track using the Audio component has finished ??

4) I want a situation where I can stop any other sound in the device when sound is played from my device. Any idea on how to do this ??

5) Any Recommendations for me on streaming apps using react Native

hong developer
  • 13,291
  • 4
  • 38
  • 68
Nges Brian
  • 479
  • 1
  • 8
  • 22

1 Answers1

2

I can help you with first three questions.

1, To get the total duration of the audio use playbackStatus.durationMillis and to get the current duration of the audio use playbackStatus.positionMillis

Get the playbackStatus by using

export const createAudio = async () => {
    const source = require('../../../assets/audio/storiesAudio/storyAudio.mp3');
    const { sound } = await Audio.Sound.createAsync(source,
        {
         shouldPlay: false,
         isLooping: false,
        },
    onPlaybackStatusUpdate,
    );
    this.setState({playbackInstance: sound});
}

onPlaybackStatusUpdate = async (playbackStatus) => {
    await this.setState({ playbackStatus });
    if (this.state.playbackStatus.isPlaying) {
    }
  }

To convert millis to minutes and seconds

   export const millisToMinutesAndSeconds = (millis) => {
       let minutes = Math.floor(millis / 60000);
       let seconds = ((millis % 60000) / 1000).toFixed(0);
       return (seconds == 60 ? (minutes+1) + ":00" : minutes + ":" + (seconds < 10 ? "0" : 
       "") + seconds);
   }

2, To make the audio play in the background 

const { sound } = await Audio.Sound.createAsync(
    sourceAudioFile,
    {
        shouldPlay: true, //To play the audio when the component is loadded
        isLooping: false,
    },
    onPlaybackStatusUpdate,
);

3, To check whether the current audio track is finished playing, use playbackStatus.didJustFinish

Dhanasekar
  • 179
  • 12
  • Add if (!millis) return '0:00' at the first line of millisToMinutesAndSeconds to cater edge cases e.g undefined, null, NaN – artsnr Jul 14 '23 at 03:36